背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。
お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="contents">
<div id="banner"></div>
<div id="navi">
<h2><a href="../service/index.html"><em>あああ</em></a></h2>
中略
</div>
<div id="bread"><a href="index.html">トップページ</a> > あああ</div>
<div id="main">
<p>あああ</p>
</div>
<div id="sidenavi">
<h3>あああ</h3>
<p>あああ</p>
</div>
<div id="pagetop"><a href="#"></a></div>
<div id="footer">Copyright (c) 2009 All Right Reserved </div>
</div>
</body>
</html>
<css>
body {
text-align: center;
margin: 0px;
padding: 0px;
background: #FFCCFF;
}
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
height: 800px;
width: 850px;
background: #FFFFFF;
}
#header {
margin: 0px;
padding: 0px;
height: auto;
width: 850px;
background: #FFFFFF;
}
#contents #banner {
background: url(image/banner.jpg) no-repeat;
margin: 0px;
padding: 0px;
height: 304px;
width: 850px;
}
#contents #navi {
background: url(image/menu.jpg) no-repeat;
margin: 0px;
padding: 0px;
height: 61px;
width: 850px;
}
#contents #navi2 {
background: url(image/menu2.jpg) no-repeat;
margin: 0px;
padding: 0px;
height: 61px;
width: 850px;
}
#navi h2 {
font-size: 12px;
margin: 0px;
padding: 0px;
float: left;
}
#navi em {
visibility: hidden;
}
#navi2 h2 {
font-size: 12px;
margin: 0px;
padding: 0px;
float: left;
}
#navi2 em {
visibility: hidden;
}
#contents {
margin: 0px;
padding: 0px;
height: 500px;
width: 850px;
background: #FFFFFF;
}
#contents #sidenavi p {
font-size: 95%;
line-height: 1.1em;
margin-right: 5px;
margin-left: 5px;
}
#sidenavi h3 {
font-size: 105%;
font-weight: bold;
border-left: 7px solid #FF3366;
padding-left: 5px;
background: #FFCC33;
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
#navi a {
margin: 0px;
padding: 0px;
height: 61px;
width: 169.5px;
display: block;
text-decoration: none;
}
#navi2 a {
margin: 0px;
padding: 0px;
height: 61px;
width: 170px;
display: block;
text-decoration: none;
}
#contents #main {
margin: 10px 0px 0px;
padding: 0px 10px 10px;
height: auto;
width: 610px;
float: left;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ";
background: #FFFFFF;
}
#contents #pagetop {
clear: both;
background: #FFFFFF;
margin: 0px;
padding: 0px;
}
#contents #sidenavi {
margin: 10px 5px 0px 0px;
padding: 0px;
float: right;
width: 200px;
border: 1px dashed #FF3399;
background: #FFFFFF;
}
#footer {
font-size: 90%;
color: #FF3366;
text-align: center;
margin: 0px;
padding: 10px 0px 0px;
clear: both;
border-top: 1px dotted #333333;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
background: #FFFFFF;
}
#main p {
font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color: #FF3399;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
}
#pagetop img {
text-align: center;
padding-top: 10px;
margin: 0px;
padding-bottom: 10px;
padding-left: 5px;
}
.p1 {
font-size: 130px;
color: #FF3366;
padding: 10px;
width: 590px;
border: 2px dashed #FF3399;
background: #FFCCFF;
margin: 10px;
text-align: center;
}
#main img {
margin: 0px;
padding: 0px 0px 10px;
}
#contents #bread {
margin: 5px 0px 0px;
padding: 5px 5px 0px 10px;
font-size: 100%;
width: 830px;
}
補足
なんとか出来ました（＾－＾） ありがとうございます。 ドリームウィーバーのテキストのフォルダはマイドキュメント内に、 商品写真のフォルダはデスクトップ上にしてたのが原因だったとおもいます(+_+) ただ、desktop/photo/top10.JPGに直したのですが、 desktopが→デスクトップに勝手に変わりました。