Creating Common Page Elements - Pro CSS Techniques - page 176

Styling the Hierarchical Order
Now the aim is to flatten that list so that it renders in one line but retains the semantic mean-
ing that it has in a nested list. You can use display:inline to make each of the list items appear
one after the other. Here's a first stab at it:

#breadcrumb ul,
#breadcrumb li {
display:inline;
padding:0;
margin:0;

}

The effect is almost what we want, as Figure 8-13 shows.

Figure 8-13. The breadcrumb list, flattened with CSS

What we really want, though, is some kind of separator between the links, as we had in
the non-CSS version. You can use one of two techniques to achieve this:

Generated content (using the :after pseudo-class) •

• An image placed in the background of the list items

The second option is the better supported of the two, so this is what we'll use. Because
we've set the li elements in the header to display:inline , we can no longer do things that we
could if they were block-level elements, such as apply height or padding at the top and bottom
(not that we want to, for that matter), but we can specify padding on the left and right on inline
elements. This is key, because we need to nudge the content of those li elements across so
that the background image is clearly visible:

#breadcrumb li {
padding-left:14px;
background: url(arrow.gif) no-repeat left center;

}

You can see the effect in Figure 8-14.

Figure 8-14. An arrow character separates the breadcrumb trail items.