HTML and CSS Reference
In-Depth Information
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 div s. 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>
Positioning the Links
By default, the div s 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 {
Note Reminder about floated elements: you need to clear the floats afterward! (See the methods for
managing floats in the previous chapter.) In this example we'll use the “easy clearing” method.
This code gets them in the right position, but there's plenty of work left to do, as Figure 8-11
Search WWH ::

Custom Search