1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS.... Help Needed...

Discussion in 'Programming' started by loannet, Dec 18, 2007.

  1. #1
    I am developing this site

    www.thehomesource.com
    SEMrush
    I would prefer to have a bold underline look when hovering over my inner pages as opposed to the present block look, something similar to the way this site lnavigation looks here


    Can someone clue me in on what I am replacing to this css:

    #navigation .selected,#navigation a:hover
    {
    background:#B88C63;
    color:#333;
    text-decoration:none;
    }


    THANKS!!!
     
    loannet, Dec 18, 2007 IP
    SEMrush
  2. chaka42

    chaka42 Peon

    Messages:
    73
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this:
    
    #navigation .selected, #navigation a:hover
    {
    background:none;
    color:#333;
    text-decoration:none;
    border-bottom:2px solid #900;
    }
    
    Code (markup):
     
    chaka42, Dec 18, 2007 IP
  3. loannet

    loannet Well-Known Member

    Messages:
    636
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    #3
    Ok, that worked but I would like to tighten up the underlining to only mirror the text, can someone guide me on this...here is the full css:

    /***** Navigation *****/

    #navigation ul,#navigation li
    {
    margin:0;
    padding:0;
    }

    #navigation
    {
    background:#FFFFFF;
    color:#fff;
    font-size:1em;
    height:2em;
    line-height:2em;
    }

    #navigation li
    {
    float: left;

    list-style:none;
    white-space:nowrap;
    }

    #navigation li a
    {
    background:inherit;
    color:#990000;
    display:block;
    font-weight:bold;
    padding:0 12px;
    text-decoration:none;
    text-transform:uppercase;
    }

    * html #navigation a {width:5%;}

    #navigation .selected,#navigation a:hover
    {
    background:#white;
    color:#333;
    text-decoration:none;
    border-bottom:4px solid #B88C63;
    }

    #navigation1 ul,#navigation1 li
    {
    margin:0;
    padding:0;
    }


    THANKS!
     
    loannet, Dec 18, 2007 IP
    soju likes this.
  4. loannet

    loannet Well-Known Member

    Messages:
    636
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    #4
    Still need a little bit of help with this...thanks
     
    loannet, Dec 20, 2007 IP
  5. mortigen

    mortigen Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Are you just looking for text-decoration:underline; ? or is that not think enough?
     
    mortigen, Dec 23, 2007 IP
  6. loannet

    loannet Well-Known Member

    Messages:
    636
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    155
    #6
    Yes, I want to underline the text but for some reason the underline bar is wider than the text and I was hoping to clean this up...thx
     
    loannet, Dec 24, 2007 IP
  7. mz906

    mz906 Peon

    Messages:
    101
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    check for blank space on your markup (xhtml) before and after your link

    
    <a href="#"> link </a>
    <a href="#">link</a>
    
    Code (markup):
    or try adjusting your padding
     
    mz906, Dec 26, 2007 IP
  8. sadgirl

    sadgirl Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    work good ;)
     
    sadgirl, Dec 26, 2007 IP