“侧边栏” div 的背景颜色显示在我的dreamweaver 设计中,但在浏览器(chrome 或 IE)中打开时不显示,查看页面的链接:Dropbox Link。它是“排练”标题下的 div,CSS 代码中的#sidebar。任何帮助将不胜感激,谢谢。
HTML
<body bgcolor="#848484">
<div class="wholepage">
<div class="tophalf">
<div class="logoimg"></div>
<div class="namelogo"></div>
<div class="pic1"></div></div>
<div class="bottomhalf">
<div id="sidemenu"><h4>R E H E A R S A L S</h4></div>
<div class="pic2"></div>
<div id="menu">
<ul>
<li><a href="home.html">home</a></li>
<li><a href="rehearsals.html">rehearsals</a></li>
<li><a href="recording.html">recording</a></li>
<li><a href="teaching.html">teaching</a></li>
<li><a href="equipment.html">equipment hire</a></li>
<li><a href="audio.html">audio specialists</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div class="content"></div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
div.wholepage{
width:900px;
margin-left:auto;
margin-right:auto;
}
div.tophalf{
width:900px;
height:236px;
margin-left:auto;
margin-right:auto;
}
div.logoimg{
float:left;
width:255px;
height:236px;
background-image:url(images/tree.gif)
}
div.namelogo{
float:right;
width:645px;
height:110px;
background-image:url(images/logo.gif)
}
div.pic1{
float:right;
width:645px;
height:126px;
background-image:url(images/pic1.jpg)
}
div.bottomhalf{
width:900px;
height:700px;
}
#sidemenu{
float:left;
width:163px;
height:698px;
border:1px solid white;
background-color:#black;
}
h4{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#white;
}
div.pic2{
overflow:hidden;
float:right;
width:735px;
height:125px;
background-image:url(images/pic2.jpg);
}
#menu{
float:right;
width:733px;
height:33px;
background-color:black;
border:1px solid white;
}
#menu p {
color:#FFF;
font-family:Arial,Helvetica,sans-serif;
}
#menu ul
{
list-style-type:none;
margin:0;
padding:6px;
padding-left:20px;
padding-top:7px;
}
#menu li
{
display:inline;
}
#menu a:link,a:visited
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
padding:13px;
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
font-weight:bold;
}
#menu a:hover,a:active
{
background-color:#0099FF;
}
div.content{
float:right;
width:735px;
height:540px;
background-color:#F00;
}