Developer

An alternate technique for You Are Here button styling

There is more than one way to apply CSS styling to a You Are Here button. We'll show you one technique and compare it against a previous method.

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.

Editor's Picks

Free Newsletters, In your Inbox