CSS Menus

[tyros8000]

Hey

I got a css menu:


#menu {
width:100%;
background-color:#C80000;
margin-bottom:3px;
}
ul#nav {
margin-left:0px;
padding-left:0px;
padding-top:0px;
margin-top:0px;
list-style-type:none;
background-color:#C80000;
float:left;
width:100%;
}
ul#nav li {
display:inline;
}
ul#nav a {
display:block;
float:left;
padding:6px 21px;
text-decoration:none;
color:#ffffff;
background-color:#C80000;
}
ul#nav a:hover {
color:#ffffff;
background-color:#960000;
}

At the moment there is a gap at the end where there are not buttons. is there any way to equally spread the buttons over the alocated width so it fills all the menu bar up?

thx
Dave.

[Wickham]

Change ul#nav a to
{ width:15%; display:block; float:left; padding:6px 21px; text-decoration:none; color:#ffffff; background-color:#C80000; text-align: center;}

I tried it with five links in the menu expecting 100%/5 to be 20% each but it didn't work. I had to reduce % to 15% and I'm not sure why; probably the padding of 21px in each. Temporarily add border: 1px solid to see the spacing. The end one may appear to be not reaching the end, but that may be a combination of the padding and that text is aligned left so a larger space appears to the right. I added text-align: center to spread them out within each space.

The principle is OK though, it spreads out the links over the menu whatever the screen resolution, except if the screen gets too small for them when the end one will flip down.
---------
Changing to width:19.7% and padding:6px 0px also works for five links. 20% probably not possible because of body margins. (Decimal points can be used for percentages).