problem with links

comicw · 07-14-2002, 01:49 PM

Hi,

I'm currently building a site and I've got a problem: I've made a table in which I've put links in one colour (light gray), but the links in my text have to get another colour (because light gray on a white background is practically unreadable). Does anybody know how to 'create' 2 different kind of coloured links?

Thanks!

boxer_1 · 07-14-2002, 01:58 PM

Hi, you can set classes to apply different styles to different links. You should define all states of your links in the order in the example below:

<style type="text/css">
A.reg:link {
font-family: "Arial";
color: #ffff00;
font-weight: 600;
font-size: 12pt;
text-decoration: none;
}

A.reg:visited {
font-size: 12pt;
font-family: "Arial";
color: #ffff00;
font-weight: 700;
text-decoration: none;
}

A.reg:hover {
font-size: 12pt;
font-family: "Arial";
color: #ff0000;
font-weight: 700;
text-decoration: underline;
}

A.reg:active {
font-size: 12pt;
font-family: "Arial";
color: #ff0000;
font-weight: 700;
text-decoration: underline;
}

A.diff:link {
font-family: "Verdana";
color: #ffff00;
font-weight: 600;
font-size: 12pt;
text-decoration: none;
}

A.diff:visited {
font-size: 12pt;
font-family: "Verdana";
color: #ffff00;
font-weight: 700;
text-decoration: none;
}

A.diff:hover {
font-size: 12pt;
font-family: "Verdana";
color: #ff0000;
font-weight: 700;
text-decoration: underline;
}

A.diff:active {
font-size: 12pt;
font-family: "Verdana";
color: #ff0000;
font-weight: 700;
text-decoration: underline;
}
</style>

Then you would set your links up like this:

<a class="reg" href="whatever.html>Reg links</a>

<a class="diff" href="whatever.html>Diff links</a>

Good luck

.

justame · 07-14-2002, 02:04 PM

com...
avakiana just a does® it this way...
One way is to put a code like this in the head section.
<style type="text/css">

</style>
And then use the class="myway1" , or class="myway1"

n' the gunny just a does® it like this...
<style type="text/css">


.newlink{color:"#ffffff" ! important; text-decoration:"underline" ! important}


-->
</style>
<html>
<head>
<title>Test Style</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="#006600">
<a href="page1.html">Link 1</a><br>
<a href="page1.html" class="newlink">Link 2</a><br>
</body>
</html>

orrr as frederick says...
See WDG's FAQ at http://www.htmlhelp.com/faq/html/links.html#link-2color .

n' lastly but certainly nottt just a leastly®...iri says...
<html>
<head>
<style>
a:link, a:visited, a:active {color: blue;}
a:hover {color: orange;}
a.other:link, a.other:visited, a.other:active {color: purple;}
a.other:hover {color: green;}
</style>
</head>
<body>
<a class="other" href="a.htm">other link, purple</a>
<a href="a.htm">normal link, blue</a>
</body>
</html>

justame · 07-14-2002, 02:06 PM

just a whispering® to box...
oppps...didnt just a see® your post there when /me was gone n' just a collecting® alll her different methods...hehehe...

com...
n' you can just a dd® boxers way tooo to the just a suggestions® :O)))

BrainJar · 07-14-2002, 07:13 PM

If your "normal" text does not appear in any tables then there is an easier solution:

a { color: blue; }
table a { color: green; }

The above would make any links within a table green while all others would be blue. You wouldn't need to add a class attribute to each link.