Welcome to WebmasterWorld Guest from 54.226.246.160

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple link properties hover, visited, link

     

korkus2000

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

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Please note edit above

korkus2000

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

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month