...

View Full Version : Basic CSS Horizontal Nav Problem: Trying to center the Nav Bar



greenhive
07-20-2005, 05:21 PM
HELLO:
I am having a problem centering a CSS horizontal nav bar. It seems like a basic problem that must have been worked out before, but I can't find a solution anywhere (so please help if you can !)

You can see the menu here (http://blake.prohosting.com/wolfflow/css_menu.html)

As you can see the menu is shifted over towards the left hand side, and in addition, in Firefox the green background of the menu does not extend out to the black border on the right hand side.

Here is the code I have used:

For the HTML:

<div id="navbar" class="nav">
<ul>
<li class="first"><a href="/admin/events/">SUBSCRIBE</a></li>
<li><a href="/admin/photos/">ISSUES</a></li>
<li><a href="/admin/content/">PURCHASE CATALOG</a></li>
<li><a href="/admin/press/">SELLERS GUIDE</a></li>
<li><a href="/admin/resources/">PRODUCTS</a></li>
<li><a href="/admin/resources/">NEWSLETTERS</a></li>
<li><a href="/admin/resources/">EVENTS</a></li>
<li><a href="/admin/resources/">BLOGS</a></li>
<li><a href="/admin/resources/">ABOUT US</a></li>
</ul>

</div>

And the CSS:

#navbar {
width: 768px;
text-align: center;
background-color: #098E00;
margin-top: 35px;
}

.nav ul {
width: 768px;
/*margin: 0 0 0 15px;*/
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 11px;
line-height: 1.4;
}



/* any li element within .nav container */
.nav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid #fff;
}

/* any anchor in a .nav list item element */
.nav li a {
display: block; /* expand to fill parent li */
margin: 0; /* no space between anchors */
padding: 3px 6px 3px 6px;
text-decoration: none; /* no underline */
color: #fff; /* override default link color */
background-color: #098E00;
}

/* 1st list item has no left border */
.nav li.first {
border-left: 0 none;
}

/* rollover effect */
.nav li a:hover {
background-color: #7EC214;
}

What do I have to do to make the menu centered (in relation to the black-lined containing div), and how do I make the green background extend out to the right in Firefox.

Any help you can give is greatly appreciated.
Thanks.

gsnedders
07-20-2005, 05:41 PM
#navbar {
margin: 35px auto 0;
}

channy
07-20-2005, 05:51 PM
change the navbar code:



#navbar {
width: 740px;
text-align: center;
background-color: #098E00;
margin-top: 35px;
}

you had it set to 768px wide when the bar is actually only 740px



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum