みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HP作成で背景画像が表示されないです・・

いつもお世話になっております。
今回は、HP作成のことでご指導いただきたく投稿致しました。
説明が上手くできていないと思いますが
宜しくお願い致します。
参考書片手にCSSにトライしていますが
一部、背景画像が表示できず困っています。
ネットで調べていますと「float」を使っている場合について
対処法が色々掲載されているのですが
何か間違っているようで、どれを試しても
背景画像を表示することができません。
下記にhtmlとcssを簡単に貼り付けました。
説明不足がありましたら、ご指摘下さい。
Dreamweaver MX2004を使っています。


- html -

<body>
<div id="container">
<div id="header">  →背景画像表示されます。
 <p>*****</p>
 </div>
<div id="box">
<div id="left">  →背景画像表示されます。
<p>***** </p>
</div>
<div id="right"> →背景画像表示されません。テキストは表示されます。
<p>*****</p>
</div>
</div>
<div id="footer">
<p>*****</p>
</div>
</div>
</body>

- css -

#container {
width:800px;
height:400px;
top:0px;
text-align:center;
margin-left:auto;margin-right:auto;
text-align:left;
}
#header {
position: static;
top:0px;
font-size: 11px;
padding-top: 0px;
color: #003366;
padding-left: 10px;
width: 800px;
background-image: url(img/*****.jpg);
background-repeat: no-repeat;
height: 120px;
line-height: 25px;
}
#box{
width:800px;
height: 600px;
margin: 0 auto;
}
#left{
width:190px;
float:left;
padding-top: 50px;
text-align: left;
height: 600px;
background-image: url(img/*****.png);
background-repeat: no-repeat;
padding-left: 20px;
font-size: 12px;
padding-bottom: 0px;
}
#right{
font-size: 10px;
height: 600px;
width: 590px;
background-image: url(img/******.png);
float:right;
}
#footer{
width:800px;
clear:both;
text-align: center;
font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE";
color: #CC3300;
font-size: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
padding-top: 20px;
}

投稿日時 - 2011-11-17 15:23:09

QNo.7138523

困ってます

質問者が選んだベストアンサー

初めまして

ウチの環境で試してみました。

結論から言うと、問題なく見えました。

ブラウザ:IE8、FF4.0、GoogleCrome

編集アプリ:ドリームウィーバー8

headerに登録している画像がJPGで、left、rightに登録している画像がpngってのは透過処理をしている部分があるということですかね?(最初、それに気づかずに全部をpngにしたらTOP画像が表示されないで混乱しました)

HTMLに関しては弄ってません、CSSを弄らせてもらいましたので下記に記載します。(headerの画像もPNGになっているので気を付けてください。

今回の表示されない理由はまだ不明ですが、少々気になった部分がありますので記載していきますね。

paddingの使い方で少々間違っていました、paddingを利用する場合はwidthの値も変更しなければなりません。

例:width:800pxのサイトを作るのなら、左右のpaddingのと合計して800pxにする必要があります。

paddingの値が左右個別で10pxなら、800-10-10=780 である必要があります。(ブラウザによってレイアウトが崩れます)

またfloat:left の箇所にはdisplay:inlineも合わせて記載するほうが上手くレイアウトできます(リスト表示の箇所の時は要りませんけど)


以下、cssです

※paddingに関してはいちいち、top left right bottomと指定せずに paddin: top left right bottom;という具合に一行にすると管理しやすいです(上から時計回りに並んでいると覚えればいいですかね)


#container {
width:800px;
height:400px;
top:0px;
text-align:center;
margin:0 auto; /*変更*/
text-align:left;
}

#header{

position: static;
top:0px;
font-size: 11px;
color: #003366;
padding: 0px 10px 0 0; /*変更*/
width: 790px;/*変更*/
background-image: url(img/01.png); /*拡張子を変えていますのでご注意*/
background-repeat:no-repeat;
height: 120px;
line-height: 25px;
}

#box{
width:800px;
height: 600px;
margin: 0 auto;
}

#left{
width:190px;
float:left;
text-align: left;
display:inline;
height: 600px;
background-image: url(img/02.png);
background-repeat: no-repeat;
padding: 50px 20px 0 0;/*変更*/
font-size: 12px;
}

#right{
font-size: 10px;
height: 600px;
width: 590px;
background-image: url(img/03.png);
float:right;
}

#footer{
width:798px;
clear:both;
text-align: center;
font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE";
color: #CC3300;
font-size: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
padding-top: 20px;
}

投稿日時 - 2011-11-20 22:36:58

補足

ご指導いただきまして、ありがとうございます。
昨日から何度も試しているのですけど、
Dreamweaverのデザインプレビューでは表示されているのですが
各種ブラウザで表示することができません。
IEは5.5・6・7・8、Opera、Firefoxで試してみたのですがどれも同じなのです。
何か設定をさわっているのだと思うのですが、検討がつきません・・
paddingに関して、詳しく教えていただきましてありがとうございます。
わかりやすくて勉強になりました。

投稿日時 - 2011-11-22 14:50:49

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問