※ ChatGPTを利用し、要約された質問です(原文:CSSでDIVで挟んでいるのに背景色が出ない?)
このQ&Aのポイント
CSSと(X)HTMLでページを作っています。角丸なページにしたいため、背景色が正しく表示されない問題に直面しています。
CSSの指定方法に問題があるようです。正しく背景色を表示するためには、一部のCSSプロパティを修正する必要があります。
確認はFirefoxとSafariで行っており、どちらのブラウザでも同様の問題が発生しています。
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でやっています。
お礼
な、なるほど!できました・・・! 昔ながらの「上にフタして真ん中があって、下にフタ」という考えが根強くあったため、 <div id="main_contents_bottom"></div></div> という書き方は試しておりませんでした。 浮いたところを元に戻しつつフタをする、みたいな感じでしょうか。 Web標準、勉強します。ありがとうございました。