I'm having trouble getting :active states to work on a one page site. I have set up a nav that uses css sprites and I want it to change when that page is active. Currently I am using:
#nav li a.item1 {background-position:0px 0px;} #nav li a:hover.item1 {background-position:0px -160px;} #nav li a:active.item1 {background-position:0px -160px;}
and the hover state works fine. :active does not though. You can see a (VERY, VERY) rough draft of the site here: http://p1n3.com. I am not sure, but I think it my have something to do with the fact that there is only one page on the site.
#nav li a.item1 {background-position:0px 0px;} #nav li a:hover.item1 {background-position:0px -160px;} #nav li a:active.item1 {background-position:0px -160px;}
Am I missing something? Mine is a single page rather than multiple - that's the only real difference I'm seeing.
#nav li a.item1 {background-position:0px 0px;} #nav li a:hover.item1 {background-position:0px -160px;} #nav li a:active.item1 {background-position:0px -160px;}
Am I missing something? Mine is a single page rather than multiple - that's the only real difference I'm seeing.
You're going to have to use javascript to give the body a class each time one of the links is clicked then you can set the link based on the body class.
Also you need to move those "pages" much further apart, I'm on a large browser and if I am on 'home' I can already see half of 'work' and I can see the whole of the 'contact' section just by clicking on 'about'.
I think I'm experiencing similar problems, but I'm very new to coding! I'm trying to get active states working on fixed position nav tabs (CSS styled) that have targets on the same page. One being the homepage tab, one being to some blurb further down. On top of this I have a nice HTML5 smooth scroll working, which I'd like to keep. Active state only working on homepage, and other pages. It there a simple solution? Or no way without learning some javascript?
#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -160px;}
#nav li a:active.item1 {background-position:0px -160px;}
I have seen it working on http://www.atomiccartoons.com/, but couldn't reproduce what they had working.
Any help would be appreciated - Thanks!
My HTML specifies both an id and a class
and my CSS does pretty much the same thing
#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -160px;}
#nav li a:active.item1 {background-position:0px -160px;}
Am I missing something? Mine is a single page rather than multiple - that's the only real difference I'm seeing.
Restructure your element declarations like so:
Also you need to move those "pages" much further apart, I'm on a large browser and if I am on 'home' I can already see half of 'work' and I can see the whole of the 'contact' section just by clicking on 'about'.
@apostrophe Ok - will try JS - thanks! (As far as the content goes, nothing is permanent yet - there will be breathing room between the pages.)
Thanks to both of you for responding.
I think I'm experiencing similar problems, but I'm very new to coding! I'm trying to get active states working on fixed position nav tabs (CSS styled) that have targets on the same page. One being the homepage tab, one being to some blurb further down. On top of this I have a nice HTML5 smooth scroll working, which I'd like to keep. Active state only working on homepage, and other pages. It there a simple solution? Or no way without learning some javascript?