I'm trying to create a template for Joomla and it's going well so far.

One thing I have noticed is that there are NO tables being used!

I've been trying to create a menu bar that goes across the top of the site.

I would ideally like this to spread the menu items out evenly but I can't seem to get this to work.

The only way I've been able to do it so far is set the padding on the list items but then if the text size is changed it breaks the line and continues the menu on the next line.

Is there any othwer way of doing this? What if I wanted tab images behind the menu items there must be a way of setting the width?

I think I've found a couple of ways around it.

I'll post tonight when I get home.

I usually make horizontal menus by putting the contents in an unordered list and displaying the list items as inline (i.e. CSS is "display: inline;" for <li> tags).

As for tables, I've been told not to use them for content layout for the last seven years...XHTML 1.1 and CSS all the way for me!

That's what I'm doing.

Only if I have 5 menu items and I get the layout to spread them across the page...



Then when I add a new menu item I get this...


But what I actually Want is this...


If I use padding to spread them out then I will have to change the css everytime I want to add a new menu item (or take one away).

Use relative padding in the CSS

An unordered list is what you want to be using

Well, I've given up for now.

I've got it looking right but if I add another menu item it wraps to the next line.

If I try any relative sizing it just doesn't spread them out at all...

Like this...