View Full Version : .gif image as nav bar

08-24-2010, 04:04 PM
Hello all, I am currently going thro the process of making my own website but im having trouble with my nav bar. I want my nav bar to look like this,

This is the .gif image which when MouseOff will look like top half but when MouseOn will light up like the bottom half, However they should light up in segments not the whole image.

As my nav bar same as B.nets older one yet i cant seem to code it properly, So was wondering if someone is willing to help me.

Hope its understandable.

08-24-2010, 05:21 PM
look into CSS sprites:

08-24-2010, 06:03 PM
Thanks for quick response, ill look into it now :D

08-26-2010, 04:08 PM
Had a go but when i hover over my images nothing happens and i cant click them to go to another page its like there just an image.

This is my code.


08-27-2010, 07:57 AM
Okay, hold on a bit. I will look into it and to be honest it was also not the best example link I gave you.

08-27-2010, 09:53 AM
I made a better example (with the image in this thread) of using the CSS sprites technique for navigation than the link I gave you. I've added also a text-indent property for accessibility reasons (screen readers and such).

The biggest benefit of CSS sprites is that you only have to call one time your image (in ul#navlist li a). Than you'll only have to position the normal and hover states with the background-position property.

See code below and here the navigation on-line:

<style type="text/css">

ul#navlist {width: 762px; height: 83px; margin: 0; padding: 0}
ul#navlist li {float: left; list-style: none}
ul#navlist li a {height: 83px; display: block; text-indent: -9999px; background:url(images/navlist.gif) no-repeat}

ul#navlist li#home a {width: 186px; background-position: 0 0}
ul#navlist li#register a {width: 161px; background-position: -186px 0}
ul#navlist li#forum a {width: 148px; background-position: -347px 0}
ul#navlist li#media a {width: 138px; background-position: -495px 0}
ul#navlist li#staff a {width: 129px; background-position: -633px 0}

ul#navlist li#home a:hover {background-position: 0 -83px}
ul#navlist li#register a:hover {background-position: -186px -83px}
ul#navlist li#forum a:hover {background-position: -347px -83px}
ul#navlist li#media a:hover {background-position: -495px -83px}
ul#navlist li#staff a:hover {background-position: -633px -83px}



<ul id="navlist">
<li id="home"><a href="#">home</a></li>
<li id="register"><a href="#">register</a></li>
<li id="forum"><a href="#">forum</a></li>
<li id="media"><a href="#">media</a></li>
<li id="staff"><a href="#">the staff</a></li>


08-27-2010, 09:54 PM
Ha excellent thank you so much :D