Div在导航栏上没有背景

我正在尝试编写一个导航条，它横跨整个页面，而按钮只填充60％的导航栏。我不知道为什么我看不到背景。任何帮助将不胜感激Div在导航栏上没有背景

下面是HTML：

<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <div id="logo">site</div> 
      <div id="navbar"> 
       <div id="navbarcontainer"> 
        <ul id="navul"> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="about.html">Dogs</a></li> 
         <li><a href="contact.html">About us</a></li> 
         <li><a href="contact.html">Contact Us</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div id="content"> 
      <div id="contentp"> 
       <h2>About BTCWA</h2> 
       <table><tr><td><p></p></td><td></td></p><tr></table> 
      </div> 
     </div><!--contentp--> 
    </div><!--content--> 
    <div id="footer"></div> 
</div><!--Wrapper--> 
</body> 
</html>

这里是CSS：

@charset "utf-8"; 
*{margin:0px;} 
html{height: 100%;} 
body {height: 100%; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:14px; 
    padding:0px; 
    } 


#wrapper 
{ 
    margin:auto; 
    width: 100%; 
} 
#header 
{ 
text-align:center; 
height:100px; 
background:#bbb; 
} 
#logo 
{ 
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
font-size:50px; 
height:100%;  
margin:auto; 
} 
#content 
{ 
margin:auto; 
color:#444; 
height:100%; 
padding:50px 30px 30px 30px; 
background:#eee;  
font-size:18px; 
} 
#contentp 
{ 
    text-align:left; 
margin:auto; 
width:60%; 
height:100%; 
padding:50px 30px 30px 30px; 
background:#eee;  
font-size:18px; 
} 
#navbar 
{ 
    height:50px; 
width:100%; 
background:#707070; 
} 
#navbarcontainer 
{ 
height:50px; 
margin:auto; 
width:60%; 
overflow:hidden; 
position:relative; 
} 
#navbar ul 
{ 
margin:0px; 
padding:0px; 
list-style-type:none; 
} 



#footer 
{ 
postion:fixed; 
bottom:0px; 
left:0px; 
width:100%; 
height:100px; 
margin:auto; 
background:#707070; 
} 
#footerblock 
{ 
padding:50px 30px 30px 30px; 
width:15%; 
text-align:center; 
height:100%; 
color:#39F; 
display:inline-block; 
background:#444; 
list-style:none; 
padding:10px; 
}

来源

2013-07-28 BraedC

其背景这么好你在说什么？ –

@AbhishekJain导航栏背景不显示 – BraedC

它也可以在我的浏览器中运行..请让我们知道，如果问题是特定于任何浏览器.. –

您的上下文DIV与您的导航栏重叠。因此，尝试将导航栏的内容DIC是这样的

<!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>Bull Terrier Club Of WA</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="wrapper"> 
      <div id="header"> 
       <div id="logo">site</div> 

      </div> 
    <div id="content"> 
     <div id="navbar"> 
        <div id="navbarcontainer"> 
         <ul id="navul"> 
          <li><a href="index.html">Home</a></li> 
          <li><a href="about.html">Dogs</a></li> 
          <li><a href="contact.html">About us</a></li> 
          <li><a href="contact.html">Contact Us</a></li> 
         </ul> 
        </div> 
       </div> 
    <div id="contentp"> 
<h2>About BTCWA</h2> 
<table> 
<tr> 
<td> 
<p> 
</p> 
</td> 
<td> 

</td> 
</p> 
<tr> 
</table></div> 
        </div><!--contentp--> 
       </div><!--content--> 
    <div id="footer"></div> 
</div><!--Wrapper--> 
</body> 
</html>

您可能需要在此之后的样式和HTML做了一些修改，您的网页不会看起来与目前的风格

来源

2013-07-28 15:10:58

完美。非常感谢你，现在已经坚持了10分钟。 – BraedC

Div在导航栏上没有背景

回答

相关问题