CSSでDIVで挟んでいるのに背景色が出ない？

質問

CSSと（X)HTMLでページを作っています。角丸なページにしたいため、

/* ---------- 角丸画像の上辺 ---------- */
#main_contents_header {
width: 800px;
height:20px;
background:url(./top.png) no-repeat top;
margin: 10px auto 0px;
padding: 0;
text-align: center;
}

/* ---------- 上辺と下辺の間のメイン部分 ---------- */
#main_contents {
background:url(./bg.png);
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

/* ---------- 角丸画像の下辺 ---------- */
#main_contents_bottom {
width: 800px;
height:20px;
background:url(./bottom.png) no-repeat top;
margin: 0 auto;
padding: 0;
text-align: center;
}

というCSSを作り、

HTMLは

<div id="main_contents_top"></div>
<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>
<div id="main_contents_bottom"></div>

という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。

<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>

という書き方ではダメなのでしょうか・・・？

確認はFirefoxとSafariでやっています。

回答No.3

ICHI-yan · ベストアンサー

最初のソースでいいですので、以下を試してください。
#main_contents_bottom {}
内部に
clear:both;
を入れる。
</div>
<div id="main_contents_bottom"></div>
を
<div id="main_contents_bottom"></div></div>
にする。要は下のコーナーも一くくりにする
以上

簡単にいうとfloatとは浮かせて右か左に配置させる指示です。浮いているので高さが無く高さがないので背景が無いというような状態です。でclearとはそれをクリアーする指示。floatがleftだけなら、clear:leftでもオッケイ。というわけ。

ｈｔｍｌ的物理レイアウトの悪癖をひきづっておられるようです。Web標準を学ばれるとレイアウトがとんでもなく楽になるので、初歩からの学習をおすすめします。

お礼

な、なるほど！できました・・・！

昔ながらの「上にフタして真ん中があって、下にフタ」という考えが根強くあったため、

<div id="main_contents_bottom"></div></div>

という書き方は試しておりませんでした。

浮いたところを元に戻しつつフタをする、みたいな感じでしょうか。

Web標準、勉強します。ありがとうございました。

回答No.2

suzuko

<div id="main_contents_top"></div>

これ
<div id="main_contents_header"></div>
の間違いですよね。＾～＾

「top.png」「bg.png」「bottom.png」をそれぞれ
width: 800px;
height:20px;
の画像で作成し、CSSのURLを「./top.png」でなく「../top.png」にしたところ、Mozilla FirefoxやIE7では表示されていますね。

お礼

ありがとうございます。そして、スミマセン！ご指摘の通り、指定ミスがありました。お恥ずかしい限りです。

最初の質問で、

<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>

　↑
ここを省略して書きすぎました。どうも私の場合は「floatさせた内容を入れると背景が出ない」という状態のようです。

http://2nose.com/css/?ID=120

<div id="main_contents">の間に、左右にfloatさせた内容（メニューとコンテンツ）を入れていました。

だんだんと難しい世界になってきましたが、がんばってみます。

ご回答ありがとうございました！

回答No.1

goldfox

それは、画像の問題ではないですか？
例えば、その背景画像の大きさが高さ300px以上で、下の方にだけ画像が書かれているとか。
（上のほうが余白状態でテキスト1行だけでは画像部分が表示されない）

お礼

ありがとうございます。背景として使用している「bg.png」は、小さな画像なのですが、no-repeat指定してないのでrepeatされてすべてを覆い尽くして表示されると思ったのです・・・

上の方に余白がある、ということはありません・・・