Grow your CSS skills. Land your dream job.

[Solved] Trouble With Sprite Nav

  • # September 11, 2009 at 7:27 pm

    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

    You 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

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".