Forums

iagainsti

Hi Guys,
I am currently in the process of refining my portfolio site, and have run into some real issues with my sprite nav...
There are 3 states: An off state, a hover state, and an on state. the on state is determined by an ID on the page that wraps the nav.

The problem: On the index page of my site. along with the about page. the "hover" state appears as the "on" state. and the "on" state just appears as the "off" state. I know this might sound weird. It's kind of hard to explain through text.

the URL is: http://www.colewelty.com

Here is the HTML:

<div id=\"portfolio-page\">
             <div id=\"nav-bg\">
            	<div id=\"nav\">
                	<ul>
                    	<li id=\"portfolio-li\"><a href=\"#\"><span>Portfolio</span></a></li>
                        <li id=\"about-li\"><a href=\"about.php\"><span>About</span></a></li>
                        <li id=\"contact-li\"><a href=\"contact.php\"><span>Contact</span></a></li>
                    </ul>
                </div>
              </div>

Here is the CSS:


#nav{ 
	width: 261px;
	height: 26px;
	padding: 10px 0 0 36px;
}

#nav ul {
	background: url(imgs/sprite.jpg) no-repeat;
	height: 26px;
	width: 261px;
}

#nav ul li {
	list-style: none;
	display: inline;
}

#nav ul li a{
	display: block;
	height: 26px;
	float: left;
}
#nav ul li a span{
	display: none;
}

#nav ul li#portfolio-li a:link, #nav ul li#portfolio-li a:visited {
	width: 87px;
}

#nav ul li#about-li a:link, #nav ul li#about-li a:visited {
	width: 87px;
}

#nav ul li#contact-li a:link, #nav ul li#contact-li a:visited {
	width: 87px;
}

#nav ul li#portfolio-li a:hover, #nav ul li#portfolio-li a:active {
	background: url(imgs/sprite.jpg) 0px -26px no-repeat;
}

#nav ul li#about-li a:hover, #nav ul li#about-li a:active {
	background: url(imgs/sprite.jpg) -87px -26px no-repeat;
}

#nav ul li#contact-li a:hover, #nav ul li#contact-li a:active {
	background: url(imgs/sprite.jpg) -174px -26px no-repeat;
}

/* on page styles */
#portfolio-page #nav ul li#portfolio-li a:link, #portfolio-page #nav ul li #portfolio-li a:visited, 
#portfolio-page #nav ul li#portfolio-li a:hover, #portfolio-page #nav ul li #portfolio-li a:active {
	background: url(imgs/sprite.jpg) 0px -51px no-repeat;}
	
	
#about-page #nav ul li#about-li a:link, #about-page #nav ul li #about-li a:visited, 
#about-page #nav ul li#about-li a:hover, #about-page #nav ul li #about-li a:active {
	background: url(imgs/sprite.jpg) -87px -51px no-repeat;}
	
	
#contact-page #nav ul li#contact-li a:link, #contact-page #nav ul li #contact-li a:visited, 
#contact-page #nav ul li#contact-li a:hover, #contact-page #nav ul li #contact-li a:active {
	background: url(imgs/sprite.jpg) -174px -51px no-repeat;}

Any help is much appreciated!

Indubitable Turtle

You need to remove the :link from the first a in the series on your active nav styles. Where your CSS reads:


/* on page styles */
#portfolio-page #nav ul li#portfolio-li a:link, #portfolio-page #nav ul li #portfolio-li a:visited,
#portfolio-page #nav ul li#portfolio-li a:hover, #portfolio-page #nav ul li #portfolio-li a:active {
   background: url(imgs/sprite.jpg) 0px -51px no-repeat;}

Make it:


/* on page styles (right here------------V*/
#portfolio-page #nav ul li#portfolio-li a, #portfolio-page #nav ul li #portfolio-li a:visited,
#portfolio-page #nav ul li#portfolio-li a:hover, #portfolio-page #nav ul li #portfolio-li a:active {
   background: url(imgs/sprite.jpg) 0px -51px no-repeat;}

I really like the look of your site, nice design work there. Very clean yet informative.

Cheers!

iagainsti

Fixed! You sir, are a gentleman and a scholar. Thank you.
Oh, and I'm glad you like the site :D

treehouse : what would you like to learn today?

Forums

[Solved] Trouble With Sprite Nav