Putting it All Together - HTML5 with CSS3 - page 356

browsers that don't display images but still render CSS the button will simply appear blank, with neither
text nor image. Some other approaches to image replacement work around this pesky “images off, CSS
on” scenario, but for this particular button we've decided we can live with it. Know your users and test your
sites thoroughly. You might choose a different approach for your particular situation.
Figure 10-7. The finished search form. We've floated the shopping cart link to the right and styled it with a border,
padding, and background.
Styling the Navigation
A navigation bar separates the masthead from the main content, forming the primary navigation for the
entire site. It's a nav element that in turn contains an unordered list of links, each leading to a different
category in our made-up product catalog. A list is an appropriate element here because that's what a
menu is: a list of options from which to choose. But list items are usually displayed stacked one on top of
the other, not lined up side by side. We can solve that easily by floating each list item to the left, and we'll
also remove the default bullets from the list and zero out its margins:
#nav-main ul {
list-style: none;
margin: 0;
}
#nav-main li {
float: left;
}
Because the list items are all floating, their containing elements will collapse, as you saw in Chapter 9.
We'll prevent that by clearing those floating list items with generated content. That also means we can add
a background and border to the nav element to form a bar that will stand out in our masthead. Without
clearing the floated list elements, the bar would collapse to nothing and the list items would overflow their
container. Also remember that the entire nav element itself is clearing the floating elements above it in the
masthead. You can see the progress so far in Listing 10-15.
Listing 10-15. Floating the list items turns a vertical list into a horizontal row
#nav-main {
clear: both;
text-transform: uppercase;