Grow your CSS skills. Land your dream job.

Highlight current page using CSS image sprite

  • # July 5, 2013 at 8:16 am

    I am using triple image sprite: top – link, middle – hover, and bottom – highlight current in my main nav, but it doesn’t work for highlight current. My code is:

    HTML:

    ;

    CSS:

    .wrapLinks ul li {
    list-style: none;
    }

    .wrapLinks ul li a {
    text-decoration:none;
    }
    #home{
    background-image:url(home.png);
    background-repeat: no-repeat;

    }
    #products{
    background-image:url(products.png);
    background-repeat: no-repeat;
    }
    #sell{
    background-image:url(sell.png);
    background-repeat: no-repeat;
    }
    #about{
    background-image:url(about.png);
    background-repeat: no-repeat;
    }

    #contact{
    background-image:url(contact.png);
    background-repeat: no-repeat;
    }
    a.button {
    width:99px;
    height:26px;
    display:block;
    margin-left:-15px;
    padding-bottom:3px;
    background-position:top;

    }
    a.button:hover {
    background-position: center;
    }

    a.button:active {
    background-position: bottom;
    transform: translateY(3px);
    }

    Everything works fine except:

    #1 a#home.button, #2 a#products.button, #3 a#sell.button, #4 a#about.button, #5 a#contact.button{
    background-position: bottom;
    }

    The background is not moving to the bottom position.

    I am new to all this so any help would be appreciated.

# July 5, 2013 at 9:38 am

ids arent supposed to be numbers right? I blow at reverse enginering other poeples code. I tried but it would take me 20 minutes to break it down. Here… I very logically coded a 4 part sprite here http://www.websitecodetutorials.com/code/css-nav-menus/css-sprites.php and very logically highlighting a current nav here http://www.websitecodetutorials.com/code/css/highlight-current-page.php. The principal will be the same. Just change the color change to your corridnent change instead.

# July 5, 2013 at 9:40 am

>ids arent supposed to be numbers right?

Correct not supposed to start with numbers…or classes AFAIK.

# July 5, 2013 at 10:51 am

Thank you for quick answers! I didn’t know that ids shouldn’t be numbers…

I will modify my code.

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

You must be logged in to reply to this topic.

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