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
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with links

    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!

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    574
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 .
    boxer_1
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>
    The New JustaBuster Version 2.0 OR JustaBusta Lite V2.0
    ...just a special® thanx kinda hugs to jkd n' nex ...:O)))

    CommemorateWTC.com --Please lend your support

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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)))

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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