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在導航欄上沒有背景

回答

相關問題