Nav Bar Even Distribution

[computermax2328]

Hello All,

 

I was wondering if anyone had some fluid techniques for nav bars. I want to evenly distribute each li in the nav bar and have them be fluid. Structure like the following:

 

<nav id="nav" class="width">
   <div id="slide" class="body">
       <ul id="bar">
           <li><a href="#">NEWS</a></li>
           <li><a href="#">SPORTS</a></li>
           <li><a href="#">OPINION</a></li>
           <li><a href="#">LIFESTYLES</a></li>
           <li><a href="#">A&E</a></li>
           <li><a href="#">BLOG</a></li>
           <li><a href="#">ABOUT</a></li>
       </ul>
   </div>
</nav>

 

the width class is 100% and the body is 80% centered with the margin 0px auto. I need to know the padding for each li to make it fluid and evenly distributed through the ul bar.

 

Thanks in advance!

[Love2c0de]

Can you post your CSS?

 

Without seeing it, I'd suggest declaring a text-align: center; on your <ul> (this will make your <li>'s sit in the center of your <ul>)

 

Give your <li>'s a global padding style of whatever you want, i.e 10px. Declare a text-align: center on your <li>'s too.

 

Regards,

 

AoTB.

Edited December 23, 2012 by AoTBuNgLe

[kjetterman]

You will want to make sure that your padding is even.

[Muddy_Funster]

JQueryUI - FTW!! muhahahaha. No, but seriously, it's got a lot of nice features and you can take advantage of most of the visual stuff just by using the css it gives you, no JS required