CSS help please
I have been trying to have two different areas of CSS to one page. I would like the "text" area to use a different "a:link, a:hover, etc.," than the navigation part of the site. I have tried to use the "#LABEL" selector. ( ID=nav1) When I put it in use it effected all of the other links on the page as well. How do I get this to work?
I would like the NAV section to have the a:hover state be orange. I would also like the CONTENT part to have the a:hover state be red and be a bigger size.
Is there a site that covers this topic or is there something that one of you kind souls can tell me to fix this problem?
Thanks
Suzanne posted this at 02:03 — 18th July 2001.
She has: 5,507 posts
Joined: Feb 2000
You would use classes for each pseudo-class.
a:link.classname
a:active.classname
a:visited.classname
a:hover.classname
like that.
Dorn posted this at 04:04 — 18th July 2001.
They have: 42 posts
Joined: Jul 2001
I have tried to do as you said and all it seems to do is either use one or the other. I have assigned a classname to both areas and I am using the tag. I get it to work however I still can't control where the CSS works.
Is there a place on the net that talks of such things?
detox posted this at 04:17 — 18th July 2001.
They have: 571 posts
Joined: Feb 2001
you need to place the class within the href tag itself
Dorn posted this at 04:48 — 18th July 2001.
They have: 42 posts
Joined: Jul 2001
I have done that. Yet it still effects the rest of the links on the page that do not have the same classname.
Here you can see if I am doing something wrong. This is an example of the styles that I am trying to get to work on this page.
style1.css
styleNAV.css
There it is.
Thanks for the help....
taff posted this at 14:52 — 18th July 2001.
They have: 956 posts
Joined: Jun 2001
Are you using two separate css files? If so, why? This could be the problem, I've never tried it myself.
Try consolidating it all into one css.
detox posted this at 15:14 — 18th July 2001.
They have: 571 posts
Joined: Feb 2001
That is definitely the problem, the only way to 100% ensure 1 stylesheet rule over the other is to take advantage of the !important rule. Consolidate these into one, then try something like this:
a:link { color: #000000; text-decoration:none; }
a:visited { color: #000000; text-decoration:none;}
a:active { color: #000000; text-decoration:none;}
a:hover { color: #FF0000; text-decoration:none;}
a:link.flow { color: #000000; text-decoration:none; }
a:visited.flow { color: #000000; text-decoration:none;}
a:active.flow{ color: #000000; text-decoration:none;}
a:hover.flow { color: #0099ff; text-decoration:none;}
Then all you need do is call them separately in the href tag.
Dorn posted this at 20:12 — 18th July 2001.
They have: 42 posts
Joined: Jul 2001
It doth work. Thank you for all of your help.
It is odd that I never thought to combine the two. I allways seem to overlook the obvious. But it works now and I can only express my joy with this.....
:jump:
detox posted this at 04:13 — 19th July 2001.
They have: 571 posts
Joined: Feb 2001
95% of all of my errors within sites are because I overlook the obvious. It is so frustraing when you keep banging your head against a brick wall!!!
The only consolation I find is that I would say most people are the same!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.