Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Highlight current page using CSS image sprite

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #46087
    clarissa
    Member

    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.

#141653
PicnicTutorials
Participant

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.

#141652
Paulie_D
Member

>ids arent supposed to be numbers right?

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

#141672
clarissa
Member

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)
  • The forum ‘CSS’ is closed to new topics and replies.