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.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple a:link with different colors in css help

    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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    We need to see your html as well.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <!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>

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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:

    Code:
    #footer a {…}
    Also the CSS you’ve written above could be trimmed down a lot to something like:
    Code:
    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.

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

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