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.2
- 回答日時:
<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.3ベストアンサー
- 回答日時:
最初のソースでいいですので、以下を試してください。
#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でもオッケイ。というわけ。
html的物理レイアウトの悪癖をひきづっておられるようです。Web標準を学ばれるとレイアウトがとんでもなく楽になるので、初歩からの学習をおすすめします。
な、なるほど!できました・・・!
昔ながらの「上にフタして真ん中があって、下にフタ」という考えが根強くあったため、
<div id="main_contents_bottom"></div></div>
という書き方は試しておりませんでした。
浮いたところを元に戻しつつフタをする、みたいな感じでしょうか。
Web標準、勉強します。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
Media Queries 4 で 非推奨とな...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSSで画像を同じ位置に重なり合...
-
<div>と<div>の間の10px程の...
-
tableタグで作るような表をCSS...
-
font-sizeが効かない
-
ブラウザの文字サイズを変更す...
-
ホームページのメニュー
-
widthやheightの数値に単位(px...
-
float: leftで横に並べたら、サ...
-
スクロールボックスを中央に配...
-
画像の上に、背景を表示させテ...
-
CSSで指定した背景画像にリンク...
-
Internet Explorer 6による不具合
-
CSSについて
-
W3Cのソースコードの検証サービ...
-
インラインスタイルシートで見...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報