CSS Nav Bar Help Please [Archive]

mikegreenia.com

01-23-2010, 05:23 PM

If it's possible, how can I make my nav bar stretch across the entire content area and be centered? If I had more links I could get it to touch the right side but only 4 are needed.

Code and link are below. Thanks for your help.

HTML:

<body>
<div class="wrapper">
<center><div class="box">
<div class="top"></div>
<img class="banner" src="home-logo.jpg" alt="McCoy Assisted Living" />

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Welcome</a></li>
<li><a href="#">The McCoy History</a></li>
<li><a href="#">What We Offer</a></li>
<li><a href="#">Contact Information</a></li>
</ul>
</div>

<div class="bottom"></div>
</div></center>
</div>

</body>

CSS:

#navcontainer ul {
padding-left: 0;
margin-left: 0;
width:792px;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
padding: 0.2em 1em;
background-color: #003366;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #FFFFFF;
}

#navcontainer ul li a:hover {
background-color: #003366;
color: #6cb3a8;
}

http://mikegreenia.com/mccoy/

I also kind of photoshoped what I'm trying to say if you don't understand

http://mikegreenia.com/mccoy/screen.jpg

skywalker2208

01-23-2010, 06:43 PM

Below are the changes you should make.

Changed to margin: 0 auto;

#navcontainer ul {
font-family:arial,helvetica,sans-serif;
margin:0 auto;
padding-left:0;
width:792px;
}

Removed float: left

#navcontainer ul li a {
background-color:#003366;
border-right:1px solid #FFFFFF;
color:#FFFFFF;
padding:0.2em 1em;
text-decoration:none;
}