8 replies [Last post]
Whoisdan
Offline
Regular
Chicago
Last seen: 16 years 34 weeks ago
Chicago
Joined: 2004-03-31
Posts: 18
Points: 0

Hey. I'm going bananas trying to change the rollover color of some of my links. The problem occurs on this page, with the subgroup "Aon, Family Ventures,..." I want those links to be white instead of red, and be underlined on the rollover. I've read a lot of stuff here and elsewhere and nothing is working. Any ideas? Here's my source code (which may be the problem?)

 <div id="right">
<h3>Portfolio</h3>
<ul>
	<li><a href="/identity/" title="Brand Identity">Brand Identity</a></li>
</ul>
		<h4><a class="white" href="/identity/aon.php">Aon</a></h4>
		<h4><a href="/identity/familyventures.php">Family Ventures</a></h4>
<ul>

And my CSS http://cagneyassociates.com/css/cagney.css:

ul {
	list-style: url(/images/smallplus.gif) inside;
	margin: 0;
	padding: 0;
	}
	
li {
	width: 180px;
	margin: 4px 0 0 0;
	padding: 0;
	line-height: 19px;
	}

h4 {
	width: 180px;
	margin: 4px 0 6px 14px;
	padding: 0;
	font-weight: normal;
	font-size: 12px;
	}

a:link {
	background-color: transparent;
	text-decoration: none;
	color: #f00;
	}

a:visited {
	background-color: transparent;
	text-decoration: none;
	color: #f00;	
	}

a:hover {
	background-color: transparent;
	border-bottom: 1px solid #fff;
	color: #fff;
	}

a:active {
	background-color: transparent;
	text-decoration: none;
	color: #f00;	
	}
[/code]

MalphasWats
Offline
Regular
Last seen: 14 years 4 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

Of Course, 2 rollover colors doesn't work

try changing

.white:link {
	color: #fff;
	}

to

.white {
	color: #fff;
	}

I'm not sure if it will actually work - it might not override the color already specified for links. If not, you could just make one for red and one for white and apply them all to each link.

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

Whoisdan
Offline
Regular
Chicago
Last seen: 16 years 34 weeks ago
Chicago
Joined: 2004-03-31
Posts: 18
Points: 0

Of Course, 2 rollover colors doesn't work

I tried that yesterday. I was messing around with it for hours. Nothing. I tried it again, nothing. Could you explain your last suggestion a little more? I don't quite understand. Thanks.

MalphasWats
Offline
Regular
Last seen: 14 years 4 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

Of Course, 2 rollover colors doesn't work

I'm not sure it's the best way, I'm still learning, but it will work I think.

take out the red color from the a:link etc etc and make a new class called .red, then apply that class to all the links that you want to be red, and the .white class to all the ones you want white...

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

Whoisdan
Offline
Regular
Chicago
Last seen: 16 years 34 weeks ago
Chicago
Joined: 2004-03-31
Posts: 18
Points: 0

Of Course, 2 rollover colors doesn't work

Okay, I did that to see how it'd look.

There has to be a better way to do this. I have links inside each portfolio piece that need to remain red, and I don't want to have to do this for those too. It just seems ridiculous. Ah! Thanks, btw.

MalphasWats
Offline
Regular
Last seen: 14 years 4 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

Of Course, 2 rollover colors doesn't work

Hi there, I'm back from work now, so I actually have enough bandwidth to send more than a letter at a time.

One way around this is by using labels (I don't know if they're actually called labels...) you could do something like this:

css:

a { site-wide style }
a:link { red }
a:hover { etc etc }

#brandid a {special properties }
#brandid a:link {white}
#brandid a:hover {etc etc}

html:

<div class="nomal content"> Stuff with red links </div>

<div id="brandid"> Stuff with white links </div>

everything else  (also with red links)

obviously it's pseudocode, but that's because I'm good enough yet to write this stuff on the fly, but that's the general gist of it.

Is that clear enough, or have I confused it all?

-Mal

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

Whoisdan
Offline
Regular
Chicago
Last seen: 16 years 34 weeks ago
Chicago
Joined: 2004-03-31
Posts: 18
Points: 0

Of Course, 2 rollover colors doesn't work

It worked. Thanks!

It looks a bit flaky in WinIE6, displaying the + sign .gifs for some reason. Any new tips?

Also, if you can view this on WinIE, do you know what is up with why the .gifs display so tightly to the text? It's killing me.

MalphasWats
Offline
Regular
Last seen: 14 years 4 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

Of Course, 2 rollover colors doesn't work

Sorry, I can't help you there, I have no clue why every browser makes things look completely different (the +'s look different again in Firefox), I noticed that in Opera/Win the logo doesn't display properly either, but I can't see a reason why.

Sorry, I've reached the limits of my knowledge for now.

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

rahul
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2004-04-02
Posts: 4
Points: 0

I think it will work ....

Hi all Laughing out loud
try this m sure this will work in iE but m not sure in NN.

A.white:link {
color: #FFFFFF;
font-size: 12px;}

A.white:visited {
color: #FFFFFF;
font-size: 12px;}

A.white:hover {
color: #FFFFFF;
font-weight:bold;
font-size: 12px;}


A:link {
color: #000000;
font-size: 12px;}

A:visited {
color: #000000;
font-size: 12px;}

A:hover {
color: #000000;
font-weight:bold;
font-size: 12px;}