Ever been to the navbar?

I was having a little problem. I wanted the text in my navigation bar to be a little bit fancy - but I knew that on other people’s computers it would just look like arial.

The solution was to turn my navigation text-bar into an image!

This ended up being a lot more complicated than I thought it would be.

Basically I needed each link on the bar to have its own id in the CSS, and separate images for the normal state and the hover.

What I didn’t realise - and what was really cool - was that I could use the same image for the entire nav bar! Using a technique called “sprite image” I setup one big image with this different rows:

then I all I had to do was use this image as the background for the entire <ul> and then for each list item, identify what the x and y coordinates were - e.g. for home the x coordinates were 0 0 with a width of about 120px and a height of 40px - which would just take a snapshot of the top corner of big image (with the yellow underline).

For the hover state of “home” I just needed to change the “y” coordinates to -80px (i.e. the blue row at the bottom) and then when the mouse hovered over home it would pick up the blue home.

So thanks to Matt I now have a navigation bar with the font that I want!

http://www.mattvarone.com/web-design/css-text-based-navigation-bar-with-images/

for a look at the bare bones of my new nav bar see:

http://www-student.it.uts.edu.au/~awall/navbar.html