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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    How to do colored link underlines?

    On the following page, I've seen links with underlines colored differently than the text for the link. How can you do that?

    http://dhtmlkitchen.com/services/index.jsp

  • #2
    c q
    c q is offline
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    173
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I stared really hard at them but I feel they are of the same color.
    It's a new world. It's a new day.
    www.nehasaxena.com : : www.kohimaorphanage.org

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    links

    they change to a very darker grey on mouseover.

    Done using a style sheet.
    Therapy is expensive, popping bubble wrap is cheap, you choose.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yeah, same color

    I concur; the underline is slightly heavier then the text and therefore seems lighter. Since the underline is an integral part of the font used i can't see a way to set its color differently, anyway.
    Maybe toying with the border could do that.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    and the colour is

    links before mouse over are #060c08 and on hover the color goes to #25462d with an underline

    <style>
    .menuNode a{
    color: #060c08;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    padding: 0px 3px 1px 8px;
    text-decoration: none;
    white-space: nowrap;
    ;
    }
    .menuNode a:hover{
    text-decoration: underline;
    color: #25462d;
    }

    </style>

    and the link is
    <div class="menuNode"><a href="#"><p>Link name</a> </p></div>
    Therapy is expensive, popping bubble wrap is cheap, you choose.

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    Spain
    Posts
    420
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure if the original question was how to do a simple css rollover or how to change te color of the underline... Anyway. here you have a green link with an orange underline (IE)

    <style>
    .green
    {color: #009900;}
    .menuNode:hover{
    text-decoration: underline;
    color: #FFCC00;
    }
    </style>

    and the link is
    <a href="#" class="menuNode"><span class="green">Link name</span></a>
    Don't resist to assimilation. Billions of Borgs can't be wrong!

  • #7
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    the question was how to have the color of the underline be a different color than the rest of the text. what they did, was set the bottom border, like ronaldb66 suggested.

    the style rules that apply are as follows:

    .content a:link, .content a:visited {
    color: #fdffff;
    text-decoration:none;
    outline:none;
    font-weight:800;
    border-bottom: 1px solid #77e08f; }

    h2{
    font-family: Arial, "Trebuchet MS", Verdana, sans-serif;
    font-size: 17px;
    margin-bottom: 7px;
    color: #c7fff0;}
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #8
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just a little warning, i have had border-bottom problems in Netscape, the border tends to make the link "bouncy" at times.
    also does it in Opera

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #9
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that's because those browsers use the correct box model, i.e. the border adds to the overall dimensions.

    Two ways round it:

    1. Set the border to the same size all the time, but make sure it has a background color that will blend in with the background (not advisable for backgrounds that are not one plain colour)

    2. Change the size on hover, i.e. if the link is 10px high and the border is 1px, that will make it 11px. So, make sure the size on hover is set to 9px... 9px + 1px = 10px and hence no wobble

    There is a third method, you can change the box model used however I think method 2 will prove the best

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #10
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    krycek

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #11
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    heheh thanks cg9com

    I actually thought this through and realised that although using method 2 is better than method 1, you may want to alter the margins instead of the dimensions, that is, if you want the border to appear around the element as opposed to inside it.

    i.e. in my previous example, keep the height as 10px but let's say the bottom margin is 2px; we would change the margin to 1px in the hover style, so that the background would always cover the same space and we still avoid the bouncing effect

    That may well prove a better alternative to someone

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."


  •  

    Posting Permissions

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