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
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.