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 Coder
    Join Date
    Aug 2002
    Location
    New York, NY
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple colored links on a page - css

    I'm trying to have several different colored links on a page, and I know you can do this using style sheets... I just can't figure out how.

    Here's what I have....

    <STYLE TYPE-type/ccs"><!--

    Body {margin-left:0; margin-top:0; margin-right:0; margin-bottom:0; background-color: #666699}

    .sidenav1 {font-size: 12px; font-family: arial, helvetica, verdana; font-weight: bold; color: #9999CC}
    .sidenav1:link {color: #9999CC; text-decoration:underline}
    .sidenav1:hover {color: #FCDF69; text-decoration:underline}
    .sidenav1:visited {color: #9999CC; text-decoration:underline}
    .sidenav1:active {color: #9999CC; text-decoration:underline}

    .bodycopy {font-size: 12px; font-family: arial, helvetica, verdana; font-weight: normal; color: #000000}
    .bodycopy:link {color: #000033; text-decoration:underline}
    .bodycopy:hover {color: #333366; text-decoration:underline}
    .bodycopy:visited {color: #000033; text-decoration:underline}
    .bodycopy:active {color: #000033; text-decoration:underline}

    .sidenav_small {font-size: 10px; font-family: arial, helvetica, verdana; font-weight: normal; color: #999999}

    .input {color: #000000; background-color: #666699; font-size: 9px; font-family: arial, helvetica, verdana; font-weight: normal; border: 1px inset #666699; }
    .input2 {color: #000000; background-color: #666699; font-size: 9px; font-family: arial, helvetica, verdana; font-weight: normal; border: 1px inset #666699; }

    --></STYLE>
    Can anyone tell me what I'm doing wrong? I've never been good with Style Sheets....

    Jabbamonkey

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The very first line got mis-typed, it should read:

    Code:
    <STYLE TYPE="text/ccs"><!--
    Also make sure you reference each class in the appropriate tags in your html document.

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    New York, NY
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not it....

    I fixed that typo, but it still isn't working correctly.

    I know that the css sheet is working to some degree on the page (and that the style tags are in the html), because the actual text appears the correct color (Even my form input styles are fine: class="input"). BUT, whenever a link is added, the link color is the webpage default.

    I'm so confused..... Any idea what's going wrong?



    Jabbamonkey

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .sidenav1 {font-size: 12px; font-family: arial, helvetica, verdana; font-weight: bold; color: #9999CC}
    .sidenav1 a:link {color: #9999CC; text-decoration:underline}
    .sidenav1 a:visited {color: #9999CC; text-decoration:underline}
    .sidenav1 a:hover {color: #FCDF69; text-decoration:underline}
    .sidenav1 a:active {color: #9999CC; text-decoration:underline}

    .bodycopy {font-size: 12px; font-family: arial, helvetica, verdana; font-weight: normal; color: #000000}
    .bodycopy a:link {color: #000033; text-decoration:underline}
    .bodycopy a:visited {color: #000033; text-decoration:underline}
    .bodycopy a:hover {color: #333366; text-decoration:underline}
    .bodycopy a:active {color: #000033; text-decoration:underline}

    The right order is link, visited, hover, active.
    Used this way, put your class names in a <div> or <td>, not in an <a> tag.

  • #5
    New Coder
    Join Date
    Aug 2002
    Location
    New York, NY
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    As simple as that....

    Thanks alot.



    Jabbamonkey


  •  

    Posting Permissions

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