PDA

View Full Version : .gif image as nav bar


.:C.S:.
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,
http://img576.imageshack.us/img576/2190/navrequest.jpg


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.
http://img822.imageshack.us/img822/522/navbar.gif


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.
Thanks
.:C.S:.

gentleone
08-24-2010, 05:21 PM
look into CSS sprites:
http://www.webdesignerwall.com/tutorials/advanced-css-menu/

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

.:C.S:.
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.

http://pastebin.com/PAxg7YNQ

gentleone
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.

gentleone
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:
http://www.gentlemedia.nl/navlist.htm


<head>
<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}

</style>
</head>

<body>

<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>
</ul>

</body>

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