- This topic is empty.
-
AuthorPosts
-
September 11, 2009 at 7:27 pm #26072iagainstiMember
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:
Code:Here is the CSS:
Code:#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!
September 11, 2009 at 10:50 pm #63885Indubitable TurtleMemberYou need to remove the :link from the first a in the series on your active nav styles. Where your CSS reads:
Code:/* 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:
Code:/* 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!
September 12, 2009 at 1:32 am #63894iagainstiMemberFixed! You sir, are a gentleman and a scholar. Thank you.
Oh, and I’m glad you like the site :D -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.