Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Sep 2011
    Location
    South Africa
    Posts
    142
    Member #
    29386

    Set the background color for hover effect

    Hi All.

    Just having a problem with setting the background color on the hover state. The problem is that when I change the css the entire thing shifts to the left. I am using a fluid grid with this layout

    The HTML code

    HTML Code:
    <div id="container">
    
    <div class="head">
    <nav>
        <ul class="sideNav">        
              <a href="index.html"><li>Home</li></a>        
              <a href="portfolio.html"><li>Portfolio</li></a>        
              <a href="services.html"><li>Services</li></a>       
              <a href="about.html"><li>About</li></a>        
              <a href="contact.html"><li>Contact</li></a>   
        </ul>
    
    </nav>
    </div>
    </div>
    <!-- container -->
    The CSS code:

    Code:
    @charset "utf-8";/* CSS Document */
    
    
    body { 
        margin:0em;
        background-color:#fff;
        color:#272727;
    }
    #container {
        margin:0px;
        width:100%
    }
    .head {
        width:100%;
        height:240px;
        margin:auto;
        background-color:#272727;
    }
    nav {
        margin:0px;
        float:left;
        width:200px;
        height:auto;
    }
    
    
    .sideNav li {
        width:200px;
        height:auto;
        margin: 0px 0px 0px -40px;
        list-style:none;
        padding:15px 0px 15px 60px;
        background-color: #F7F7F7;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        border-bottom: 1px solid #D1D1D1;
        border-right: 1px solid #D1D1D1;
    }
    a:link {
        color: #272727;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #272727;
    }
    a:hover {
        text-decoration: none;
        color: #474747;
        background-color:#G1G1G1; 
        width:200px;
        height:auto;
    }
    a:active {
        text-decoration: none;
    }
    a {
        font-size: 14px;
    }

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    your size and shape and background color definitions of the "normal" state should be defined on the li.a DIV...

    only the "background-color" change should be defined on the li a:hover DIV as the color is the ONLY thing you want to change on the hover


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:23 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com