HTML and CSS Reference
In-Depth Information
Just one last thing to clean up: we don't want the first list item to be preceded by an arrow
but just the subsequent ones. You can use specificity (which you learned about in Chapter 3)
to control this:
#breadcrumb ul li {
padding-left:0;
}
#breadcrumb ul li ul li {
padding-left:14px;
background: url(arrow.gif) no-repeat left center;
}
Essentially, the rule only applies to
li
items after one level of nesting; the first level gets
no special treatment, as Figure 8-15 shows.
Figure 8-15.
The final styled breadcrumb navigation
■
Note
Secondary navigation (aka left nav and right nav) is perhaps the most common feature of any web
page, but we're going to skip over it in this chapter. The method we suggest for navigation of this type is to
use unordered lists styled in CSS, and this is covered in full in Chapter 12. In addition, page headings and body
copy are common features on web pages, but we're going to skip them here and simply refer you to another
chapter that deals with them in greater detail—the next chapter, in fact, which is all about typography.
Images and Hover Effects
In the bad old days of early web development, fancy image effects (such as hovering over an
item and the image changing) were the realm of JavaScript, and some of these scripts were far
more complicated than they needed to be. Although JavaScript has its place—and indeed some
argue that a visual effect such as a change on hover is a “behavioral” feature and
should
be
controlled with JavaScript—CSS lets you create a number of image effects quite simply. So
throw out your old JavaScript functions, get rid of your
onclick
and
onmouseover
inline event
handlers, and use some CSS instead.
The Simple Image Swap
Let's start at the beginning. You may have used this kind of thing in the past:
onmouseover="this.src='house-renovated.gif';"
onmouseout="this.src='house.gif';" />