Information
NO FLOATS HAVE BEEN HARMED IN THE MAKING OF THESE MENUS
Following on from the previous menu it is possible to style a horizontal unordered list (known and unknown width) without the need to use float:left; or having the inconvenience of surrounding the menu in a <del> tag.
This method will allow us to position the menu wherever we want horizontally.
The above menus are styled identically and are positioned using different values for the 'margin' of the <ul> tag.
I have left out the necessary hack for IE5.5 which does not recognise 'auto' values for margin styling but should you want to cater for IE5.5 then add the usual text-align style in a surrounding div.
29th September 2006
This will not work in IE7 RC1. This browser has not been updated to understand display:table; but has been updated to correct the float bug that IE6 uses to make the ul contain the list of links.
Oh well, it was nice while it lasted, back to the drawing board :(
xhtml
<h3>left</h3> <ul class="menu lefted"> <li><a href="#nogo">Tab One</a></li> <li><a href="#nogo">Tab Two: Longer</a></li> <li><a href="#nogo">Tab Three: Longest</a></li> <li><a href="#nogo">Tab Four</a></li> </ul> <h3>center</h3> <ul class="menu centered"> <li><a href="#nogo">Tab One</a></li> <li><a href="#nogo">Tab Two: Longer</a></li> <li><a href="#nogo">Tab Three: Longest</a></li> <li><a href="#nogo">Tab Four</a></li> </ul> <h3>right</h3> <ul class="menu righted"> <li><a href="#nogo">Tab One</a></li> <li><a href="#nogo">Tab Two: Longer</a></li> <li><a href="#nogo">Tab Three: Longest</a></li> <li><a href="#nogo">Tab Four</a></li> </ul>
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.
Recommended Sites
- UK Game Server Hosting
- Host Color
Web Hosting for 30 Websites - Web design in Dorset
Bournmouth based web design agency - pay as you go e-commerce
Build your own SEO friendly webshop - web hosting, dedicated servers
web reseller, managed servers
