PDA

View Full Version : 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!:thumbsup:

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">
<!--
.myway1 {
color:#xxxxxx;font-size:xxpx;
},
.myway2 {
color:#xxxxxx;font-size:xxpx;
},
-->
</style>
And then use the class="myway1" , or class="myway1"

n' the gunny just a does® it like this...
<style type="text/css">
<!--
body{scrollbar-highlight-color:"#003300"; scrollbar-shadow-color:"#003300";
scrollbar-track-color:"#000000";
scrollbar-darkshadow-color:"#000000"; scrollbar-base-color:"#006600"}

a:hover, a:active{background:"#000000"; color:"#006600"; text-decoration:"none"}
a:visited{text-decoration:"none"}
a{color:"#000000"; text-decoration:"none"}
<!-- The above three lines are the default styles for links. Since hover and active are the
same one style can be applied to both. These are the styles used by Link 1 (below). -->

.newlink{color:"#ffffff" ! important; text-decoration:"underline" ! important}
<!-- The above style is used to override the default style. This is used by Link 2 (below)
as a class attribute to apply this styling. -->

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