This article originally appeared in the Design & Usability Tactics newsletter. Click here to subscribe automatically.

Last week’s column addressed the importance of helping your
Web site visitors stay oriented to where they are in your site. By providing
visual feedback, you can indicate the current page’s position in the site
navigation scheme. The column also showed one common technique for providing
this feedback: by highlighting the button for the current page in a navigation
bar composed of pure CSS buttons. I call the highlighted button a You Are Here
button because it serves the same purpose as the You Are Here pointer on the
store directory/map at the mall.

This column demonstrates a different technique for applying
CSS styling to a You Are Here button and compares the advantages of the two
techniques. To give credit where it is due, I first encountered this particular
technique in Jeffrey Zeldman’s Designing
with Web Standards
.

Different techniques produce the same result

Perhaps the most common approach to styling a You Are Here
button with CSS is to create a separate class rule for that button and apply it
to the link for the current page’s button in your navigation bar. That’s the
technique used in Figure A
and described in last week’s column.

The alternate technique takes a different approach to the
problem, but it still produces essentially the same results, as shown in Figure B.
In this case, instead of using a class selector to define the styling for the
You Are Here button, each button element gets a different ID attribute. In
addition, the styling for the You Are Here button goes in a style that is
associated with the ID for the button that corresponds to the current page.
This requires editing the style on each page so that it references the button
ID for the current page, but that’s easy to do if the style is located in the
document head rather than in an external style sheet file.

Note: For the sake of simplicity, the link to the current
page was removed from the corresponding button in Figure A but was retained in
Figure B. The two techniques could produce identical results if you’re willing
to add the link and corresponding styles to the first example, or add styles to
the alternate example that hide the link in the You Are Here button.

Styling a You Are Here button with CSS

I’ve covered how to create a
CSS navigation bar
in a previous column, and last week’s column
demonstrated adding You Are Here highlighting to the button for the current
page. The following code example shows how you might adapt that same basic
technique to select the highlighted button with an ID selector instead of a
class.

Let’s start with the CSS styles that will remain the same
for all site pages (or at least all of the pages that include the navigation
bar). The following CSS code would probably be stored in an external style sheet
file such as youarehere.css.

div#menu {
    height: auto;
    width: 150px;
    color: #FFFFFF;
}
div#menu li {
    height: 40px;
    width: 125px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 250%;
    list-style-type: none;
    background-color: #003399;
    border: 1px solid #000000;
}
div#menu li a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
div#menu li a:link, div#menu li a:visited {
    font-weight: normal;
    color: #FFFFFF;
}
div#menu li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: underline;
}

Next, we link that external style sheet file (youarehere.css)
to the document and add a separate style for the You Are Here button. This is
the code that would go in the header area of the Page 2 document:

<link href=”youarehere.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
<!–
div#menu li#page2 a {
    color: #000099;
    background-color: #66CCFF;
}
–>
</style>}

Finally, here’s the markup for three stacked buttons. With
this technique, you use the same markup for the navigation bar on all of your
pages. There’s no need to edit the markup to highlight a different button on
each page because that’s taken care of in the style above.

<div id=”menu”>
<ul>
<li id=”page1″><a href=”page1.html”>Page 1</a></li>
<li id=”page2″><a href=”page2.html”>Page 2</a></li>
<li id=”page3″><a href=”page3.html”>Page 3</a></li>
</ul>
</div>

Note that each <li> tag has an ID attribute enabling
you to create style selectors that apply to each of those elements separately.

The code in the youarehere.css style sheet defines the
formatting for the navigation buttons. That includes text and background
colors, and rollover effects. This example uses solid color backgrounds and
relatively simple rollover effects in a series of stacked buttons, but you
could easily adapt it to incorporate more sophisticated effects such as
graphical background images or a horizontal button arrangement.

The div#menu li#page2 a style is where you define
the unique formatting for the You Are Here button on the current page. The #page2 portion of the div#menu li#page2 a selector specifies
that the style applies only to the button corresponding to the current page.
You’ll need to edit this part of the selector in the code for each page so that
it selects the appropriate button for styling with the You Are Here
highlighting. For example, the selector for the You Are Here button style in
page1.html would read div#menu li#page1
a.

In this example, the style just changes the text and
background color to highlight the “page2” button. However, you can add
more elaborate formatting if you want. If your desired formatting for the You
Are Here button includes separate colors for rollover effects, then you’ll need
to add styles for each of the pseudoclass states of the <a> tag. For
example, you’d need to define local styles for div#menu li#page2 a:linked and div#menu li#page2 a:hover.

Because the local You Are Here button style is in the header
of the current page instead of in the external style sheet, it applies only to
the current page instead of to all the pages that reference the style sheet
file. Remember to position the <style> tag containing the You Are Here
button style so that it follows the link to the external style sheet. This
places the style later in the cascade so that it can reliably override the
navigation button styling established by the styles in the linked style sheet.
(The greater specificity of the selector should be enough to allow this simple
example to work properly regardless of order, but the sequential order of the
styles becomes an issue if you add styles with pseudoclass selectors to create
rollover effects on your You Are Here button.)

Comparing the techniques

The technique for applying You Are Here button styling with
CSS that I described in last week’s column and the alternate technique
described above both achieve the same effect. However, there are important
differences between the two techniques that go beyond personal coding
preferences.

The class-based technique in last week’s column is the more
straightforward of the two approaches. All the CSS code is in the same place,
and there’s no need to edit the CSS for each page. You apply the You Are Here
button styling by applying a class attribute to the appropriate <li> tag
in the page markup. That’s a logical approach, but it can create problems if
you want to automate the process of adding a navigation bar to your pages by
using server-side includes or Dreamweaver Library items, because you can’t
alter the markup you add to your page with those techniques.

The alternate technique described above addresses the issue
of needing to keep the markup for the navigation bar consistent on all pages so
that it can be incorporated into the page with server-side includes or as a
Dreamweaver Library item. All the formatting changes for the You Are Here
button are handled by the CSS code without requiring any edits to the markup.
Arguably, this approach is a purer example of the separation of structural
markup and CSS styling. You still have to change some code to designate which
button gets the You Are Here treatment, but the changes are to the ID portion
of the selector of an internal style located in the header area of the current
page.