Hello,

This is my first table-less site, so go easy on me, this may be a really easy question.

http://www.transeca.com

On the above page you see the navigation bar under the header, basically I want these links evenly spaced out across 100% of the width.

Right now they are UL items in a DIV, with the below CSS:

#menu {
background: #6699FF;
background: url(../images/header_slice.png);
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

Any guidance would be great!
Thanks!

So, divide 100 by the number of menu items you have and give each <li> a width of that percentage.

Since you have 5 items, 100/5=20% for the width of <li>

Thank you! You are a life saver!

Im struggling to center the text in each <li>

I have tried everything I could think of on the <li>:

float: center;
text-align: center;
list-style-position: center; (dont think that was a valid property)

Iv also tried wrapping the <ul> tag in <center>

hmmm, any additional help is much appreciated!

list-style-position: center; (dont think that was a valid property)

It's not, and the list-style property pertains to where the BULLET would go if you had bullets specified.

Iv also tried wrapping the <ul> tag in <center>

Don't do that, it's deprecated and that's what css is for.
The reason you can't center the text is because you have float:left on #menu a. Remove the float and use text-align: center on the <ul> and you'll have centered text on your nav.

thank you hopefully by the end of this little project i will have gained a better understanding of how css is used for layout

thanks for this post.
by just reading and following this kind of thread helps me solve similar problem.

I also suggest googling for any css specific issues, I'm sure there will be a good guide for you.

Good luck