You are Here | Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)

< Day Day Up >

"You are Here"

In addition to adding a class to the <body> element, interesting results can be had by adding an id as well.

For example, a crafty designer may use an id attached to the <body> element to trigger navigational elements that signify what page the user is on. Let's take a look at how this would work.

The Navigation List

For this example, we're going to borrow the "tabs with shape" that were explained way back in the "Extra credit" section of Chapter 1. The navigation uses a simple unordered list containing several links like this:

 <ul >   <li><a href="/apples/">Apples</a></li>   <li><a href="/spaghetti/">Spaghetti</a></li>   <li><a href="/greenbeans/">Green Beans</a></li>   <li><a href="/milk/">Milk</a></li> </ul>

Using CSS, you may remember we styled this list, making the items display horizontally and with a shaped tab that would appear when hovered over. Figure 15-3 shows how this would appear in a browser.

Figure 15-3: Horizontal navigation with shaped tabs

You may also remember that to achieve the "you are here" effect (with the tab sticking in the "on" position for a particular link), we added a class to the link that we'd like to stick:

 <li><a href="/spaghetti/" >spaghetti</a></li>

A CSS rule was added to apply the background-image to the link with the attached:

 #minitabs a.active {   color: #000;   background: url(tab_pyra.gif) no-repeat bottom center;   }

There is an alternate way to handle this, however, that leaves the navigation markup untouched, while still having the ability to mark which page the user is on: assigning an id to the <body> tag.

Identify the Parts

First, we'll need to add id attributes to each <li> element in our navigation. This is done once, and then the unordered list will remain unchanged on every page—even to achieve the "you are here" effect.

 <ul >   <li ><a href="/apples/">Apples</a></li>   <li ><a href="/spaghetti/">Spaghetti</a></li>   <li ><a href="/greenbeans/">Green Beans</a></li>   <li ><a href="/milk/">Milk</a></li> </ul>

In the preceding code snippet, we've added a short and sweet id to each <li>, suffixing each with a _tab so as not to repeat ourselves. This will make sense in a moment.

Now we're done with the list markup for good. We can forget about it—which can be rather convenient, depending on the templating or content management system you may be working with.

The variable in all of this is an id that will be attached to the <body> element only, signifying which page the user is on. For instance, if we wanted to tell the browser that we were on the Apples page, we may add an id to the <body> element like this:

 <body >

Alternatively, we could add an id signifying we were on the Green Beans page:

 <body >

and so on.

The Magic CSS

To "light up" the tab, depending on which id is place in the <body>, we need only write a single CSS declaration that tells it to do so for each possible combination:

 body#apples #apples_tab a, body#spag #spag_tab a, body#beans #beans_tab a, body#milk #milk_tab a {   color: #000;   background: url(tab_pyra.gif) no-repeat bottom center;   }

Essentially, we're saying, "When the <body> element has an id of apples, add the tab background and turn the link color black for the link within the #apples_tab list item." And then we're repeating that for each tab option.

All that's required now to "light up" the correct tab in the navigation is to change the id contained in the <body> tag. The CSS declaration handles the rest, and could be modified to handle more combinations as future pages are added to a site.

For example, if we wanted to light up the Green Beans tab to signify to users that this is indeed the page they are on, we'd simply add the id to the <body> element like so:

 <body >

and the appropriate tab would be selected, as shown in Figure 15-4 (where we've applied the "mini-tab" styles that were explained back in Chapter 1).

Figure 15-4: Tab selected by assigning an id to the <body> element

Alternatively, we could light up any tab we wish by choosing to add any one of the ids to the <body> that we've declared both in the list markup and the CSS.

Additionally, you could use this same concept to trigger other contextual events on the page—like subnavigation or alternating colors that rotate depending on the page's id. Because the <body> element is at the top level, the id contained within can be used to control any element below it on the page.

< Day Day Up >