Forums

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

Home Forums CSS Navigation sprite active state

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #40972
    helios
    Member

    Hi I am new to web design and I am using a sprite image for a vertical menu. I have it working fine in it’s normal and hover state but I am struggling wit the coding for the active state (current page).

    Here is what I am doing html:

  • Home
  • css:

    #mainNav li.buttonOne li.focus {
    background:url(../_images/navigation.gif) no-repeat;
    background-position: -400px 0px;
    width:200px;
    margin: 0px;
    padding: 0px;
    height: 43px;

    I know the back-ground position etc are correct but I don’t really know how to select the active page within the html and then how to control that with css. Any help gratefully received :-)

#115348
helios
Member

see the html came out as a link. Essentially I have given each link a class so that I can position the image for each link, button one, two. I then tried to give it a second class of focus when it was the active page so on the home page the class was

  • Hope this makes sense.

  • #115349
    Paulie_D
    Member

    There are a few ways to indicate an active state.

    One is to use javascript to apply an ‘active’ class the other involves setting an individual class to each page body and using that as a hook for your css.

    #115350
    helios
    Member

    Sorry Third time lucky here is the html

        
  • Home
  • 
    

    #115351
    helios
    Member

    Thanks Paulie. I have never used javascrpt and would like to stick to html and css for now if possible. Can you give me an example of how to set an individual class to each page and then use that in the css? That’s what I don’t know how to do!

    #115358
    helios
    Member

    Found a great example on this site and worked it out. Thanks

    https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

    Viewing 6 posts - 1 through 6 (of 6 total)
    • The forum ‘CSS’ is closed to new topics and replies.