Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Different Hyperlink CSS on a page

    I have implemented two different CSS rules for one page, but I cant make them work at the same time. They are

    Code:
    .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?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,867
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    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:
    Code:
    .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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Your current (effective) code:
    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:
    Code:
    .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:
    Code:
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Last edited by J1mmy; 03-05-2007 at 02:25 PM.

  • #5
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It could also be

    Code:
    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

    Code:
    <a href="..." class="footerlinks">linky</a>
    or
    <a href="..." class="emaillinks">email link</a>
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,867
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Quote Originally Posted by J1mmy View Post
    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?

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I am using Dreamweaver.

    The page code is as follows:

    Code:
    <!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

    Code:
    .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;}

  • #8
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You have

    Code:
    <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.
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #9
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Is this code written properly?

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

  • #10
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    looks ok to me. why?
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #11
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you have something like a.weblinks in your CSS?

    Do you have a link we can see?
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #13
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:

    Code:
    .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

  • #14
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No ... it needs to be

    Code:
    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;}
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #15
    Regular Coder
    Join Date
    Apr 2006
    Location
    UK, England
    Posts
    268
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So, this isnt right either, posted by Arbitrator? This is where I got it from in the first place.

    Code:
    .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;}


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •