| home / programming / css_lists / 1 |   [previous] |
|
|
|
.menu a {
display:block;
padding:0.2em 1em;
background:#fc6;
color:#000;
text-decoration:none;
border:1px solid #000;
}
The <a> tag is almost identical to the 'normal' method. The only difference is that the float:left; of the 'normal' method had been replaced with display:block;.
All browsers except Internet Explorer have the links horizontal with the red border a snug fit to the outside of the list. Internet Explorer has the list vertically aligned instead of horizontal.
Again, we need to feed an alternative style to Internet Explorer.
* html .menu a {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE bug that doubles the border width */
}
Internet Explorer is now back in line with the rest of the browsers.
.menu a:hover {
color:#fff;
background:#08c;
}
This is identical to the 'normal' styling and is suitable for all browsers.
To show that this styling can now be used to position the menu as desired (without the need for extra surrounding divs or any other hack), I'll alter the <ul> styling to position the menu centrally using margin:0 auto; (which would not work with the 'normal' styling method). I'll also remove the red outer border as it is not necessary.
.menu {
display:table;
padding:0;
margin:0 auto;
font-family: arial, helvetica, sans-serif;
white-space:nowrap;
list-style-type:none;
}
This will work in all browsers except Internet Explorer pre IE6 which will require the usual centering hack using text-align:center;
I would recommend that the 'normal' method of styling horizontal unordered lists to be used, but if you're having problems with positioning your lists, this alternative method might be the answer. It does require hacks for Internet Explorer, but the final styling is not too complicated (although it does use 'non-standard' css).
To put the finishing touches to the styling of this menu, I'll demonstrate the 'easy way' to add a 'current' selected menu item to the styling.
If you need to show your visitors which menu item has been selected (current) then add the extra style requirements as follows:
.current {
color:#fff;
background:#08c;
cursor:default;
}
The (X)HTML can then be modified to add this class to the current list item as shown below...
<ul id="menu"> <li><a class="current" href="#nogo">Item one</a></li> <li><a href="#nogo">Item two</a></li> <li><a href="#nogo">Item three</a></li> <li><a href="#nogo">Item four</a></li> <li><a href="#nogo">Item five</a></li> </ul>
...and the navigation list will look like this:
Using the same colors as the :hover state will make it appear that :hover is not having any effect on the menu item and using cursor:default; will change the normal link indicator (hand) into the default arrow, giving the impression that this is not a link.
This is an easy solution. A better solution would be to remove the link tags and replace them with a span or em tag and style this as necessary.
Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/
| home / programming / css_lists / 1 | [previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: August 26, 2005
URL: http://webreference.com/programming/css_lists/1
