0

我想知道是否有人可以帮助我弄清楚为什么我的导航菜单似乎在我的主 div 中，但它没有以这种方式编码。我猜CSS是问题所在。很多代码我害怕，但我不知道问题出在哪里，所以我无法隔离它......

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
    <div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
    <div id="navbar">
        <div id="holder">
        <ul> 

   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">My Approach</a></li>
   <li><a href="#">Testimonials</a></li>
   <li><a href="#">Fees</a></li>
   <li><a href="#">Contact</a></li>

        </ul>

        </div><!--holder(navbar)-->
    </div><!--navbar-->
    <div id="main">main</div><!--main-->

</div><!--container-->
<body>
</html>

CSS：

body {
    background-image: url(images/colorful7.jpg);
}
#container {
    width: 960px;
    float: none;
    margin: auto;
    height: auto;
}
#header {
    height: 350px;
    width: 940px;
    padding: 10px;
    }
#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;
    float:right;
 } 

 #navbar #holder {
    height:40px;
    width:725px;/*725*/
    float: right;
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a {
    text-decoration:none;
    float:left;
    line-height:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:600;
    color:#660033;
    border-bottom:none;
    padding:10px;
    width:120px;
    text-align:center;
    display:block;
    background:#FFC;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    margin-left: 5px;
 } 

 #navbar #holder ul li a:hover {
    background:#660033;
    color:#FFC;

 } 
#holder ul li a#onlink {
    background:#660033;
    color:#FFC;
 } 

 #holder ul li a#onlink:hover {
  background:#660033;
  color:#white;
  text-shadow:1px 1px 1px #000; 
 }
 #main{
    background-color: #FFC;
    height: 400px;
    width: 960px;
    padding: 10;
}

这是一个现场jsFiddle

4

4 回答 4

1

添加

clear: both;

到#main-Rule 以清除导航栏后的浮动。小提琴：http: //jsfiddle.net/GGSk2/2/

于 2012-06-14T07:55:33.780 回答
0

如果您认为问题出在 CSS 上，请尝试停用 css 并查看会发生什么。您可以通过逐个添加 css 来跟踪错误位。

我通常使用 Firefox 和Firebug来帮助我找出这些问题。它允许您即时停用或修改 CSS 和 HTML。我认为 IE 和 safari 也允许它。

于 2012-06-14T07:54:34.123 回答
0

删除浮动：对；来自#navbar

#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;

}

http://jsfiddle.net/G26TD/10/

于 2012-06-14T07:58:52.297 回答
0

我对 CSS 及其工作进行了更改

工作小提琴：http: //jsfiddle.net/G26TD/11/

不要在 id 中使用 ID 来设置样式会减慢 CSS

这是一篇如何高效编写 css 的帖子：https ://developer.mozilla.org/en/CSS/Writing_Efficient_CSS

于 2012-06-14T08:02:12.747 回答