...

View Full Version : Different Hyperlink CSS on a page



J1mmy
03-05-2007, 12:50 AM
I have implemented two different CSS rules for one page, but I cant make them work at the same time. They are


.footerlinks
A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
A:link {color: #666666;}
A:visited {color: #666666;}
A:hover {text-decoration: none; color: #000000;}


.emaillinks
A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
A:link {color: #6633CC;}
A:visited {color: #6633CC;}
A:hover {color: #000000;}

Evertime I set the selected text to .emaillinks, the .footerlinks changes to .emaillinks too. It seems to be one or the other.

How can I use them both?

VIPStephan
03-05-2007, 12:57 AM
Looks like you're confusing CSS with JavaScript… (or is it just me because I've just studied JS the whole day?)
The correct way of writing it is:


.footerlinks a {font-family:Arial, Helvetica, sans-serif; font-size:small;color: #666;}
.footerlinks a:visited {color: #666;}
.footerlinks a:hover {text-decoration: none; color: #000;}
.emaillinks a {font-family:Arial, Helvetica, sans-serif; font-size:small; color: #63C;}
.emaillinks a:visited {color: #63C;}
.emaillinks a:hover {color: #000;}

Not the shorter/longer code is the problem but you have to specify a selector for every rule.

Arbitrator
03-05-2007, 01:02 AM
Your current (effective) code:

.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
A:link {color: #666;}
A:visited {color: #666;}
A:hover {text-decoration: none; color: black;}


.emaillinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
A:link {color: #63C;}
A:visited {color: #63C;}
A:hover {color: black;}

Probably what you want:

.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}


.emaillinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.emaillinks A:link {color: #63C;}
.emaillinks A:visited {color: #63C;}
.emaillinks A:hover {color: black;}

Increased efficiency:

A {font-family:Arial, Helvetica, sans-serif; font-size:small;}

.footerlinks A:link, .footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}

.emaillinks A:link, .emaillinks A:visited {color: #63C; }
.emaillinks A:hover {color: black;}

Context: VIPStephan beat me to the post. Posting anyway since I feel it’s still informative.

J1mmy
03-05-2007, 10:07 AM
Thanks alot!

What method should I use to implement it to my text. What I am doing now is highlighting the text, selecting the class, emaillinks for eg, and then linking it. But sometimes I still get the footerlinks CSS.

My page properties have my footerlink CSS applied to it, I think thats the problem, but it wont let me change it. It tells me its controlled by an external CSS sheet.

karinne
03-05-2007, 02:33 PM
It could also be


a.footerlinks {font-family:Arial, Helvetica, sans-serif; font-size:small;}
a.footerlinks:link {color: #666;}
a.footerlinks:visited {color: #666;}
a.footerlinks:hover {text-decoration: none; color: black;}

a.emaillinks {font-family:Arial, Helvetica, sans-serif; font-size:small;}
a.emaillinks:link {color: #63C;}
a.emaillinks:visited {color: #63C;}
a.emaillinks:hover {color: black;}

And you html would be



<a href="..." class="footerlinks">linky</a>
or
<a href="..." class="emaillinks">email link</a>

VIPStephan
03-05-2007, 04:38 PM
Thanks alot!

What method should I use to implement it to my text. What I am doing now is highlighting the text, selecting the class, emaillinks for eg, and then linking it. But sometimes I still get the footerlinks CSS.

My page properties have my footerlink CSS applied to it, I think thats the problem, but it wont let me change it. It tells me its controlled by an external CSS sheet.

What program are you using? Can we see your entire code please?

J1mmy
03-05-2007, 04:59 PM
I am using Dreamweaver.

The page code is as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="New/CSSmail.css" rel="stylesheet" type="text/css" />
<link href="New/CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: 595959;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: 000000;
}
a:active {
text-decoration: underline;
color: #6633CC;
}
-->
</style></head>

<body>
<table width="850" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="51" height="15"></td>
<td width="230"></td>
<td width="65"></td>
<td width="228"></td>
<td width="72"></td>
<td width="130"></td>
<td width="74"></td>
</tr>
<tr>
<td height="73"></td>
<td valign="top" class="emaillinks"><a href="http://google.com" class="footerlinks">emaillinks go here</a></td>
<td>&nbsp;</td>
<td valign="top" class="footerlinks"><a href="html://google.com">footerlinks go here</a> </td>
<td>&nbsp;</td>
<td valign="top"><a href="http://google.com" class="emaillinks">link2</a></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="56"></td>
<td>&nbsp;</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>


My CSS


.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}

.emaillinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.emaillinks A:link {color: #63C;}
.emaillinks A:visited {color: #63C;}
.emaillinks A:hover {text-decoration: none; color: black;}

karinne
03-05-2007, 05:15 PM
You have


<td valign="top" class="emaillinks"><a href="http://google.com" class="footerlinks">emaillinks go here</a></td>

footerlinks is overriding the emaillinks in this instance.

J1mmy
03-06-2007, 07:44 PM
Is this code written properly?


<a href="http://paypal.com/" class="weblinks">contact us</a>.

karinne
03-06-2007, 07:47 PM
looks ok to me. why?

J1mmy
03-06-2007, 07:54 PM
Becuase the CSS rule isnt working when I try to preview the page in the browser. I think something is overriding it somewhere. How can I find out if I have a CSS rule for links on the page already?

karinne
03-06-2007, 07:59 PM
Do you have something like a.weblinks in your CSS?

Do you have a link we can see?

J1mmy
03-06-2007, 08:09 PM
The CSS is on a seperate CSS file, I think there might be a CSS on that actual page though. How can I find this out?

Yes, the .weblink is there, in the CSS:


.weblinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.weblinks A:link {color: #3567cc;}
.weblinks A:visited {color: #3567cc;}
.weblinks A:hover {text-decoration: none; color: black;}


I dont have a link to the page Im afraid

karinne
03-06-2007, 08:11 PM
No ... it needs to be


a.weblinks {font-family:Arial, Helvetica, sans-serif; font-size:small;}
a.weblinks:link {color: #3567cc;}
a.weblinks:visited {color: #3567cc;}
a.weblinks:hover {text-decoration: none; color: black;}

J1mmy
03-06-2007, 08:12 PM
So, this isnt right either, posted by Arbitrator? This is where I got it from in the first place.


.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}

Arbitrator
03-07-2007, 07:02 AM
So, this isnt right either, posted by Arbitrator? This is where I got it from in the first place.


.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}I was just updating the code you had shown; you didn’t show a full source tree until post 7 (http://www.codingforums.com/showpost.php?p=542005&postcount=7). If your code is still like it is in post 7 (http://www.codingforums.com/showpost.php?p=542005&postcount=7), then that code is correct. To make it a bit more clear, this is the same as what you quoted:


td.footerlinks a {font-family:Arial, Helvetica, sans-serif; font-size:small;}
td.footerlinks a:link {color: #666;}
td.footerlinks a:visited {color: #666;}
td.footerlinks a:hover {text-decoration: none; color: black;}

To make it easier to understand how this works, take the td.footerlinks a:hover selector, for example.

The first part says to select any element (example elements: a, td, and body) with the class of footerlinks. The td in front of the period means that you only want to target table data cell (td) elements with that class; if you don’t care what element has the class attached to it, you don’t put one or you use a universal selector (*)—which stands for all elements—instead.


td.footerlinks /* select all "td" elements with the "footerlinks" class */
a.footerlinks /* select all "a" elements with the "footerlinks" class */
.footerlinks /* select any element with the "footerlinks" class */
*.footerlinks /* select any element with the "footerlinks" class (same as above) */
.footerlinks.emaillinks /* select any element with both the "footerlinks"
and "emaillinks" classes; not supported in IE6 */

The second part says to select anchor (a) elements when hovered upon. :hover is called a pseudo-class. You can actually attach it to any element, but most people only use the anchor element with it since Internet Explorer 6 is too old and doesn’t support it correctly.


a:hover /* select "div" elements when hovered upon */
td:hover /* select "td" elements when hovered upon */
div:hover /* select "div" elements when hovered upon */
span:hover /* select "span" elements when hovered upon */

The part in between the two halves, with td.footerlinks being the first half and a:hover being the second half, is a space character (white-space). The space character in this context is called the descendant combinator. It means to select all descendants of the first half that match the second half; in other words, the selector a:hover only matches if it’s inside (a descendant of) an element that matches td.footerlinks.

This is why your CSS rule in post 13 (http://www.codingforums.com/showpost.php?p=542002&postcount=13) doesn’t work. It says to select A elements only when inside of any element with the weblinks class assigned to it. So:


<div class="weblinks"><a></a></div> <!-- this would match -->
<div><a class="weblinks"></a></div> <!-- this would not match -->

This is why you need to do what karinne showed in post 14 (http://www.codingforums.com/showpost.php?p=542005&postcount=14). Her first selector says to target anchor elements with the class of weblinks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum