Div 在导航栏上没有背景答案

【问题标题】：Div has no background on navbarDiv 在导航栏上没有背景
【发布时间】：2013-07-28 14:42:56
【问题描述】：

我正在尝试编写一个横跨整个页面的导航栏，其中的按钮仅占导航栏的 60%。我不知道为什么我看不到背景。任何帮助将不胜感激

这是 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;
}

【问题讨论】：

你说的是哪个背景？
@AbhishekJain 导航栏背景未显示
它也适用于我的浏览器。如果问题是特定于任何浏览器的，请告诉我们。
@AbhishekJain Weird，我编辑了帖子，现在全页 HTML 在那里。

标签： html css header navbar

【解决方案1】：

您的上下文 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 中进行一些修改，因为您的页面在当前样式下看起来不会那么好

【讨论】：

完美。非常感谢，已经坚持了 10 分钟了。