...

View Full Version : multiple a:link with different colors in css help



cbblstone
09-20-2007, 03:53 PM
Very new to css and cant seem to find anything regarding having different size and color links using css for my web page. Id like to have blue links on page, and white links in the bottom of my page where theres a blue background. How is this done? Ive tried using the following but it only reverts to first a:link settings.
this code here overrides all my links settings on page.
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
text-decoration: underline;
}
a:visited {
font-size: 12px;
font-weight: bold;
color: #000000;
}


Id lie this code below to override above in bottom of web page only.
}
.afooter:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF9900;
text-decoration: underline;
}
.afooter:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF9900;
text-decoration: underline;
}
.afooter:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #333333;
text-decoration: underline;
}
.afooter:visited {
font-size: 10px;
font-weight: bold;
color: #000000;
}

I must have .afooter:link wrong. Any help with this please?

_Aerospace_Eng_
09-20-2007, 03:56 PM
We need to see your html as well.

cbblstone
09-20-2007, 04:03 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Personal Webpage </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<table width="741" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutDefaultTable-->
<tr class="styles">
<td height="102" colspan="2" valign="top" bgcolor="#0000FF">Main graphic goes
here</td>
</tr>
<tr class="styles">
<td width="155" height="258" valign="top"><p>Place my links here</p>
<p><a href="index.htm">home</a></p>
<p><a href="bio.html">bio</a></p>
<p><a href="friends.html">friends</a></p>
<p><a href="contact.htm">contact</a></p></td>
<td width="586" valign="top">my main content will go here</td>
</tr>
<tr bgcolor="#0000FF">
<td height="94" colspan="2" valign="top">
<p align="center"><a href="index.htm">home</a> : <a href="bio.html">bio</a> :
<a href="friends.html">friends</a> : <a href="contact.htm">contact</a>
: </p>
<p>place links here and any credits, address, coptright etc. </p>
</td>
</tr>
</table>
</body>
</html>

VIPStephan
09-20-2007, 04:42 PM
And where in the HTML is the class afooter that you are referring to in the CSS? You need to apply this class to the links that are supposed to look differently.

Better would be to apply one ID to the footer section and address links within the footer like so:



#footer a {…}


Also the CSS you’ve written above could be trimmed down a lot to something like:


a {
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: underline;
}


.afooter {
font-size: 10px;
color: #FF9900;
}
.afooter:visited {
color: #000000;
}
.afooter:hover {
color: #333333;
}


You only need to overwrite style if the actually change. And :visited must come before :hover.

marilynn.fowler
09-22-2007, 11:31 AM
I divide my documents into logical sections--i.e., header, nav, maincontent, footer--then write css styles for each section, like so:

#header a:link, #header a:visited { color: blue; }
#header a:hover{ color: red; }
#header a:active { color: pink }

#footer a:link { font-weight: bold; color: white; text-transform:uppercase; }
etc.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum