.css - Achieving multiple hover/visited colours - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

.css - Achieving multiple hover/visited colours

kapow

10:15 am on Oct 24, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

If I have two styles in a .css file
1. default
2. Menu1
How do I make the 'hover' and 'visited' colour different in the 2nd style?

Below is my attempt - but the 'hover' and 'visited' colours come out the same for 'menu1'.

body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p {margin-top:0em}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
:link { color:#000099 } /* for unvisited links */
:visited { color:#000099 } /* for visited links */
:active { color:#000099 } /* when link is clicked */
:hover { color:#FF0000 } /* when mouse is over link */

a.menu1 {font-family:Arial, Helvetica, sans-serif; font-size:12pt; font-style:normal; font-weight:bold; text-decoration:none; color:#FFFFFF;}
a.menu1:hover { color:#FFFF00; text-decoration:underline }
a.menu1:visited { color:#FFFFFF; text-decoration:underline }

joshie76

12:17 pm on Oct 24, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Just had a play around and it seemed to work fine (even though I couldn't see the menu1 link properly).

One trick that I find helps me out of these sticky corners is to ensure I'm applying the class to the anchor tag and not it's parent, i.e.:

Instead of:

<td class="menu1"><a href="#">test</a></td>

Try:

<td><a href="#" class="menu1">test</a></td>

Additionally I always specify my selector before the pseudo class:
:link -> a:link though I didn't have any problems with your stylesheet in IE5.5

kapow

9:55 pm on Oct 24, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hmmm
I'm on IE5.0 and get the problem. (yep, class in the href too).

joshie76

9:10 am on Oct 25, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Damn, bit confused then. If you like, Stickymail me a url where I can get in and have a look at it all in it's full glory.

joshie76

10:44 am on Oct 25, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Thanks for the sticky kapow.

The CSS is working as expected with every browser I can throw at it (IE5.5, NN6.1, Opera 5.12, NN4.7) - Unfortunately I haven't got IE5.0 installed so I can't really attack this problem for you :( Sorry.

Perhaps someone using IE5 fancies the challenge?

Have you tried validating the HTML/CSS to see what that throws up - this might lead you to the problem.

Sorry again.

(when will we be able to install multiple versions of IE do you reckon ;))

ggrot

12:53 pm on Oct 25, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

>> when will we be able to install multiple versions of IE do you reckon

Not until micro$oft figures out a way to charge you for multiple installations.

kapow

1:58 pm on Oct 25, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Thanks Joshie
Perhaps its just me then.

Can anyone tell me how to change the text size of bulleted lists in a .css file?

joshie76

1:59 pm on Oct 25, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

<style>
ul, li {font-size: xxpt}
</style>

David

2:07 pm on Oct 25, 2001 (gmt 0)

10+ Year Member

If you asign an id=menu1 to the block level tag of menu1 then in your style sheet.

#menu1 A:hover{color:blue}
#menu1 A:hover{visited:red}

I think that will work.

kapow

3:15 pm on Oct 25, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

< If you asign an id=menu1 to the block level tag of menu1 then in your style sheet.
#menu1 A:hover{color:blue}
#menu1 A:hover{visited:red} >

Sorry - what is a block level tag?

ps: Joshie - thanks, the bullet thing works now.

David

6:18 pm on Oct 25, 2001 (gmt 0)

10+ Year Member

It would be like a <div id="menu1"> or <p id="menu1">

kapow

12:57 pm on Oct 29, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

....It would be like a <div id="menu1"> or <p id="menu1"> ....

Errrrm, er, where does that go exactly ?

David

3:53 pm on Oct 29, 2001 (gmt 0)

10+ Year Member

Hi Kapow,
If you take the html that your menu1 is in and wrap in a <div id="menu1"> tag you are telling the browser to treat it different.

This goes in the <body>
<div id="menu1">
Your menu html goes here
</div>

Then in your style sheet assign the rules to the id of menu1
like this

#menu1 A:hover{color:blue}
#menu1 A:hover{visited:red}

kapow

3:40 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

This is driving me mad :( I can't get a simple menu to show a different 'visited' colour to the 'visited' colour of the rest of the page. What am I doing wrong ???

HERE IS SOME OF THE FAULTY MENU HTML

<p CLASS=menu1>
<a href="travel_destinations.htm">Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
<a href="hotels_travel_services.htm">Other Services</a>
</p>

HERE IS MY .CSS FILE

body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
:link { color:#000099 }
:visited { color:#000099 }
:active { color:#000099 }
:hover { color:#FF0000 }

.menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; link:#FFFFFF;}
#menu1 A:hover{color:#FF0000}
#menu1 A:hover{visited:#FFFFFF}

joshie76

3:48 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Sorry Kapow - I don't mean to be a whining mother figure, but in the example you give above you have no class attribute in the anchor tags.

Eric_Jarvis

3:51 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

it should read

a.menu1:hover { etc}

and so on

joshie76

4:02 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

also try being more explicit with you standard link selectors in your CSS

:link { color:#000099 }
:visited { color:#000099 }
:active { color:#000099 }
:hover { color:#FF0000 }

becomes

A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 }

David

4:06 pm on Oct 30, 2001 (gmt 0)

10+ Year Member

You need to have the...

<p CLASS=menu1>

read...

I would rename your font style from .menu1 to maybe .menu1a
The ID will control the rollover the class will change the font stuff

<p id="menu1" class="menu1a">

Style sheet ..
#menu1 A:hover{color:#FF0000}
#menu1 A:visited{color:#FFFFFF}

kapow

5:34 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Still stuck :(

joshie76
- Your not whining, I need all the help I can get.
- Have added A:link { color:#000099 } etc
- And a class attribute to the first anchor tag

David
- I'm not sure if I've understood you but have renamed items like so:

HERE IS SOME OF THE REVISED FAULTY MENU HTML
<p id="menu1" class="menu1a">
<a href="travel_destinations.htm" CLASS=menu1>Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
<a href="hotels_travel_services.htm">Other Services</a>
</p>

HERE IS MY REVISED .CSS FILE
body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 }

.menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; link:#FFFFFF;}
#menu1a :hover{color:#FFFF00}
#menu1a :visited{color:#FFFFFF}

SmallTime

6:37 pm on Oct 30, 2001 (gmt 0)

10+ Year Member

HERE IS SOME OF THE REVISED FAULTY MENU HTML
<p id="menu1" class="menu1a">
<a href="travel_destinations.htm" class="menu1">Destinations</a> �
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> �

David

6:54 pm on Oct 30, 2001 (gmt 0)

10+ Year Member

This works
<head>
<title>Untitled</title>
<style>
body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 }
.menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; link:#FFFFFF;}
#menu1 :hover{color:#FFFF00}
#menu1 :visited{color:#FFFFFF}
</style
</head>
<body>
<p>
<a href="travel_destinations.htm" CLASS=menu1>Destinations</a> �
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> �
<a href="hotels_travel_services.htm">Other Services</a>
</p>

<p id="menu1" class="menu1a">
<a href="travel_destinations.htm" CLASS=menu1>Destinations</a> �
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> �
<a href="hotels_travel_services.htm">Other Services</a>
</p>

</body>

kapow

8:49 pm on Oct 30, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

:) :) DONE IT! :) :)

Here is what finally worked:
It seems to have something to do with defining the font stuff again in the Link, Hover and Visited bits. Like so:

body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 }

.menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; }
A.menu1:visited { color:#FFFFFF; font-weight:bold; text-decoration:none }
A.menu1:link { color:#FFFFFF; font-weight:bold; text-decoration:none }
A.menu1:hover { color:#FFFF00; font-weight:bold; text-decoration:underline }

joshie76

8:55 am on Oct 31, 2001 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Congrats!