Welcome to WebmasterWorld Guest from 107.22.87.205

Forum Moderators: not2easy

Message Too Old, No Replies

.css - Achieving multiple hover/visited colours

     
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 }

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

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).
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.
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 ;))

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.

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?

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

WebmasterWorld Senior Member 10+ Year Member



<style>
ul, li {font-size: xxpt}
</style>
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.

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.

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

10+ Year Member



It would be like a <div id="menu1"> or <p id="menu1">
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 ?

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}

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}

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.
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

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 }

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}

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}

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>
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>

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 }

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

WebmasterWorld Senior Member 10+ Year Member



Congrats!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month