CSSでサイトを制作中ですが、背景が出ないことで困っております。
わかりやすくするためレイアウト画像を添付しましたのでレイアウトをご確認ください。
端的に書くと、コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されてしまっています。
このようになってしまうブラウザは、Firefox3,Opera8.5、NS7等です。IEは6なのですが、これだけ大丈夫でした。
でもIE6だけOKではダメなので、調べると、overflow:hiddenで直るような記載を見つけたのでやってみました。
すると、今度は
■IE6でコンテンツが終わっていないのに、途中で切れてフッターが出現してまう
■ミドルコンテンツであるdiv id="mdl"の中の左サイドバーと右コンテンツが両端に離れてしまい、間が開きすぎてしまう。
というようになってきました。どうやって回避すればよいでしょうか?
以下ソースです。
●CSS
------------------------------------------------------------
div#hdr-wrap {
background:url(../img/cmn/hdr_bg.gif) repeat-x;
top:0px;
width:100%;
height:120px;
text-align:center;
}
div#hdr {
width:900px;
_width: 902px;/*IE対策*/
height:120px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#gbnavi-wrap {
background:url(../img/cmn/gbnv_bg.gif) repeat-x;
top: 120px;
width:100%;
height: 51px;
text-align:center;
}
div#gbnavi {
width: 900px;
_width: 902px;/*IE対策*/
top: 120px;
height: 51px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#main-wrap {
top:171px;
width:100%;
height:100%;
background: url(../img/cmn/bg.gif) repeat;
text-align:center;
}
div#main {
overflow: hidden;/*BGcolor表示対策(Firefox,Opera,NS)*/
width: 920px;
_width: 922px;/*IE対策*/
height:100%;
background: #fff;
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#ftr-wrap {
clear: both;
width: 920px;
_width: 922px;/*IE対策*/
height:151px;
background: url(../img/cmn/ftr_bg.gif) repeat-x;
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
margin-left: auto;
margin-right: auto;
text-align: center;
}
div#footer{
clear: both;
color: #415880;
width: 900px;
_width: 902px;/*IE対策*/
height:151px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
------------------------------------------------------------
●HTMLソースは、単にくくっているだけです。
<div id="hdr-wrap">
<div id="hdr">
</div>
</div>
<div id="gbnavi-wrap">
<div id="gbnavi">
</div>
</div>
<div id="mdl-wrap">
<div id="mdl">
</div>
</div>
<div id="ftr-wrap">
<div id="ftr">
</div>
</div>
------------------------------------------------------------
No.4
- 回答日時:
提供されたHTMLとCSSを見る限りだと、floatを使用しているわけでもないのに、なんで解決策として唐突に"ovefflow: hidden;"の事が出てきたり、フッター部分にclearプロパティを使用しているのだろう…と腑に落ちない事だらけですが、ここに記述されていない部分(おそらくミドルコンテンツの子要素あたりに)floatを使用してらっしゃるんですよね?他の回答者様もおっしゃっている通り、ご質問文中のソースだけでは「Firefox3,Opera8.5、NS7等」でも「コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されて」しまうという状況は再現されないからです。
ソースそものものを見ても、特に今回の様な状況を引き起こす様な点は見受けられませんし。ですので、おそらく質問者様の抱えているトラブルの原因となるのは「div id="mdl"の中の左サイドバーと右コンテンツ」という子要素の方にあると推測されるのですが?ましてや、に"ovefflow: hidden;"を適用したら起こってしまったという:
> ■IE6でコンテンツが終わっていないのに、途中で切れてフッターが出現してまう
> ■ミドルコンテンツであるdiv id="mdl"の中の左サイドバーと右コンテンツが両端に離れてしまい、間が開きすぎてしまう。
これらのポイントはまさにその(提供されていない)部分の中にある事ですので、そちらのマークアップ及びCSSの指定を補足して頂かないと原因の特定はできないかと思われます。
※本件のご質問の原因とは(今のところ)関係ありませんが、CSSで気になった点を指摘させて頂きます。
div#hdr {
_width: 902px;/*IE対策*/
}
paddingやborderを併用しているわけでもないのにIEだけ2px多い理由が不明です(他の同様の箇所も)。
div#hdr-wrap {
top:0px;
}
positionプロパティを指定(relativeやabsolute)している部分がないのに、topプロパティを指定している意味が不明(他の同様の箇所も)。positionプロパティのディフォルト値はstaticですから、この状態ではtopプロパティは適用対象とならず効果は無効です。
div#mdl {
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
}
border-color…としておきながら、指定した値がカラーだけではない為、無効になっています。
No.1
- 回答日時:
回答じゃないです。
すみません。
<div id="mdl-wrap">
<div id="mdl">
を定義してるcssが見つからないんですが
div#main-wrap {
div#main {
のことなのかな?
どうやってこれリンクしているのか、教えてもらえませんか。
Wao!わかりやすいようにID名を変更したのが、全部にゆきわたっていませんでした。
あなた様のおっしゃるとおりです。
main-wrap=mdl-wrap
main=mdl
です。
ご指摘いただいて本当にありがとうございます!
もし解決策わかったら教えてくださいませm(_ _)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
中点「・」の改行について
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
表示倍率を変えるとレイアウト...
-
css初心者 フレックスボックス...
-
テキストボックスの高さを可変...
-
HTMLのiframeの入れ子について
-
定義リストに下線をつけたいと...
-
投稿フォームの整列
-
div領域をウインドウサイズに合...
-
Firefoxで見るとli要素レイアウ...
-
画像の位置指定
-
Firefoxでheight:100%がきかない?
-
回り込みについて(間隔が空く)
-
初心者html・CSS ウィンドウを...
-
divで囲まれたpaddingの指定を...
-
CSSで背景色を下まで表示させたい
-
CSSでテキストインデントをマイ...
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報