I once ran across an article that prompted me to reconsider the approach I had been using to styling a “You Are Here” button. The result is that I now have two viable techniques to choose from, and I can use whichever one is easier to implement in a given situation. Let’s look at how these two techniques compare and when you might want to use each one.

Background: What we’re trying to accomplish

A You Are Here button is the term I use for a button or link that points to the current page and gets distinctive styling to help orient the visitor to their current location in a Web site. It’s usually a button in a navigation bar, but it might also be a link in a breadcrumb trail, or any other link to the current page.

A You Are Here button typically gets distinctive visual styling that makes it stand apart from other buttons in a navigation bar. For example, on the You Are Here button, you might reverse the text and background colors used on the other buttons in the navigation bar or use subdued shades of the other button colors.

To avoid confusing your site visitors, the You Are Here button should not appear to be a clickable link since it’s not going to take the visitor to another page. In other words, there should be no rollover effect on the You Are Here button, and the cursor should not change to a pointing hand when it’s over the You Are Here button.

Technique #1: Omitting the link

Perhaps the simplest way to achieve the desired effect on a You Are Here button is to assign a class or ID to the <div> or <li> tag containing the You Are Here button text, and then create a style to apply the appropriate formatting to that class or ID. That takes care of the appearance of the You Are Here button. To make sure the You Are Here button isn’t a clickable link, you can remove the <a> tag that defines the link for that button.

For example, here’s the markup for a You Are Here illustration that I wrote a few months ago. Figure A shows this code in action.

<div id=”menu”>
<ul>
<li><a href=”Link1-T1.html”>Button 1</a></li>
<li class=”youarehere”>Button 2</li>
<li><a href=”Link3-T1.html”>Button 3</a></li>
</ul>
</div>

And here’s the CSS code that makes it work.

div#menu {
height: auto;
width: 150px;
color: #FFFFFF;
}
#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;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
font-weight: normal;
color: #FFFFFF;
}
#menu li a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
#menu li.youarehere {
color: #000099;
background-color: #66CCFF;
}

Note that the .youarehere class is applied to the <li> tag in the markup and that the You Are Here button (button 2) does not include an <a> tag defining a hyperlink for that button. As a result, although it has the shape of a button, it isn’t really a clickable link. Instead, it’s just a placeholder for the current page in the series of navigation buttons.

The #menu li.youarehere style in the CSS code defines the text and background colors for the You Are Here button. The button size, borders, and other formatting comes from the #menu li style.

This technique works well for navigation bars based on unordered lists and for other similar circumstances where there is a tag, other than the <a> tag, that defines the button.

Technique #2: Styling the link (and the cursor)

Sometimes it’s not convenient to change the markup to remove the <a> tag from the You Are Here button. For example, the markup for the navigation buttons might be dynamically generated or contained in a server-side include file that is incorporated into your page as it is served to the browser. In such cases, removing the <a> tag from a button and styling the underlying <li> tag isn’t practical. Instead, you need to create the You Are Here effect by styling the <a> tag for the selected button.

Normally, that’s accomplished by giving each button a unique ID and then using an ID-based selector to style the You Are Here button for the current page. The style that defines the You Are Here button is either embedded in the document head or stored in a page-specific style sheet file so that it affects only one page.

If the markup for the You Are Here button includes a hyperlink and the other buttons in the navigation bar include rollover effects, then you’ll need to define corresponding styles for each of the link states for the You Are Here button. Otherwise, the rollover effects will appear on the You Are Here button. The simplest way to do that is to create a style with selectors for all the link states and a single set of rule declarations.

Even after you create a set of styles that control the appearance of the You Are Here button, there’s one major tip-off indicating that it’s still a live hyperlink—that’s the cursor changing to the pointing hand shape when the visitor points to the button. An article by Mike Rundle, “Hoverless Current Links,” reminded me of an often-overlooked CSS attribute that gives you some control over the cursor shape, and thus allows you to override the normal behavior of the cursor changing from an arrow to a pointing hand when it passes over a hyperlink.

By adding a cursor:default rule to the style for the You Are Here button, you can counteract the cursor change and effectively hide the fact that the You Are Here button contains a hyperlink. It doesn’t actually remove the hyperlink, but it removes the visual clue of the changing cursor shape that indicates to the visitor that the button is clickable.

Here’s the XHTML markup for a You Are Here button example using the styled link technique, as shown in Figure B. Note the IDs for each button. Also note that the markup doesn’t change—it remains the same on each page.

<div id=”menu”>
<ul>
<li><a id=”btn1″ href=”Link1-T2.html”>Button 1</a></li>
<li><a id=”btn2″ href=”YouAreHere-T2.html”>Button 2</a></li>
<li><a id=”btn3″ href=”Link3-T2.html”>Button 3</a></li>
</ul>
</div>

And here’s the CSS for the page on which Button 2 is styled as the You Are Here button:

div#menu {
height: auto;
width: 150px;
color: #FFFFFF;
}
#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;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
font-weight: normal;
color: #FFFFFF;
}
#menu li a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a#btn2:link, a#btn2:visited, a#btn2:hover {
color: #000099;
background-color: #66CCFF;
font-weight:normal;
text-decoration:none;
cursor:default;
}

Note the styles for the buttons (div#menu through #menu li a:hover) are the same as before. The difference is that the #menu li.youarehere style has been replaced by the #menua#btn2:link, #menu a#btn2:visited, #menu a#btn2:hover style. The multiple selector causes the same style to apply to all the rollover states. In addition to defining the color and background color, the style includes rules for each of the other properties that change in the rollover effects for the other buttons. The cursor:default rule stops the cursor from changing shape as it passes over the button.

In this particular case, there’s no advantage to using this technique. On the contrary, the CSS code required to style the rollover states and cursor for the You Are Here button is noticeably bulkier than the first technique. However, this technique comes in handy when the You Are Here button text isn’t contained in a conveniently addressable tag other than the <a> tag that defines the link. In that case, styling the You Are Here button’s <a> tag is simpler and easier than replacing it with another tag (such as a <div> or <li> tag) and styling that tag from scratch. Using the same tag for the You Are Here button as the rest of the surrounding buttons often means that you can leverage more of common style rules (height, width, borders) for the other buttons and not have to include them in your You Are Here style.