homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
.css - Achieving multiple hover/visited colours
kapow




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

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




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

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




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

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

joshie76




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

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




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

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




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

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




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

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




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

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

David




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

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




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

< 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




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

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

kapow




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

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

Errrrm, er, where does that go exactly ?

David




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

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




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

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




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

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




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

it should read

a.menu1:hover { etc}

and so on

joshie76




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

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




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

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




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

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




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

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




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

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




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

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




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

Congrats!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved