4 replies [Last post]
scribble
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT-5
Joined: 2004-02-12
Posts: 5
Points: 0

I'm trying to make different styles for one page in order to have links different colors in different areas of the page. No matter what I do, the links, visited links and hover colors don't work properly. They keep taking on the attributes of the other style sheets or just ingnoring the attributes all together.

The left hand links under 'Fire Supply' should be white links, turn red as you roleover and turn red once visited. Once they're visited they turn gray, the visited color of the other style sheet, .navigation

The words 'Nason Fire & Police Supply' after the first word 'At' in the copy is also a link and should be bold and blue, according to the style sheet .copy which is attached to this area. It's not.

Here's the page and style code I'm having problems with. If anyone thinks they can help I would greatly appreciate it.

http://www.scribblegraphics.com/clnason/comp1.html

<style type="text/css">
<!--
.navigation {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
text-decoration: none;
}
a: {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CC0000;
text-decoration: none;
}
a:visited {
color: #CC0000;
text-decoration: none;
}
.copy {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #333333;
text-decoration: none;
}
a: {
font-weight: bold;
color: #074e92;
text-decoration: none;
}
a:hover {
color: #CC0000;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #074e92;
text-decoration: none;
}
-->
</style>

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Multiple styles for one page

Firstly, in that style sheet, you're just redeclaring the 'base' A, A:hover and A:visited styles (ie those that apply everywhere). It's best to work off a parent object (imho!)

Also be careful with the HTML: class="navigation"href="http://www.scribblegraphics.com"there should be a space in there really, just in case.

So you've got your two lists. Give them two different classes:

<ul class="red">...</ul>
<ul class="blue">...</ul>

Then declare the A pseudoclasses as follows. Note the order - this is important!
UL.red A:link  { color : #F00; }
UL.red A:visited  { color : #400; }
UL.red A:active  { color : #800; }
UL.red A:hover  { color : #0FF; }

and similar for the blue - but with different colors of course!

Remember there need be no specific styles for the UL.red or UL.blue, they're just there so we can spot the difference between the two lists.

For completeness here's my test HTML:

<html>
<head>
<style>
A { text-decoration : none; color : black; }

UL.red A:link  { color : #F00; }
UL.red A:visited  { color : #400; }
UL.red A:active  { color : #800; }
UL.red A:hover  { color : #0FF; }

UL.blue A:link  { color : #00F; }
UL.blue A:visited  { color : #004; }
UL.blue A:active  { color : #008; }
UL.blue A:hover  { color : #FF0; }
</style>
</head>

<body>
<ul class="red">
	<li> Hello </li>
	<li><a href="blah">link</a></li>
</ul>
<ul class="blue">
	<li> Hello </li>
	<li><a href="blah">link</a></li>
</ul>
</body>
</html>

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Re: Multiple styles for one page

scribble wrote:
The words 'Nason Fire & Police Supply' after the first word 'At' in the copy is also a link and should be bold and blue, according to the style sheet .copy which is attached to this area. It's not.

Afraid that's not a link in the HTML. Use a similar technique to the one above if you need a different color.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

scribble
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT-5
Joined: 2004-02-12
Posts: 5
Points: 0

Additional Help Needed

O.k., I've made the changes everyone suggested and it worked great on the MAC, but it doesn't work on the PC (Explorer). The links under 'Fire Supply' and Police Supply are blue instead white. They should be white and change to either red or blue when you hover over them.

Anyone who thinks they can help can view the code here http://www.scribblegraphics.com/clnason/csstest.html

Thank you in advance for your help.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Multiple styles for one page

That's strange, I was testing on IE6! Will have a look when more awake.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.