Navigation Image CSS Hover Problem

Keitho

Junior Member
I cant seem, to find the error in my CSS Code for my navigation.

Basically the image height is 100px but only 50px of the navigation is shown so that when a user hovers over that image I set for the navigation link 50px of the navigation will be hidden and the other 50px will be shown to add a hover effect. However the Hover effect I wanted doesint seem to work. Here is my code, I'd really appreciate help :)

HTML :
HTML:
<div id="nav"> 
       						 <ul>
                             	<li class="about"><a href="about.html">About</a></li>
                                <li class="services"><a href="services.html">Services</a></li>
                                <li class="clients"><a href="clients.html">Clients</a></li>
                                <li class="contact"><a href="contact.html">Contact</a></li>
        					 </ul>
						</div>


CSS :
HTML:
/*  Navigation Styling */
#nav {
	width:388px;
	height:50px;
	float:left;
	margin-bottom:10px;
}
#nav ul {
	list-style:none;
	float:left;
	width:400px;
	height:50px;
	float:left;
}
#nav ul {
	display:inline;
}
#nav li.about a:link, #nav li.about a:visited {
	float:left;
	display:block;
	width:115px;
	height:50px;
	background-image:url(images/nav/about.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
}
#nav li.services a:link, #nav li.services a:visited {
	float:left;
	display:block;
	width:85px;
	height:50px;
	background-image:url(images/nav/services.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
}
#nav li.clients a:link, #nav li.clients a:visited {
	float:left;
	display:block;
	width:75px;
	height:50px;
	background-image:url(images/nav/clients.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
}
#nav li.contact a:link, #nav li.contact a:visited {
	float:left;
	display:block;
	width:125px;
	height:50px;
	background-image:url(images/nav/contact.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
}

/*  Navigation Hover-Styling */

#nav ul li.about a:hover{
	float:left;
	display:block;
	width:115px;
	height:50px;
	background-image:url(images/nav/about.png) no-repeat 0 -50px;
}
#nav ul li.services a:hover{
	float:left;
	display:block;
	width:85px;
	height:50px;
	background-image:url(images/nav/services.png) no-repeat 0 -50px;
}
#nav ul li.clients a:hover{
	float:left;
	display:block;
	width:75px;
	height:50px;
	background-image:url(images/nav/clients.png) no-repeat -50px -50px;
	background-repeat:no-repeat;
}
#nav ul li.contact a:hover{
	float:left;
	display:block;
	width:125px;
	height:50px;
	background-image:url(images/nav/contact.png) no-repeat 0 -50px;
}
 
Still not working, or I've done something wrong :

CSS :
HTML:
/*  Navigation Styling */
#nav {
	width:388px;
	height:50px;
	float:left;
}
#nav ul {
	list-style:none;
	float:left;
	width:400px;
	height:50px;
	float:left;
}
#nav ul {
	display:inline;
}
#nav li {
	text-shadow: #000 1px 1px 1px;	
}
#nav li.about a:link, #nav li.about a:visited {
	float:left;
	display:block;
	width:115px;
	height:50px;
	background-image:url(images/nav/about.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}
#nav li.services a:link, #nav li.services a:visited {
	float:left;
	display:block;
	width:85px;
	height:50px;
	background-image:url(images/nav/services.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}
#nav li.clients a:link, #nav li.clients a:visited {
	float:left;
	display:block;
	width:75px;
	height:50px;
	background-image:url(images/nav/clients.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}
#nav li.contact a:link, #nav li.contact a:visited {
	float:left;
	display:block;
	width:125px;
	height:50px;
	background-image:url(images/nav/contact.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}

/*  Navigation Hover-Styling */

#nav ul li.about a:hover{
	float:left;
	display:block;
	width:115px;
	height:50px;
	background-image:url(images/nav/about.png) no-repeat -50px;
	overflow:hidden;
}
#nav ul li.services a:hover{
	float:left;
	display:block;
	width:85px;
	height:50px;
	background-image:url(images/nav/services.png) no-repeat -50px;
	overflow:hidden;
}
#nav ul li.clients a:hover{
	float:left;
	display:block;
	width:75px;
	height:50px;
	background-image:url(images/nav/clients.png) no-repeat -50px;
	background-repeat:no-repeat;
	overflow:hidden;
}
#nav ul li.contact a:hover{
	float:left;
	display:block;
	width:125px;
	height:50px;
	background-image:url(images/nav/contact.png) no-repeat -50px;
	overflow:hidden;
}
a {
        overflow:hidden;
}
 
You need to add the overflow hidden to whatever div or element you are using to hide the rest or crop the background image with.

For example if you have a list with a set height of 300px and your using backgrounds of 600px and using background position to shift it up or down 300px you need to add overflow hidden to the list item.

Basically whatever defines the size of the 'viewport' needs a hidden overflow.
 
So on your code I believe you need to add it to:

[EDIT - This is incorrect, needs to be applied to the anchor]

#nav ul li { overflow:hidden; }

or specifically

#nav ul li.about, #nav ul li.services, #nav ul li.clients, #nav ul li.contact { overflow:hidden; }
 
Thanks but it still doesint seem to be working for me :/ I have a big feeling that I've been doing something wrong. This is the first time I tried this method.

Do you think you could edit the source code I posted and fix it where you think it needs to be fixed? Thanks for your help :)

HTML:
/*  Navigation Styling */
#nav {
	width:400px;
	height:50px;
	float:left;
	overflow:hidden;
}
#nav ul {
	list-style:none;
	float:left;
	width:400px;
	height:50px;
	float:left;
	display:inline;
}
#nav ul li {
	text-shadow: #000 1px 1px 1px;	
	overflow:hidden;
}
#nav ul li.about a:link, #nav li.about a:visited {
	float:left;
	display:block;
	width:115px;
	height:50px;
	background-image:url(images/nav/about.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}
#nav ul li.services a:link, #nav li.services a:visited {
	float:left;
	display:block;
	width:85px;
	height:50px;
	background-image:url(images/nav/services.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}
#nav ul li.clients a:link, #nav li.clients a:visited {
	float:left;
	display:block;
	width:75px;
	height:50px;
	background-image:url(images/nav/clients.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}
#nav ul li.contact a:link, #nav li.contact a:visited {
	float:left;
	display:block;
	width:125px;
	height:50px;
	background-image:url(images/nav/contact.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}

/*  Navigation Hover-Styling */

#nav ul li.about a:hover{
	float:left;
	display:block;
	width:115px;
	height:50px;
	background-image:url(images/nav/about.png) no-repeat -50px;
	overflow:hidden;
}
#nav ul li.services a:hover{
	float:left;
	display:block;
	width:85px;
	height:50px;
	background-image:url(images/nav/services.png) no-repeat -50px;
	overflow:hidden;
}
#nav ul li.clients a:hover{
	float:left;
	display:block;
	width:75px;
	height:50px;
	background-image:url(images/nav/clients.png) no-repeat -50px;
	background-repeat:no-repeat;
	overflow:hidden;
}
#nav ul li.contact a:hover{
	float:left;
	display:block;
	width:125px;
	height:50px;
	background-image:url(images/nav/contact.png) no-repeat -50px;
	overflow:hidden;
}

/* Content Styling */

p {
	color:#CCC;
	text-shadow: #000 1px 1px 1px;	
}
h1, h2, h3, h4, h5, h6 {
	text-shadow: #000 1px 1px 1px;	
}
a {
	overflow:hidden;
}
 
My apologies I missed a simple little mistake

You have used background-image but then specified more than just the image

change

Code:
background-image:url(images/nav/services.png) no-repeat -50px;
to

Code:
background: url(images/nav/services.png) no-repeat -50px;

and it works.

or you could use

Code:
background-color: black;background-image: url(images/nav/servies.png);background-repeat: no-repeat;background-attachment: inherit /* You dont need this but meh */background-position: 0 -50px;

Which is the same, just not shorthand and for the record you still need to keep overflow:hidden on the a elements where the bg position changes.
 
We got their in the end eh :D

What are you using to write your code, I only ask as - as soon as I opened it in komodo edit (I guess like notepad+ but for mac) it highlighted the background-image as non-valid.
 
Back
Top