Quick css question navCatTabs

[red8ii8]

Hi Just a quick silly question,

How do I correctly label the css to ahve a background image show when the link is active in navCatTabs? I can get it to display the image on hover but I want it to stay if selected.

www.thehealthyfamilystore.com

I'm using the rollover tabs mod

thanks

[gjh42]

In the same way you use :hover, you can use :active and :visited. They need to appear in the right order in your stylesheet, or they won't all work.

a:link
a:visited
a:hover
a:active

See the top of your main stylesheet for an example.

[red8ii8]

That's what I thought I was doing and it just isn't working. I'm sure I'm just naming it wrong because I've never had that problem.

#navCatTabs ul li a:active
#navCatTabs li a:active
#navCatTabs ul a:active
#navCatTabs a:active
a.category-tabs:active

none work so far. I'm thinking my brain is just fried and I will see my stupid mistake momentarily.

[red8ii8]

I notice that the selected menu item is then wrapped in a span class when looking at the html that is generated?

[gjh42]

"active" is for that brief moment after clicking before the new page starts to display - pretty much useless with a decent connection.

"visited" is for recently clicked links.

[madmumbler]

This might not apply in your case, but in case it does...

I once spent an HOUR fighting a link set-up to get it to change color, it wouldn't...

Turns out because I'd already clicked on and "visited" the link, it always showed as the "visited" color. I only figured it out when I went and looked at it on another computer -- worked once, then it didn't.

Totally dump your browser cache and see if that helps. Might not, but it was my d'oh! problem. *LOL*

HTH,

[red8ii8]

Thanks for the suggestion, but I understand that visited links will stay in their assigned color as long as you are on they are in the cache which is why I can't do what I need with the a:visited tag. I want for visitors to be able to see visually which menu they are currently in based on a visual difference. Like this

http://www.bananarepublic.com/browse...on.do?cid=5002

when you click on a category at the top menu it gets a 1px border as long as you are in it. It disappears when you leave the section and is placed on another section based on where you are. On html pages I have made in the past this was done with a simple a:active tag as far as I remember.

I am pretty sure there is a way to name the css to accomplish this like #current or #category-subs-selected, I'm just not sure what it is exactly. In the meantime I put in the dropdown menu.

If anyone knows the correct naming for this that would be very helpful! I can't seem to find it with the developers toolbar.

[gjh42]

There are tags for the current category or sub that can be used without depending on the pseudo-classes. In tpl_categories.php:

 if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $cat_name_display . '</span>';
        } else {
          $content .= '<span class="category-subs-selected">' . $cat_name_display . '</span>';
        } 

(snippet from Cat Dressing, so not identical to stock - but the classes are)

The Classic template uses this functionality, if you want to see how it operates.

[red8ii8]

Ahh! That's it. span.category-subs.selected Funny thing is I use it on another site of mine *duh moment*.

Thanks so much!