SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict foolios's Avatar
    Join Date
    Dec 2006
    Location
    The least technologically advanced state in the US
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird background color problem for links in a list

    Sorry, the search isn't working for me. The pages are taking a long time to come up. =(

    I was hoping I could do a rollover effect where the background color of links within a list will change color.
    I was able to make the a:hover work. The problem is that the new color that appears during the hover extends past the boundaries of the link and it's list container.
    I tried to set the links inside of a span and gave that a width in hopes it would stop this problem.

    Hasn't worked. Thank you in advance for your time.

    <code>
    /* Any a element that has lifill as its class */
    a.lifill { padding-left: 2px;
    padding-right: 100%;
    /*border: solid 1px;*/
    }

    /* a elements that are hovered over that have lifill as a class */
    a:hover.lifill { background-color: #DCDCDC;
    }
    </code>

    <code>
    <ul id="menu">
    <li><span id="mnucntnr"><a class="lifill"
    href="index.xhtml">Audio</a></span></li>
    <li><a class="lifill" href="index.xhtml">Cases</a></li>
    <li><a class="lifill" href="index.xhtml">Cooling</a></li>
    <li><a class="lifill" href="index.xhtml">Drives</a></li>
    <li><a class="lifill" href="index.xhtml">Keyboard/Mouse</a></li>
    <li><a class="lifill" href="index.xhtml">Lighting/Mods</a></li>
    <li><a class="lifill" href="index.xhtml">Memory</a></li>
    <li><a class="lifill" href="index.xhtml">Misc</a></li>
    <li><a class="lifill" href="index.xhtml">Modems/Network</a></li>
    <li><a class="lifill" href="index.xhtml">Motherboards</a></li>
    <li><a class="lifill" href="index.xhtml">Power-Supplies</a></li>
    <li><a class="lifill" href="index.xhtml">Printer-Supplies</a></li>
    <li><a class="lifill" href="index.xhtml">Processors</a></li>
    <li><a class="lifill" href="index.xhtml">Software</a></li>
    <li><a class="lifill" href="index.xhtml">Video</a></li>
    <li><a class="lifill" href="index.xhtml">Contact</a></li>
    <li><a class="lifill" href="index.xhtml">Links</a></li>
    <li><a class="lifill" href="index.xhtml">Used-Systems</a></li>
    </ul>
    </code>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    seems to work ?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    .menu{width:16em;list-style:none;}
    
    /* Any a element that has lifill as its class */
    .menu a{padding:0 2px;
    /*border: solid 1px;*/
    display:block;
    }
    
    /* a elements that are hovered over that have lifill as a class */
    .menu a:hover{background:#DCDCDC;}
    
    .menu .lifill{color:#ff0000;}
    .menu .lifill:hover{color:#ffff00;}
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    <ul class="menu">
    <li><span id="mnucntnrx"><a href="index.xhtml">Audio</a></span></li>
    <li><a href="index.xhtml">Cases</a></li>
    <li><a href="index.xhtml">Cooling</a></li>
    <li><a href="index.xhtml">Drives</a></li>
    <li><a href="index.xhtml">Keyboard/Mouse</a></li>
    <li><a href="index.xhtml">Lighting/Mods</a></li>
    <li><a href="index.xhtml">Memory</a></li>
    <li><a href="index.xhtml">Misc</a></li>
    <li><a href="index.xhtml">Modems/Network</a></li>
    <li><a href="index.xhtml">Motherboards</a></li>
    <li><a href="index.xhtml">Power-Supplies</a></li>
    <li><a href="index.xhtml">Printer-Supplies</a></li>
    <li><a href="index.xhtml">Processors</a></li>
    <li><a href="index.xhtml">Software</a></li>
    <li><a href="index.xhtml">Video</a></li>
    <li><a href="index.xhtml">Contact</a></li>
    <li><a href="index.xhtml">Links</a></li>
    <li><a href="index.xhtml">Used-Systems</a></li>
    </ul>
    
    <p><br /></p>
    
    <ul class="menu">
    <li><span id="mnucntnr"><a class="lifill" href="index.xhtml">Audio</a></span></li>
    <li><a class="lifill" href="index.xhtml">Cases</a></li>
    <li><a class="lifill" href="index.xhtml">Cooling</a></li>
    <li><a class="lifill" href="index.xhtml">Drives</a></li>
    <li><a class="lifill" href="index.xhtml">Keyboard/Mouse</a></li>
    <li><a class="lifill" href="index.xhtml">Lighting/Mods</a></li>
    <li><a class="lifill" href="index.xhtml">Memory</a></li>
    <li><a class="lifill" href="index.xhtml">Misc</a></li>
    <li><a class="lifill" href="index.xhtml">Modems/Network</a></li>
    <li><a class="lifill" href="index.xhtml">Motherboards</a></li>
    <li><a class="lifill" href="index.xhtml">Power-Supplies</a></li>
    <li><a class="lifill" href="index.xhtml">Printer-Supplies</a></li>
    <li><a class="lifill" href="index.xhtml">Processors</a></li>
    <li><a class="lifill" href="index.xhtml">Software</a></li>
    <li><a class="lifill" href="index.xhtml">Video</a></li>
    <li><a class="lifill" href="index.xhtml">Contact</a></li>
    <li><a class="lifill" href="index.xhtml">Links</a></li>
    <li><a class="lifill" href="index.xhtml">Used-Systems</a></li>
    </ul>
    
    
    </body>
    </html>

  3. #3
    SitePoint Addict foolios's Avatar
    Join Date
    Dec 2006
    Location
    The least technologically advanced state in the US
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THank you.

    I applied display: block; width: 125px;


Bookmarks

Posting Permissions

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