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;
}