Creating CSS-Based Tabbed Navigation
On most web sites, somewhere in the header (or shortly after), you’re likely to find some kind
of “tabbed” navigation facility. In this design, it sits directly above the breadcrumb trail.
Normally, this type of navigation can be a styled unordered list. That technique actually
warrants a chapter in its own right (and indeed it gets one—see Chapter 12), so rather than
rush through a styled list here, we’re going to show how you can style a series of divs. The list
approach is certainly preferable, but you may find that in some circumstances you are not
able to do this (perhaps your content management system, or CMS, is limited in what it can
spit out or you’re styling legacy markup that cannot easily be changed). Whatever the reason,
be aware that a styled list would be preferable.
So, we’ve handed you the loaded gun and told you that you shouldn’t really pull the trig-
ger. But here’s how we get the firing mechanism to work, folks!
Creating the Markup
Going back to our design, we can see five top-level links. In the markup, it would look like this
if you were using div elements:
<div id="tablinks">
<div><a href="/">Home</a></div>
<div><a href="/travel/">Travel</a></div>
<div><a href="/flights/">Flights</a></div>
<div><a href="/hotels/">Hotels</a></div>
<div><a href="/late-deals/">Late Deals</a></div>
</div>
Positioning the Links
By default, the divs would appear one after the other in a vertical stack, but we can transform
them in the CSS to line up side by side by using floats:
#tablinks div {
float:left;
}
■
Note
Reminder about floated elements: you need to clear the floats afterward! (See the methods for

In order to add padding to the link (an inline element) inside the floated div element (a
block-level element), we need to convert the link to a block-level element. This is easily done!
#tablinks div {
float:left;
border-right:1px solid #094747;
}
#tablinks a {
display:block;
padding:5px 10px;
}
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS 173
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 173
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
■
Note
To achieve this visual effect, you don’t actually even need to wrap each link in a
div
element—by
“promoting” the inline
a
element to a block element, you could float them, apply padding and margins and
so on to get the same effect. However, if you have total control over the HTML for these navigation blocks,
you would be wise to put them in an unordered list, as previously noted.
Setting the Link Color and Background Image for the Current Tab
We have just a couple of small tasks left to do—set the font color for the links and set a back-
ground that is going to be used for the current page:
#tablinks a:link,
#tablinks a:visited,

preferences</a> &rarr; <a href="/preferences/page-style/">page style</a> &rarr;
</div>
Showing the Hierarchy of the Breadcrumb Trail
In the previous example, the links look fine and the XHTML is all valid, so what’s the problem?
If you think about it, a breadcrumb is a reflection of a site hierarchy (imagine navigating through
folders on your own computer—it’s effectively the same as the process the server does when
trawling through the file system). What you really want is something that hints at that hierar-
chy, and nested lists can give you just that. Let’s look at the travel site example; this is how the
breadcrumb trail appears on the page:
You are in Travel > Destinations > Europe
This could be better expressed in the XHTML like this:
<div id="breadcrumb">
You are here:
<ul>
<li><a href="/travel/">Travel</a>
<ul>
<li><a href="/travel/destinations/">Destinations</a>
<ul>
<li>Europe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
■
Note
At this point, some people may claim that this is a case of semantics gone mad—that all you really
need is a straight line of text links with an appropriate separator between them. That might do the job visu-
ally, but it's good to think about the relationship that elements have with one another, and that's partly why

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.
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS176
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 176
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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

background:#fff url(stars-dim.gif) no-repeat center center;
}
.ex1:hover {
border:1px dotted red;
background:#fff url(stars.gif) no-repeat center center;
}
...
<div><a href="nowhere.html" class="ex1">Hover over me</a></div>
<div><a href="nowhere.html" class="ex1">Hover over me</a></div>
There is a selection of other styles that we’ve applied in the previous example, but the key
part is highlighted in bold. Figure 8-16 shows a screen shot of the default state and the hover state.
Figure 8-16. The background image changes on hover; we set this using CSS.
Avoiding “Divitis”
Using a div in this way does the job perfectly well, but it can be improved a little. If the previ-
ous technique were applied to a navigation area, or some other section where the technique is
used over and over again, using so many class attributes would be overkill. We can tidy this up
by wrapping all of the links in a containing div and then using a contextual selector to achieve
the same effect. Here’s an amended version:
div.ex2 a {
display:block;
width:200px;
padding:10px;
border:1px solid black;
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS178
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 178
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
margin:0 0 10px 0;
text-decoration:none;

width:17px;
}
.ex3:hover {
background:#fff url(all-stars.gif) no-repeat -17px 0;
}
...
<a href="nowhere.html" class="ex3"></a>
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS 179
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 179
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
As you can see from the CSS, in the hover state the background image is slid 17 pixels to the
left, thus revealing the different portion of the image.
Because the image has already been downloaded for the default state, there is no need to
call a new image off the server, so we have effectively preloaded all the images we need.
Remote Image Swaps
Perhaps you’re thinking. “Ah, that’s all well and good if I want the image underneath the mouse
pointer to change on hover, but my JavaScript changes an image elsewhere on the page. CSS
can’t do that, can it?”
Actually, it can . . . but not in all cases. Let’s look at an example. The following CSS works
by placing an empty span element inside the link that triggers the hover effect, and applying
a unique id to that link:
<ul>
<li><a href="nowhere.html" id="ex4">Link one<span></span></a></li>
<li><a href="nowhere.html" id="ex5">Link two<span></span></a></li>
<li><a href="nowhere.html" id="ex6">Link three<span></span></a></li>
</ul>
When the mouse hovers on that link, we can set the span element to display as a block-
level element somewhere else on the page (using absolute positioning) and with whatever

}
#ex6:hover span {
background-image: url(clock.jpg);
background-repeat: no-repeat;
display:block;
width:100px;
height:100px;
position:absolute;
top:450px;
left:500px;
}
...
You can see the effect in Figure 8-19 (the mouse cursor does not show in the screen shots,
but you can see from the link styles which one is being hovered over).
Figure 8-19. Hovering over links displays an image elsewhere on the page.
Remote Image Swapping and Sprites Combined
The previous example showed that it’s possible to make an image appear elsewhere on the
page, not just underneath your mouse pointer. The problem with this technique, once again,
is the issue of preloading. These images may be quite large in file size and you don’t want to
have a time delay. So, you can use the sprites technique (placing all the images in one image
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS 181
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 181
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
and revealing only what’s needed), but that could make matters worse as when the visitor to
your site hovers over the link, the server needs to fetch one large image only to display a portion
of it. Madness? No, because we can preload by placing an element on the page (a span) and
apply the background image to that element. However, because the span element is empty, the
preloaded background image will not show but when the visitor hovers over the link: bingo!

display:block;
width:100px;
height:100px;
position:absolute;
top:550px;
left:500px;
}
...
<span id="imagepreload"></span>
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS182
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 182
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<ul>
<li><a href="nowhere.html" id="ex7">Link one<span></span></a></li>
<li><a href="nowhere.html" id="ex8">Link two<span></span></a></li>
<li><a href="nowhere.html" id="ex9">Link three<span></span></a></li>
</ul>
These techniques show that it is possible to do dynamic image swapping using CSS.
Naturally, you can adapt these ideas to your own needs, but there is one limitation that we
haven’t mentioned that you may have wondered about. In all the examples, we attached the
hover behavior to a link (an a element). What if you don’t have a link on the web page where
you want the effect to happen? Unfortunately, it’s not possible to do this on Microsoft Internet
Explorer 6 or earlier, but for most other browsers, including IE 7, you can use the hover pseudo-
class on any element. However, Microsoft is offering IE 7 as part of its Windows Update web
site and will automatically be downloaded for people who have opted in to the Automatic
Updates service. So it's hoped (at least by web developers who love web standards!) that the
numbers of IE 6 users and earlier should go into something of a decline.
Rounded-Corner Boxes

#related h2 {
margin: 0;
padding: 10px;
font-size: large;
background: url(top.gif) no-repeat;
}
The bottom part of the image is set on the outer container—the div with an id of
related—and anchored to the bottom. The heading stays at the top while the bottom part
moves up and down, accordion-style, depending on the amount of content inside:
#related {
width: 200px;
background:#013433 url(example1/bottom.gif) no-repeat bottom;
}
One minor cosmetic touch is still required—the text color needs to be white against the
dark teal:
#related,
#related a {
color:white;
}
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS184
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 184
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
By applying the background images in this way, you can achieve a rounded-corner box, as
shown in Figure 8-21.
Figure 8-21. The related links section with rounded corners
Creating a Rounded Box That Scales
Making a box with rounded corners is pretty straightforward—you only need two pieces that
move up and down. Creating a box that can be scaled up so that its width and heights change

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Next, we apply the left image to the h2 heading, anchoring it to the top left. Because the
left image is only a few pixels wide, it does not obscure the border previously applied—the join
is essentially seamless, as shown in Figure 8-24.
#related h2 {
margin: 0;
padding: 10px;
font-size: large;
background: url(example2/left.gif) no-repeat left top;
}
Figure 8-24. Corner applied to the heading
The next element to be treated is the unordered list (ul). We’ve already taken care of the
top-left corner (applying an image to the h2) and the top and right edges (applied to the
#related div), and now we’re going to add in another piece to this jigsaw on the left side. This
image will be anchored to the bottom left of the ul element.
■
Note
It’s necessary to remove margins from the unordered list so that there is no gap between the head-
ing and the list (otherwise, the border effect would be broken).
The following CSS does the trick (Figure 8-25 is the proof):
#related ul {
margin:0;
padding-bottom:10px;
background: url(example2/left.gif) no-repeat left bottom;
}
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS 187
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 187
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

The addition of a seemingly superfluous div to finish the technique is not ideal, but with
a bit of planning you may not need to do this—in our example, it would be possible to apply
a class to the last list item and add the background image there.
Conclusion
JavaScript is a powerful tool in the right hands but is not always required for visual effects on
a web page, and HTML need not be overtly complex to achieve certain stylish touches. The
aim of this chapter was to show that most, if not all, of what you may have used in the past—
for example, JavaScript—to create common page elements can be done with CSS. Even better,
though, you can usually do it more simply, with more semantic and meaningful markup and
in ways that offer you great flexibility for change later on. And for those common features
on a page that have not been covered here, we hope the examples we provided can give you
enough hints about how to tackle the problem for yourself.
So with that out of the way, we’ll borrow some techniques from print design, and turn to
typography in our next chapter. We’ll explore how some simple typographic techniques can
really improve the look of our web page text.
CHAPTER 8
■
CREATING COMMON PAGE ELEMENTS 189
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 189
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
732Xch08FINAL.qxd 11/1/06 2:06 PM Page 190
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Typography
W
ith all the attention given to multimedia on the Web, it sometimes seems strange that text
still is the content king. Type and the written word has been with us much longer than photos,
videos, audio recordings, and the like, and quite an art has developed around it. Typography is
the art of setting type. This art exists to honor the content it sets—to enhance legibility and
embody the character of the words within. All too often, web designers think that typography
means “picking a cool font.” They believe it’s simply not possible to achieve quality typogra-