0

I am trying to code a navbar that stretches across the whole page with buttons only filling 60% of the navbar. I am not sure why i cannot see the background. Any help will be greatly appreciated

Here is the 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>

And here is the 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;
}
4

1 回答 1

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

于 2013-07-28T15:10:58.970 回答