Forums

JamesMcG

Hey. First off I love this site. Its been very helpful these last few weeks. However, I seem to have run into a HUGE Annoyance. If you go to www.jamesmcgill.name you will see my site. At the top is a CSS image switcher, however it does not seem to be switching images. I have been working on this for the last two days and the code pretty much matches Chris' code both on his screen-cast and the code I pulled up from his working example here on the site. Though it matches the later more than the former. If anyone can tell me where I've gone wrong, I would be more than happy to...well lets not cross that bridge till we come to it shall we. :P

Please help, this is annoying.

JamesMcG

*{ margin: 0;  padding: 0;}
a { text-decoration: none; color: black;}

body{
	background-image:url(../Images/UnderConstruction.png);
	background-position:top;
	background-attachment:fixed;
	background-repeat:repeat-x;
	margin:0;
	padding:0px;
	background-color:#000;
}

#wrapper-top {
	width: 1290px;
	position: relative;
	margin: 0 auto;  
}

.image-link { display: block; width: 1290px; height: 160px; position: absolute; top: 0; left: 0;}

#home {background: url(../Images/Header.png) no-repeat; z-index: 2;}
#web {background: url(../Images/HeaderWeb.png) no-repeat; }
#graphic {background: url(../Images/HeaderGraphic.png) no-repeat;}
#photography {background: url(../Images/HeaderPhoto.png) no-repeat;}

#home span {position: absolute; top: 86px; left: 0px;}
#web span {position: absolute; top: 86px; left: 315px;}
#graphic span {position: absolute; top: 86px; left: 630px;}
#photography span {position: absolute; top: 86px; left: 945px;}

.image-link span { width: 315px; display: block; height: 68px;}
.image-link:hover span { z-index: 100;}

JamesMcG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>James McGill's Portfolio</title>
<link href="PortfolioCSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="wrapper-top">
			<a id="home" class="image-link" href="#"><span><img src="../Images/HomeGNav.png" /></span></a>
    		<a id="web" class="image-link" href="#" ><span><img src="../Images/WebDesignGNav.png" /></span></a>
        	<a id="graphic" class="image-link" href="#" ><span><img src="../Images/GraphicDesignGNav.png" /></span></a>
        	<a id="photography" class="image-link" href="#" ><span><img src="../Images/PhotographyGNav.png" /></span></a>
 	</div>

</body>
</html>

amoss

.image-link:hover span { z-index: 100;}

Try removing span.

JamesMcG

Nope. Didn't work. Any other ideas?

Paulie_D

Have you tried

.image-link span:hover { z-index: 100;}

Frankly this cries our for a sprite.

JamesMcG

Actually, I figured the problem out. Thank you for the suggestions Amos and Paulie_D, however it had nothing to do with the span:hover, which is exactly what I was dead set on thinking it was. However, if you look up to the line that sets up the height of the .image-link, you will notice it says Height: 160. My banner is 86px high. The rollover was being cover by it. So every time i rolled over something, i was just rolling over home. Not any others. If you go to www.JamesMcgill.name You will see it now working. :D :D :D :D

I can't stop smiling. :D

amoss

So if you put the span back in on this line it would still work?

.image-link:hover span { z-index: 100;}

treehouse : what would you like to learn today?

Forums

CSS image Switcher Strange Issue