背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今は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;
}
お礼
できました～！ どうやら bodyの前にhtml,を書かなかったのが原因のようです。ありがとうございました。