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 rollover links

Discussion in 'CSS' started by ptah, Jul 5, 2005.

  1. #1
    i would like to create a rollover for links such that the background and border of the cells in which they are change, when "hovered over". the css i used is;

    #rightNav a:link, #rightNav a:visited
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000066;
    text-decoration: none;
    height: 20px;
    width: 200px;
    top: 200px;
    margin: 0px;
    padding: 0px;
    }
    #rightNav a:hover
    {
    text-decoration: none;
    width: 200px;
    background-color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    }

    how do i get the effect to work for the whole cell, not just the link text?
     
    ptah, Jul 5, 2005 IP
  2. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #2
    Hi,

    Give them all a fixed with and height (you haven't do that in the hover) and add a display:block to all of them. This should work, I think, but please post if not. Thsi is a really quick reply.
     
    tresman, Jul 5, 2005 IP
  3. Pady_flyer

    Pady_flyer Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    tresman sugested right direction, here is working example of class wich you should include in a table tag:
    table.menu a {
    width:110px;
    height: 15px;
    border:1px solid #6699cc;
    background: transparent;
    display: block;
    padding: 2px;
    text-decoration:none;
    font-size:11px;
    line-height:12px;
    font-family: Ariel, verdana, sans-serif;
    }
    table.menu a:link {
    background: transparent;
    border:1px solid ##6699cc;
    }

    table.menu a:active {
    background: transparent;
    border:1px solid #6699cc;
    }

    table.menu a:visited {
    background: transparent;
    border:1px solid #6699cc;
    }

    table.menu a:hover {
    background: #CED3D6;
    border:1px dashed ##6699cc;
    }

    fell free to experiment and play with a code :)
     
    Pady_flyer, Jul 8, 2005 IP