Web Design in a Nutshell, 3rd Edition

Floated List Items

The other method for creating horizontal lists uses the float property to cause the list items to line up next to one another. When using float, it is important to set the following element in the source to clear: both to ensure that no page content wraps around the list.

This is just one of many variations on formatting navigation with floated list items. The primary steps are turning off the bullets (list-style: none), floating each list item (float: left), and then applying styles to the links (a) as block elements.

    ul#nav {list-style: none;
        margin: 0;
        padding: 0; }
     
    ul#nav li {
        float: left;
        margin: 0 2px;
        padding: 0; }
     
    ul#nav li a {
        display: block;    /* allows width and height settings on a element  */
        float: left;       /* provided only to fix display in IE-Mac  */
        width: 100px;
        height: 28px;
        line-height: 28px;
        background: url(tab.gif) #CCC no-repeat;
        text-decoration:  none;
        text-align: center; }
     
    /* Commented backslash hack hides rule from IE5-Mac \*/
    ul#nav li a { float: none; }
    /* End IE5-Mac hack */
     
    ul#nav li a:hover {
        background: url(tab_over.gif) #333 no-repeat;
        color: #FFF; }

This time instead of a solid background color, each link is styled with a background image that changes for rollovers, as shown in Figure 24-18.

Figure 24-18. Tabbed navigation created with floated list items