here is the website I’m working on…
I used a Sprite for my navigation.
How do I get the hover state to stay if it’s on its respective page?
For example when on the contact page, I want the contact nav to have that line overtop of it to be static when on that page.
Um … why? The background position is only going to be ‘top’ or ‘bottom’ surely - the image is in the same place relative to the menu item, so the code should be the same regardless.
^ I do it so, except also, add :focus wherever there’s :hover.
Hi Stomme poes,
You’re absolutely right here, thanks for the adition
You asked about current state (which unfortunately doesn’t have a pseudo-class)., not avtive state.
The active state can be triggered in two ways -
Either :hover or :focus will be triggered before you can possibly trigger :active.
Give the entry for the current page a class eg. class=“current”
But if I add the class=“current” on each html page, Ill have to have separate CSS for each page too… obviosuly since the bkg position will be different for every link. Would this be a good area to place just that one line of CSS within the HTML so I dont have to make seperate style sheets?
Since you are working with images you could use image :hover, which means that for every menu item both the normal and hove state are one image like:
and your CSS and html as below
a#about{
background: url("yourimg.gif") 0 0 no-repeat;
}
a#about:hover,
a#about.current{
background: url("yourimg.gif") 0 -35px no-repeat;
}
<a href="#" id="about" class="current">About Us</a>
I hope this make any sense to you
You may be misunderstanding what :active does … it denotes when a hyperlink is activated … in other words, from the moment you click on it to the moment you release the mouse button. What it definitely does not do is to compare the destination of the link with the URL of the current page.
If you have your menu written on every page, you only need to had a class to one link on each page. If you have your menu written once and then included, you’ll need to add a class to each and every link.
See this thread where this very topic was discussed just the other day.
Sorry everyone, I have meant how to highlight the current page.
Eric I checked that link out, problem is, is that I want to use my hover images to highlight the current page. I’m using a sprite right now for my navigation, so it’s not as simple as having a CSS element with #current{ color:XXX} to work for every page, considering every highlight is different and are image files.
See the link I gave in #4.
You will need to put an ID on every menu item. You can then either use a <style> element on each page to specify the relevant rule for the current page, or you can put a class on the <body> element and put all the matching rules in the one stylesheet.
If you’re using the same format of sprite for each link - eg an image 60px high with three states that are each 20px high - then all you need to do in the “current” declaration is to set the background-position. You’ve already set the background image for all the menu items, so all that is needed now is just to move one image to a different position.
Don’t quite understand?
So I’ll have to give every link I have a new class?
Is this what I have to do…since the active state is going to be the same as my hover state, all I have to do is add the new Active(current) class to the hover element in my css?