homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Multiple link properties hover, visited, link

 1:54 pm on Jan 17, 2003 (gmt 0)

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?



 2:34 pm on Jan 17, 2003 (gmt 0)

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]


 3:32 pm on Jan 17, 2003 (gmt 0)

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?


 3:47 pm on Jan 17, 2003 (gmt 0)

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

Please note edit above


 4:01 pm on Jan 17, 2003 (gmt 0)

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.


 4:11 pm on Jan 17, 2003 (gmt 0)

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>


 4:35 pm on Jan 17, 2003 (gmt 0)

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.


 4:51 pm on Jan 17, 2003 (gmt 0)

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!

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