skip to content
Website Builder

Centering a horizontal single level menu

31st July 2009




CSS play Support


CSS play Recommend

uk white label shopping carts for resellersSitegrinderPSD to HTMLFree, practical CSS menus, layouts, and examples



Information

As this seems to be a major requirement for horizontal menus and there have been many methods published to do this in the past few years, from using positive and negative 50% margins to using the CSS style display:table, I thought that I would publish a method that works in all the latest browsers including IE6, IE7, IE8 and Mac browsers.

This method uses just a combination of display:inline-block; and display:inline; and has a separate one line styleaheet for IE7, IE6 and IE5.x.

This has been tested in IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chrome. I am also assured that it works in Mac browsers.

This particular menu uses one background graphic for the unhovered state and border / background colors for the hovered stated. So it is very simple to set up.




Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




CSS play Recommend

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth