Member Avatar for smokin745

I have tried to setup a navigation bar for a website but the problem is, the navigation bar won't hover to a different colour when i take my mouse cursor on top of the links (home, about us...etc.)

I have tried making the navigation using sprites technique and the image below (nav.png) is what i used for the same:

[IMG]http://i33.tinypic.com/2jxr4j.png[/IMG]

Also, if you want to know the tutorial which i followed for this navigation bar then the link is below:

http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/

HTML:

Here's my HTML code for the navigation bar inside a div header.

<div id="header">
<ul id="nav">
        	<li id="but-1"><a href="#">home</a></li>
            <li id="but-2"><a href="#">latest news</a></li>
            <li id="but-3"><a href="#">about us</a></li>
            <li id="but-4"><a href="#">gallery</a></li>
            <li id="but-5"><a href="#">contact us</a></li>
        </ul>
</div>

CSS:

And here's the CSS code for the same:

#header ul#nav{
		background:url(images/nav.png) no-repeat; width:512px; height:18px; text-indent:-9999px;
	}
	
	#header ul#nav li, #header ul#nav a{
		display:block; height:18px;
	}
	
	#header ul#nav li{
		display:inline; float:left; list-style:none;
	}
	
	#header ul#nav li#but-1{width:64;}	
	#header ul#nav li#but-2{width:138;} 
	#header ul#nav li#but-3{width:108;}
	#header ul#nav li#but-4{width:97;}
	#header ul#nav li#but-5{width:105;}
	
	#header ul#nav li#but-1 a:hover{background:url(images/nav.png) 0px -18px no-repeat;}
	#header ul#nav li#but-2 a:hover{background:url(images/nav.png) -64px -18px no-repeat;}
	#header ul#nav li#but-3 a:hover{background:url(images/nav.png) -202px -18px no-repeat;}
	#header ul#nav li#but-4 a:hover{background:url(images/nav.png) -310px -18px no-repeat;}	
	#header ul#nav li#but-5 a:hover{background:url(images/nav.png) -407px -18px no-repeat;}

Please help me, and explain me where i am wrong and why won''t it show the hover state.

  • 3 Contributors
  • 2 Replies
  • 153 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for JRM

I think you have to define the unvisited a:link ,the visited a:visited property bfore the a:hover.
Also, some browsers don't work well (IE !!!) with negative position numbers.

Edited by JRM because: n/a
Member Avatar for almostbob

all the undimensioned width statements will cause compliant browsers to disregard the statement entirely,
current best practice for css layout suggests using ems and % dimensions, relative dimensions that adjust to window size browser resolution and user preference, if those figures given represent pixel vaules, the page will look bad in any browser/screen/window different to the one it was developed on
assuming the .png is set up as a css sprite and the movement is supposed to change the background color, that is outside of current practice as well, and the rest state image is not set
current practice is to use the background: property to change the color, and sprite the image to change the image, particularly when using png format with a transparent background:
the code appears to have a large image with 10 sprites, presumably nav buttons with and without hover backgrounds, but none of the sprites have any color
some browsers may not inherit the background properly from the parent div

#header ul#nav li#but-1{width:64dimension background:url(images/nav.png) offset no-repeat;}
#header ul#nav li#but-2{width:138dimension background:url(images/nav.png) offset no-repeat;}
#header ul#nav li#but-3{width:108dimension background:url(images/nav.png) offset no-repeat;}
#header ul#nav li#but-4{width:97dimension background:url(images/nav.png) offset no-repeat;}
#header ul#nav li#but-5{width:105dimension background:url(images/nav.png) offset no-repeat;}
#header ul#nav li#but-1 a:hover {background:url(images/nav.png) 0px -18px no-repeat;}
#header ul#nav li#but-2 a:hover{background:url(images/nav.png) -64px -18px no-repeat;}
#header ul#nav li#but-3 a:hover{background:url(images/nav.png) -202px -18px no-repeat;}
#header ul#nav li#but-4 a:hover{background:url(images/nav.png) -310px -18px no-repeat;
#header ul#nav li#but-5 a:hover{background:url(images/nav.png) -407px -18px no-repeat;}

examine the color highlighting on the button names, the css parser is severely disliking the minus signs,
the word OFFSET represents the xy px values to the relevant sprite tile,
the word DIMENSION represents the required dimension px pt em % cm in

the xshift -999 to shift the text links off the background, also shifts the mouseover hotspot for the links off the background mouseover effects wont work right
lose the imimage entirely and use the text links
consider

#header ul#nav li a {}	
#header ul#nav li a:hover {background:blue;}

smaller code, does not require any background image, for what is a text menu
the word BLUE represents any color coding
the html remains precisely as is,
you can set the dimensions of the buttons if you wish in css, please dont do it in pixels

Edited by ~s.o.s~ because: Edited post as per user request
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.