Horizontal Menu

Ok, hopefully this is going to be an easy enough question to be answered.

When creating a horizontal nav, is there a best way to do so?

The way I learned would have been to float the nav to the left and use margins/paddings to space them out until they reached a certain point (usually the width of the site).

I found out on some sites I’ve seen that some nav’s are created using relative positioning and that each word in the menu is set to a certain amount of pixels, is there much benefit in doing it this way?


Actually I think you have confused positioning the menu with getting the menu items lined up horizontally.

depending on what the situation is, you can get menu items to line up using the following ON MENU ITEMS (LIs) not necessarily on the menu container (UL) itself :

float:left; (on rare instances float:right could be what you need)
display-inline ( if you dont need the items to have specific width or height, padding, margin, etc… this is actually a good solution)

Hope that helps.

Thanks for the reply, I still have a lot to learn…

I’m not sure if I explained properly in my post above, but basically when I want to create a horizontal nav, I would have display: inline; on the ‘ul’, then float the ‘li’(s) to the left and space them out with margins & padding.

But the other way that I seen a horizontal menu (I can’t find the CSS) was that the li’s were positioned relatively and given distances from the left point of the ul (I think). So the first li (lets say ‘li-01’) had a distance of 20px then the next (‘li-02’) had a distance of 120px, I think it was done like that… I will have to go and find that CSS code.