simple style sheet with links

jobe

10-17-2004, 06:25 PM

Hey all.....this i ssimple and works once in frontpage.

the rules is the code:
========================================================
<STYLE type=text/css>

A.os:link
{
FONT-SIZE: x-small; COLOR: #000000; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.os:visited
{
FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.os:active
{
FONT-SIZE: x-small; COLOR: #0000ff; FONT-FAMILY: monospace; TEXT-DECORATION: none
}
A.network:link
{
FONT-SIZE: x-small; COLOR: #FFFFFF; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.network:visited
{
FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.network:active
{
FONT-SIZE: x-small; COLOR: #0000ff; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.drivers:link
{
FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.drivers:visited
{
FONT-SIZE: x-small; COLOR: #0000aa; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A.drivers:active
{
FONT-SIZE: x-small; COLOR: #FFFFFF; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

A:hover
{
FONT-SIZE: x-small; COLOR: #ffffff; FONT-FAMILY: monospace; TEXT-DECORATION: none
}

</STYLE>
</head>

<body bgcolor="#616161">

<a href="#" class="os">test1</a><br>
<a href="#" class="network">test1</a><br>
<a href="#" class="drivers">test1</a><br>

========================================================

what I am looking for is having different link colors, but all have the same hover color. Right no there is a hover for all link classes but I'm trying to shorting the code.

with just putting the
a:hover

when previewing in frontpage is works....go back to design....back to preview and it stops working.
When trying to view in IE is never works.

Anyone try something liek this? got any ideas?

h

tsguitar2004

10-17-2004, 06:46 PM

Howdy and welcome to the forums. Glad you could make it!

I think that if you make all the "a"s in your style sheet lowercase, this will work. The links in your source code are all lowercase, so the style sheet should be, too. But here's the answer to what I think is your question:

Since the links all point to "#" and since the page you are on is "#," then the colors won't change because you've visited the page the links point to, resulting in the link colors being "#0000aa." Just try to point the links to a page that doesn't exist to see what happens. Change "#" to "sillypage.html" and you should see those colors happen.

Does that do it for you? Post back with results.
-ts

jobe

10-17-2004, 07:06 PM

thanks tsguitar2004

I tried putting them to lowercase "a" instead of uppercase and no go.

tried changing the link to point somehwere else "silly.html"
and poof..the link i change the href is changing color on hover, the other two do not ( as the are still "#" )

Thanks for the advise

All I'm hoping to do is save on code....I do alot php coding, very little ( if any ) on the design and presentation ( table layout, css sheets, etc. )

I know you can do
a.test:link
a.test:visited
a.test:hover
a.test:active

there are about 7 or 8 different link classes..in which i would specify at least 3 lines of code for every class
thats a lot of lines :mad:
I'm hoping to just use the a:hover once.
The links and not pointing anywhere but the same page. It is using onclick javascripts to do something when they click on it ( basically changing values in the form )
so i need them on the same page..
hmmmmmm.......
hang on a sec....
well that didn't work.....thought if i used javascript:void(0) as the link it would work but no go.

well i think i explained it
want the same hover for every link class will out redundent code.

any other suggestions?

hemebond

10-17-2004, 10:46 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>46187</title>
<style type="text/css">
body {
background-color:#aaa;
}
a:link {
font-family:monospace;
text-decoration:none;
}
a:hover {
color:#fff !important;
}

#os:link {
color:#000;
}
#os:visited {
color:#00a;
}
#os:active {
color:#00f;
}

#network:link {
color:#fff;
}
#network:visited {
color:#00a;
}
#network:active {
color:#00f;
}

#drivers:link,
#drivers:visited {
color:#00a;
}
#drivers:active {
color:#fff;
}
</style>
</head>
<body>
<ul>
<li><a id="os" href="/os/">OS</a></li>
<li><a id="network" href="/network/">Network</a></li>
<li><a id="drivers" href="/drivers/">Drivers</a></li>
</ul>
</body>
</html>

jobe

10-17-2004, 11:29 PM

WOW...nice call

That looks like it is gonna do it.....gotta go back and change everything now so I'll post back if it all works

Thanks again

jobe

10-19-2004, 01:21 PM

Well oddly enough if not working in my page....it seems to cancell out everything.

I'm just gonna leave it the way it is for now and look into your code and see why its not working right...

thanks for tips guys.