Multiple link properties hover, visited, link

[korkus2000]

I need three different values based on background color(some linkes need to be white and others black with different hover and other color properties.) for these link properties. What is the best way to achieve this?

[BlobFisk]

If they are in different layers, I use:

div.mainNav a { ... }
div.mainNav a:visited { ... }
div.mainNav a:hover { ... }
div.mainNav a:active { ... }

Then, and <a> within the <div id="mainNav"> will use this styling. You can then reuse the above, but with a different layer name (eg: secondaryNav). This is the method that I favour.

AFAIK, it's also possible to use classes:

a.style1 { ... }
a.style1:visited { ... }
a.style1:hover { ... }
a.style1:active { ... }

and then just go <a href="#" class="style1">. Again, just changing the class name will allow you to add a second link style.

<edit>Changed class name in second example</edit>

[edited by: BlobFisk at 3:48 pm (utc) on Jan. 17, 2003]

[korkus2000]

So what if I have 3 different layers that need the link styles for each. How would I put set up something like a class so I don't have to list these seperate for each instance by id?

[BlobFisk]

Sorry Korkus, I'm not really following you. Do you mean the same link styles for each layer?

Please note edit above

[korkus2000]

Ok that did answer what I was asking, but how do I declare how non-link text will act in style1? Like I want the text a different color than any of the states of the links.

[BlobFisk]

Apologies for the confusion in my first post before I edited it.

Again this can be done in two ways, but sticking with classes:

p.nonLinkStyle { color: #differentFromLink }

You html would then be <p class="nonLinkStyle">.

This can also be achieved by using .nonLinkStyle insead of p.nonLinkStyle in your CSS.

---

Again, if you want to make it layer specific:

div.Layer1 p { color: #000; }

div.Layer2 p { color: #009; }

Will make the colour of paragraph text in Layer1 black and in Layer2 dark blue. More on this here [ecoculture.com] and here [webreference.com].

<edit>Example links added</edit>

[korkus2000]

Thanks BlobFisk, I am trying to completely lose the font tag in my HTML. It works now. This CSS stuff gives me headaches. I need to get back to photoshop for a while.

[BlobFisk]

I've actually been playing around with this constantly for the past few days. I want to ditch image rollovers completely, and use CSS rollovers. I've got it working now and the results are great. I've been using background colours and border-right colours on the a:hover to achieve (what I think) is a very nice menu.

Nice and fast and when I showed some colleagues, they couldn't believe that it wasn't image based. And the saving on the download time goes without saying.

Be a little wary of the div.myDiv a { ... } stuff, you need to fiddle around with it at first (at least, I did!).

Best of luck with it!