背景が表示されない
-
0 名前： 刀根 ： 2005/08/16 17:35
- 度々の質問になり申し訳ありません。
以下のhtml、cssについて、望んだ表示が得られないのですが
記述におかしいところがありましたらご指摘を頂けないでしょうか。
・body全面に背景を敷いた上で、全体を囲むdiv#contentsの背景色に#fffを指定
・div#contents内のdiv.boxに背景画像を指定
・div.boxはh1、div.item_boxの２段組を囲む
…と、したところ現状、div.boxに指定した背景画像が表示されません。
試しに画像ではなく、背景色を指定してみましたが、これも表示されません。
htmlからh1、div.boxを取り払い、適当なテキストを入れてみましたが、これでも背景は表示されません。
しかし、当該のボックス内で右クリック＞「背景画像を表示」で
背景に指定した画像を見ることができます。
お手数をかけますが、ご回答が賜われれば幸いです。
［html］
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
〜中略〜
<body>
<div id="contents">
<div class="box">
<h1>見出し</h1>
<div class="item_box">
文章文章文章文章文章文章文章
</div>
</div><!--div.box-->
<br style="clear:both">
</div><!--div#contents-->
</body></html>
［css］
body {
margin: 0; padding: 0;
background: url(./img/border.gif)
}
h1 { color: #cd5c5c }
div#contents { padding: 10px 20px; margin: 0; background-color: #fff }
div.box {
width: 600px; margin:auto;
float: center;
background: url(./img/vline.gif) repeat-y
}
div.box h1 {
width:130px; height: 100px;
float: left;
color: #cd5c5c
}
div.box div.item_box { width:420px; float: right }
-
1 名前： 刀根 ： 2005/08/16 17:35
- 自己解決しましたので報告致します。
先の質問「背景画像が透ける」と同種の問題だったようです。
floatを含むボックスは、その中でfloatを解除しないと
ボックス自身の高さを算出できない、
その為背景色も背景画像も表示されない、とのこと。
上のhtmlではdiv.boxの閉じタグの後に<br style="clear:both" />を指定していますが
閉じタグの前、つまりdiv.boxの内容物の一番最後に
<br style="clear:both" />を入れることで問題は解決しました。
皆様、有難うございました。
