homepage Welcome to WebmasterWorld Guest from 54.211.95.201
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Vertical Sprite - Active state?
CSS Vertical Sprite Active
CeeInTx




msg:4197240
 5:57 pm on Sep 6, 2010 (gmt 0)

I finally found, much to my great relief, a tutorial that made sense and worked (!8-)!) in this forum by Fotiman (http://www.webmasterworld.com/css/4022607.htm)

Thank you so much!

Now, I'm trying to figure out how to have the button stay in the hover state when the user is on that particular page. Or I guess I could design a different image for the active state. But the point is getting the image to stay in either state when on the page.

Here's a portion of the CSS that was used in the post above:

ul#leftnavigation #home a {background-position: 0px 0px; height: 30px;}
ul#leftnavigation #accessories a {background-position: 0px -31px; height: 30px;}
ul#leftnavigation #corpgifts a {background-position: 0px -61px; height: 30px;}

ul#leftnavigation #home a:hover {background-position: -129px 0px;}
ul#leftnavigation #accessories a:hover {background-position: -129px -31px;}
ul#leftnavigation #corpgifts a:hover {background-position: -129px -61px;}

I have tried replacing a:hover with a:active but that's not working.

What am I missing?

Thank you!

 

alias




msg:4197748
 2:07 pm on Sep 7, 2010 (gmt 0)

Welcome to the webmasterworld forums.

You're misunderstanding the usage of the :active selector. The :active selector is only applied to an element which is clicked (or otherwise activated). It will not be in place when you reload the page.

You will need some backend intervention to highlight the active element for example by adding a classname to it.

CeeInTx




msg:4197787
 3:58 pm on Sep 7, 2010 (gmt 0)

Ah, OK. Does 'backend entervention' mean some kind of server side scripting? Not sure I understand where to go next. Thanks!

alias




msg:4197798
 4:08 pm on Sep 7, 2010 (gmt 0)

Let me just break it up a bit.

You want to highlight the active menu item when the page loads.

Unless you're using some non-page-refreshing ajax interface, the only way to do it is make the server to parse the URL that is being loaded, match it against the links on your menu, and add the classname of your choice to the link which matches the URL.

If you're using a CMS of some kind, there's a high probability, that it's already happening -- for example, Wordpress does that very nicely.

Hope that helps.

CeeInTx




msg:4197971
 7:37 pm on Sep 7, 2010 (gmt 0)

Oh, dear.

I'm using Dreamweaver (html and css). I don't understand what you mean by "make the server parse the URL" etc. Can you illuminate?

Thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved