Here is the finished example: http://yallara.cs.rmit.edu.au/~s3166403/silentmountain/index.html
This example could have been done using embed fonts and mouse over colours very easily, but with this way of working you can achieve much cooler effects, such as buttons that give the look of animation without using flash.
Step 1: The CSS Code
#nav {
position: relative;
top: 490px;
width: 948px;
height: 75px;
}
#nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
margin: 0 30px 0 0;
width: auto;
}
#nav a {
display: block;
width: auto;
background-position: 0 0;
text-indent: -9999px;
height: 25px;
background: url(nav.png) no-repeat 0 0;
}
#nav a#home {
width: 120px
}
#nav a#home:hover {
background-position: 0 -25px;
}
#nav a#home.active {
background-position: 0 -50px;
}
#nav a#filminfo {
width: 95px;
background-position: -145px 0;
}
#nav a#filminfo:hover {
background-position: -145px -25px;
}
#nav a#filminfo.active {
background-position: -145px -50px;
}
#nav a#gallery {
width: 74px;
background-position: -267px 0;
}
#nav a#gallery:hover {
background-position: -267px -25px;
}
#nav a#gallery.active {
background-position: -267px -50px;
}
This code uses this image:
You can easily create your own nav.png, I like to use Adobe Fireworks as it's easy to get the pixel locations, also PNGs can be transparent unlike most other common web image formats.
Lastly you need to use this code in your HTML document:
<div id="nav"> <ul> <li><a class="active" id="home" href="/">Home</a></li> <li><a href="" id="filminfo" title="Film Info">Bookings</a></li> <li><a href="" id="gallery" title="Gallery">Rates</a></li> <li><a href="datestimes.html" id="datestimes" title="Dates and Times">Club History</a></li> <li><a href="" id="competition" title="Competition">Availability</a></li> <li><a href="" id="links" title="Links">Tour</a></li> <li><a href="" id="games" title="Games">Contact</a></li> </ul> </div><!-- Close nav -->As you can see, by replacing the HREF statement with class="active" you can tell the document that you with that part to be blue for my example.
And here is an example of it working in action: http://yallara.cs.rmit.edu.au/~s3166403/silentmountain/index.html
