リスト重なり直りました

2009年1月26日 2009年1月26日

尾関純子

日曜塾の終了式で　じゅん吉先生から、「背景色とサイドの色が同じだから変えるか枠をつけた方がいいよ」とアドバイスをいただきました。
なんか　ぼよ～んと　しまりのない感じでしたが、
枠をつけたら　ピリッとしまりました。
サイドの横幅は、　div#saidを200、bodyを190、h2は175なのに　切れてます
コンテンツ部分は、幅700から、padding-left:30px;分を引いて　width:670px;なのに　はみ出してるし
IE7は、ちゃんと揃っているんですけどね
1月24日の「リストが重なります」は、直りました。
。
<ul><li>リストタグを使わないで、<h2><h3><p>　タグ　を　使いました。
サイドバーのHTML
<h2><a href="goannai/index.html" target="_parent">ご　案　内</a></h2>
<h2>花創人ブログ</h2>
<h3><a href="http://hanahana-project.cocolog-nifty.com/blog/" target="_parent">お花のブログ</a></h3>
<h3><a href="http://hanasounin.jugem.jp/" target="_parent">ネット関連日曜塾ブログ</a></h3>
<h2>ギャラリー</h2>
<h3>寄せ植え</h3>
<p class="nanber"><a href="gallary/yoseue-g01/index.html" target="_parent">№１</a>
・ <a href="gallary/yoseue-g02/index.html" target="_parent">№２</a> ・ <a href="gallary/yoseue-g03/index.html" target="_parent">
№３</a></p>
<h3>ハンギングバスケット</h3>
<p class="nanber"><a href="gallary/hanging-g01/index.html" target="_parent">№１</a>
・ <a href="gallary/hanging-g02/index.html" target="_parent">№２</a>
・ <a href="gallary/hanging-g03/index.html" target="_parent">№３</a></p>
<h3>教　室</h3>
<p class="nanber"><a href="gallary/lesson-g06/index.html" target="_parent">～2006年</a>
・ <a href="gallary/lesson-g07/index.html" target="_parent">2007年</a></p>
<p class="nanber"><a href="gallary/lesson-g08/index.html" target="_parent">　2008年</a>
・ <a href="gallary/lesson-g09/index.html" target="_parent">2009年</a></p>
<h2><a href="http://openuser.auctions.yahoo.co.jp/jp/show/auctions?userID=hanasounin&u=hanasounin" target="_parent">ヤフーオークション</a></h2>
<h2><a href="http://87sounin.jp/mail/index.html" target="_parent">お問い合わせ</a></h2>
<h2>リ  ン  ク</h2>
<h2>サイトマップ</h2>

CSS
h2{
width:175px;　　　　　　横幅
height:30px;　　　　　　高さ
padding-left:40px;　　左　テキストまで40pxあける（葉っぱ画像の分）
padding-top:5px;　　　上　5pxあける
font-size:80%;　　　　　字の大きさ
font-weight:normal;　太字にしない
text-align:left;　　　　　　テキストは左寄せ
vertical-align:middle;　行の真ん中にテキスト
background-color:#ccffcc;　背景色は若草色
background-image:url('h2hed26.gif');　背景画像に葉っぱを入れる
background-repeat:no-repeat;　　　　　　背景画像は続けていれない1個だけ
margin:0 0 5px 0;　　　　　上、右左の隙間は０、下だけ5px
border:1px #49895B solid;　　枠線/太さ・1px緑色・実線
}
h3{
font-weight:normal;
width:150px;
height:20px;
font-size:80%;
background-color:white;
margin:0 0 5px 20px;
}
p.nanber{
margin-left:0;
width:130px;
height:20px;
background-color:white;
margin:0;
font-size:75%;
margin:0 0 5px 40px;
}

HTMLは、すっきりしたけれど　使い方間違ってますか？