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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Rollover Effect for Links in CSS

    First, I would like to apologize for my lack of knowledge and experience in dealing with css. This is my first website and the coding may not be entirely logical.
    The website is www.palousehillscomputing.com and is in the very beginning stages of its creation. What I would like to achieve is a white background for each link when it is hovered over, without moving the other links over. Ideally, I would like the white rollover to cover all empty space between the links. For example, when rolling over the "services" link, I would like the white background to start at the "products" link and at the beginning of the "about us" link (all without the links moving when doing a rollover). I hope this is somewhat clear... Here is my css:

    Code:
    body {background-color: #900;}
    
    
    #header { width: 900px; height: 160px; padding: 0; background-image: url(../images/header.jpg);margin: auto; overflow: hidden; border: 2px solid white; z-index: 1;}
    #headart { background-image: url(../images/header.png); height: 160px; width: 900px;}
    #nav{ position: relative; top: 135px; left: 200px; margin: 0; padding: 0; z-index: 3;}
    #nav ul { color: white; list-style: none; margin: 0; font-size: 21px; }
    #nav ul li { display: inline; padding: 0 10px 0 10px;}
    a.nav:link {color: white; text-decoration: none; }
    a.nav:visited {color: white; text-decoration: none; }
    a.nav:hover {color: #900; text-decoration: none; padding: 7px 5px 0 5px; background-color: white;}
    a.nav:active {color: white; } 
    
    
    .main { background-color:#FEE0B8; color: #B00400; font-size: 24px; text-align:center; height: 450px; width: 900px; margin: auto; border: 2px solid white; padding: 20px 0;}
    
    #welcome {color: black; font-size: 17px; float: left; max-width: 40%; height: auto; padding: 10px; border: solid 1px; border-color: #F00; margin: 0 20px 0 20px;}
    .h3 {padding-bottom: 5px; margin: 0; }
    
    #new { float: left; border: solid 1px red; width: 400px; height: 200px;}
    
    #footer { height: 100px; margin: auto; width: 900px; background-image:url(../images/header.jpg); border: solid white 2px;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello insafeuste,
    That's a great job on your first site!

    I didn't check your code to see if it's valid but I'm sure you can benefit from using the validators. Have a look at the links about validation in my signature line below.

    To make your menu work as you describe, I made a small change in your markup -
    Code:
    <div id="header">
     <div id="headart">
      <!--<div id="nav">-->
     <ul id="nav">
    <li> <a class="nav" href="http://www.hotmail.com">Home</a></li>
    <li> <a class="nav" href="http://www.hotmail.com">Products</a> </li>
    <li> <a class="nav" href="http://www.hotmail.com">Services</a></li>
    <li> <a class="nav" href="http://www.hotmail.com">About Us</a></li>
    <li> <a class="nav" href="http://www.hotmail.com">Contact</a></li>
     </ul>
     <!--</div>-->
    </div>
    
    </div>
    And some new CSS to go along with it -
    Code:
    body {background-color: #900;}
    
    
    #header { 
    width: 900px; 
    height: 160px;
    margin: auto;  
    padding: 0; 
    background: url(../images/header.jpg);
    border: 2px solid #fff; 
    }
    #headart { 
    height: 160px; 
    width: 900px;
    background: url(../images/header.png); 
    overflow: auto;
    }
        /*#nav{ position: relative; top: 135px; left: 200px; margin: 0; padding: 0; z-index: 3;}*/
    ul#nav { 
    margin: 130px 0 0 200px; 
    list-style: none; 
    }
    ul#nav li { 
    float: left; 
    font-size: 21px;
    }
    ul#nav li a {
    line-height: 30px;
    display: block;
    text-decoration: none;
    padding: 0 25px 0 25px;
    }
    a.nav:link, a.nav:visited {color: #fff;}
    a.nav:hover, a.nav:active {color: #900; background: white;}
    
    
    
    .main { background-color:#FEE0B8; color: #B00400; font-size: 24px; text-align:center; height: 450px; width: 900px; margin: auto; border: 2px solid white; padding: 20px 0;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much, that will do the trick! I hope you dont mind if i bug you again some time down the road as I'm sure I'll be running into some new road blocks..


  •  

    Posting Permissions

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