下の背景画像、背景色が透けてしまう
-
0 名前： 刀根 ： 2005/08/16 16:10
- こんにちは。もし宜しければお知恵をお貸し下さい。
以下ようなhtmlとcssを作成しました。
bodyはパターン画像、body直下のdiv#title、#contents、#footerにはそれぞれ
#fffを背景に設定しています。
div#contents下にはbox、boxiesという２つのクラスがあり、
boxiesは、box2（width:50%）の２段組を囲んでいます。
位置、大きさ等は、意図した通りに表示されるのですが
#contentsの背景色#fffがboxiesの手前までしか敷かれず
boxiesの領域は、背景画像が透けてしまいます。
タグ閉じ損ないなどで#contentsの中におさまっていないのかと思ったのですが
タグの数はあっており、背景が透ける以外は#contentsへの指定が
ちゃんと反映されているように思います（#contentsの要素幅width: 580px内におさまっている）。
・試しに、boxとboxiesの表示順を入れ替えたところ
きちんと全ての範囲に#fffが敷かれました。
・また、boxを一時的に消し、#contents下にboxiesのみがある状態にした場合は
#fffは表示されませんでした（#contentsの領域は全て背景が透過）。
・#contentsの次に、#footerというボックスがありますが
この#footerも、#contents下に内包する形にしたところ
#fffは表示されました。
現状、#footerを#contents下に置くことで見た目を取り繕うことは出来ているのですが
何が原因で、このような状況になっていると考えられますか。
何らかの私のミスだろうと思うのですが、自分ではどうしても分からず…。
急ぎませんので、何かご指摘が頂ければと思い書き込みました。
［html］
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
〜中略〜
<body>
<div id="title">
<h1>大見出し</h1>
</div>
<div id="contents">
<div class="box">
<h2>見出し</h2>
<ul><li>リスト1</li>
<li>リスト2</li>
<li>…</li>
</ul>
</div>
<div class="boxies">
<div class="box2">
<h2>見出し</h2>
文章文章文章文章文章文章文章文章…
</div>
<div class="box2">
<h2>見出し</h2>
文章文章文章文章文章文章文章文章…
</div>
</div>
</div>
<!--div#contentsここまで-->
<div id="footer">
ここにフッタ
</div>
</body>
〜後略〜
［css］
body { margin:0; padding:0; background-image: url(./img/back.gif) }
div#title, div#contents, div#footer {
width: 580px; padding: 10px;
background-color: #fff;
clear: both }
div.box, div.boxies { clear: both }
div.box2 { width: 50%; float: left }
-
1 名前： とおしすがり ： 2005/08/16 16:10
- </div>
<br style="clear:left;">
</div>
</div>
<!--div#contentsここまで-->
-
2 名前： 刀根 ： 2005/08/16 16:10
- ありがとうございます。背景が消える問題は解消されました。
重ねての質問になって恐縮ですが
div#footerへのclear:bothでは意味がないのでしょうか。
（２段組を内包するboxiesにもclear:bothを指定していますが
MacIEだと、親要素にclearプロパティを指定すると
子要素のfloatが効かなくなる、という現象もあるようですね）
-
3 名前： とおしすがり ： 2005/08/16 16:10
- 失礼、質問を誤解していました。
