I am having problems with my horizontal navigation bar

I have a header, and the body of my page. The body is 1200px width, with 3 columns. the left column is 20%, middle column is 55% and the right column is 25%. The header of the page is 100% of the page width with position:absolute and top:0px; and left 0px;

I want the navigation bar to line up with the middle column of the body, but I am having problems with it. The left edge of the navigation bar should be directly above the left edge of the middle body column, and the same for the right edges. Either I am having problems with the math of it, or my setup is wrong.

I hope it is clear what I want. Here is my website as it is: http://darkonyx.webatu.com/

Here is my html code:

<div id="headerwrapper">
<div id="navbar">
    <ul id="nav">
        <li><a href="">Home</a></li>
        <li><a href="/roster/roster.html">Roster</a></li>
        <li><a href="/about/about.html">About</a></li>
        <li><a href="/faq/faq.html">FAQs</a></li>
        <li><a href="/contact/contact.html">Contact</a></li>
    </ul>
</div>

with the relevant css styling:

#headerwrapper {
position:absolute;
top:0px;
left:0px;
z-index:999;
width:100%;
overflow:hidden;
height:120px;
background:url(img/headerBG.jpg);
-moz-box-shadow: 0px 6px 20px #000;
-webkit-box-shadow: 0px 6px 20px #000;
box-shadow: 0px 6px 20px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
#navbar{
position:absolute;
top:85px;
left:50%;
width:1200;
margin-left:-600;}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #222;}
#nav li {
width:20%;
float: left;}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #666;
border-right: 1px solid #777;
border-top: 1px solid #777;
border-left: 1px solid #777; }
#nav li a:hover {
color: #000;
background-color: #555;}

---

You need to add the following options to the headerwrapper:

left:50%;
margin-left:-600px;

and change the width to 1200px

https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar.png

and if you change the width of the inner div to 100% it will look like that:

https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar2.png

---

If you have a position: absolute within a class, it's parent should have a position: relative in order for that child div to work well when it comes to positioning.

So

1. Give your #headerwrapper** a position:relative
2. Remove top: 100px from #bodycontainer
3. Put #navbar into another div, giving this div a margin:0 auto (to be centered) and the same width as the middle body column
4. Remove left % from #navbar and remove any position absolutes within it

Follow that and you'll be good to go!!

Edit: Heres the code

<div style="
width: 950px;
margin: 0 auto;
height: 115px;
overflow: hidden;">

<div id="navbar">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/roster/roster.html">Roster</a></li>
<li><a href="/about/about.html">About</a></li>
<li><a href="/faq/faq.html">FAQs</a></li>
<li><a href="/contact/contact.html">Contact</a></li>
</ul>
</div>
</div>

Here's the whole stylesheet CSS for a quick copy-paste (take a backup of yours first!!): http://pastebin.com/w5UC8ELF

链接地址: http://www.djcxy.com/p/39086.html

上一篇: 简单的面包屑与正则表达式

下一篇: 我的水平导航栏出现问题