I like CSS, so I decided to use it for my navbar. Looking at the various examples out there, I decided they all either use way to many classes in your style sheet, don't work in all browsers without a CSS hack, or don't do enough. So here is my own solution, it's similar to the one I use on iamtheb.org, but that is more complex because it uses a one image, with all the buttons on it, and the navbar itself.
The method I came up with works on the common browsers (so far I've tested Firefox 2, IE 7, Opera 9 and Safari 3). The code also conforms to W3C's XHTML 1.0 Strict standard.
each button is an area, or "<a>", this area calls a class; "navbutton", and states its link "href". Each area is the same height as, and half the width of its background image:
One of the classes in the style sheet is for the settings when you are hovering over the area, it is set to position the background image half its width to the left. The advantage of using one image, is that your user will never see a bug if the second, or "down" image is still loading.
For each button, you should use this string:
<a class="navbutton" href="http://www.example.com">Example</a>
You might also want to contain these in a "<div>" to keep them from moving to multiple lines on small screens (see the source of this page, it's annotated at the top).
You will need these two entries in your style sheet:
a.navbutton {
display: block;
width: 256px; /* half the width of the image */
height: 32px; /* full hight of the image */
background: url("cssrolloverdemo.gif") 0 0 no-repeat; /* url of the image */
text-decoration: none;
float: left; /* this makes them sit in a line, it's not required for vertical navbars */
font: 16px/28px Verdana, Arial, Helvetica, sans-serif; /* font size, line height to bring the text down a bit on the buttons, and font */
color: #0000FF; /* font color, cures visited links going purple */
text-align: center; /* text alignment on the buttons */
}
a:hover.navbutton {
background-position: -256px 0; /* negative half the width of the image */
}
There are two more CSS pseudo classes you can use, these are: a:active, which is for the last link on the page to be clicked. And a:visited, for links which have - surprisingly enough - been visited.
