1

这是我的问题，我会尽我所能在这里澄清——我有一个简单的网站，使用外部样式表以完整的 CSS 布局。我有一个主容器，其中包含网站内容的所有元素；但是，除了保存实际页面文本和businessbox. 现在，它显示主要容器的背景颜色（绿色）而不是它应该是什么（白色）。我很肯定这是我忽略的简单事情，以后可能会踢自己，但我想我会要求第二双眼睛。

这是我得到的以及它应该是什么样子。如果我在使用这个容器时遇到问题，希望对 3 个垂直列进行编程不会成为问题！

截屏：

在此处输入图像描述

我的样式表（style.css）：

@charset "UTF-8";
/* CSS Document */


body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}

#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}

#header {
background-image: url(img/BS_header.jpg);
background-repeat:  no-repeat;
background-position:center;
width: 1020px;
height: 322px;
} 


<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}

#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}

#menu ul li{
padding: 5px;
position: relative;
float: left;
}

#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
} 

#menu ul a:hover, #menu ul a:active {
background: #006100;
}

#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}

#menu ul li:hover ul li{
    visibility: visible;
    color: #ffffff;
    background-color: #afafaf;
    padding: 0px;
}

<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}

#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}

.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}

.businesstext {
color: #ffffff;
font-size: 14px;
}

#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}

我的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">
<div id="header">
    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Hot Deals</a></li>
            <li><a href="#">Sign Up!</a></li>
            <li><a href="#">Resources</a>
                <ul>
                <li><a href="#">Events</a></li>
                </ul>
            </li>
      </ul>
    </div> <!--end of menu-->
</div> <!--end of header-->

<div id="cbox">
    <div id="businessbox">
        <div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
        <img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
        <div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
    </div> <!--end of businessbox-->

</div> <!--end of cbox-->

<div id="footer">
    2013 &copy; Buy Local
</div><!--end of footer-->

</div><!--end of container-->

</body>
</html>
4

4 回答 4

1

您的 CSS 中有 HTML 注释。浏览器正在跳过渲染它旁边的行，因此您的 #cbox 和 #menu 样式永远不会应用。删除<!-- MENU ITEMS -->和<!-- CONTENT -->评论，这应该可以正常工作。

请参阅此小提琴以了解实际情况。

于 2013-03-13T20:38:26.767 回答
0

操作，

你为什么这样做：<img src="#" ...？

另外，您的任何background-image网址都在解析吗？

于 2013-03-13T20:40:37.017 回答
0

就像我说的，很明显——使用了错误的注释格式，导致#cbox 属性无法正常工作。

感谢您花时间帮助我解决我的愚蠢问题！

于 2013-03-14T13:25:14.397 回答
0

在您使用图像或背景图像的地方，overflow: hidden; height: 1%;我认为使用会解决您的问题。

于 2013-03-14T13:30:46.430 回答