Self-Answer:

To do this I essentially followed the way Apple does it on their site. I set a div with a width of the sprite, and added an unordered list within this div. Each list item represents a button along the button bar. Within each list item there is a single anchor tag that href s to the page that I want to go to when the button is clicked. In the CSS, I have a class that refers to all anchor tags under a list item under the containing div, under it s div, as such:

#globalheader #globalnav li a
{
    float: left;
    height: 0;
    overflow: hidden;
    padding-top: 36px;
    width: 118px;
    background-image: url("../Images/nav/nav_bar.png");
    background-repeat: no-repeat;
}

This defines a background image for each of the anchor tags. Now I need to define the background position for each anchor tag, so it shows the right button. I have CSS for each anchor tag. Here s the CSS for one of them:

#globalheader #globalnav li#systems_nav a 
{
    background-position: -118px 0;
}

Of course I have CSS to handle the hover over the buttons (a:hover) and for the mousedown over the buttons (a:active), but my original question dealt with how to keep it on the selected look for the button when I m on a certain page. I ll start with the CSS. If I had 6 buttons, I made six more CSS classes, each one pertaining to the container div having a certain class. That class the container has will be based on the page I m currently on (I ll explain in a minute). Also within the definition of that CSS class, I specify which anchor tag to change the background position on. As an example, if I click the "Systems" button on the page, I will dynamically add (via javascript) a class to the container div of "systems", and this CSS will be applied as a result:

#globalheader.systems #globalnav li#systems_nav a
{
    background-position: -118px -108px !important;
}

The background position is the one that covers the "clicked" look for my button. Note the .systems part of the declaration that specifies that the #globalheader div must have a class of "systems". If this is the case, it changes the background position of only a single anchor tag: you guessed it, the one right under the "systems_nav" li. I wrote one of these classes for each of the buttons in the button bar. The second trick was writing the javascript to handle dynamically adding the class to the div depending on what page I was on. To do this, I put a hidden div on each page that looked something like this:

<div id="page_section" title="systems" style="display: none;"></div>

It s not displayed, has a generic id that each of these divs will have on each page on my site, and has a title specific to the page I m on. In my javascript file, I wrote this (it uses jquery):

var $globalheader = $( #globalheader ); // container div to add the class to
var $page_section = $( #page_section ); // div whose title is the current page

$globalheader.addClass($page_section.attr( title ));

Voila. "systems" gets added as the class name to the "globalheader" div, and the correct CSS class gets applied, making only the Systems button look clicked.

This took a little work by looking at Apple s website, but this is how they do it, and I trust them. It worked for me.

Hope it helps anyone else having the same problem I was.

CSS doesn t know or care what page it s on. You have to track that and output the relevant markup yourself.

Do you use a server-side programming/scripting language like PHP/ASP/JSP? If so, then you can just render a CSS class conditionally. Here s a PHP example (you can get requested page in PHP by one of the $_SERVER variables):

<a href="somepage"<?php echo ($currentpage ==  somepage  ?   class="active"  :   ); ?>>somepage</a>

If you don t use a server side language, then the only resort is JS/jQuery. Do something like following during onload (you can get requested page in JS by parsing the window.location):

$( a[href="  + currentpage +  "] ).addClass( active );

The CSS class a.active should obviously shift the background-position so that it becomes "active".