BlobFisk
msg:1196241 | 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]
|
korkus2000
msg:1196242 | 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?
|
BlobFisk
msg:1196243 | 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
|
korkus2000
msg:1196244 | 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.
|
BlobFisk
msg:1196245 | 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>
|
korkus2000
msg:1196246 | 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.
|
BlobFisk
msg:1196247 | 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!
|
|
