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 to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Bar Hover Problem

    Hi guys,

    keep in mind I am still pretty new at coding, so I am not sure if this is a dumb question.

    Here is the situation: I have a horizontal navigation bar (with only three list items/links). The navigation bar itself spreads across the width of the screen, and is 40px high. Each of the three links are centered in the bar (so there is space above and below the text itself), and then there is 40px of space between each link (padding).

    So my problem is this: when I hover over one of three of those links, I want the area to turn into a different color. When I set the hover for just the <li>, then the background color will change colors across the entire width of the link, but the space ABOVE the actual text (the space between the top of the nav bar and the text itself) does not change color.

    When I set the hover for just the <a> links themselves, then the whole area above and below changes color, but the padding to the right of the link (the space in between the next link) does NOT change color.

    so the question is this: how do I get the background on the navbar to change spanning across the top to the bottom, and then the entire width of the <li>?

    Here is all CSS regarding the #mainNav. Again, sorry if it is amateur:

    [CODE]

    #mainNav {
    border: 1px solid #FFFFFF;
    height: 40px;
    list-style: none outside none;
    margin-top: 115px;
    margin-left: 175px;
    padding: 0 0 0 32px;
    background: #8AB8E6;
    width: 70.5%;
    display: block;
    position: absolute;
    }
    #mainNav li {
    display: inline;
    float: right;
    height: 40px;
    text-decoration: none;
    font-size: 14px;
    font-family: "Arial";
    color: white;
    font-weight: bold;
    padding-right: 50px;
    text-align: center;
    }

    #mainNav li:hover {
    background-color: #6E93B8;
    }

    #mainNav li a {
    text-decoration: none;
    color: white;
    height: 40px;
    }

    #mainNav a:hover {
    background-color: #6E93B8;
    padding-top: 15px;
    padding-bottom: 15px;
    }

    [CODE]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not certain without your html, but it sounds like you might want to change this:

    Code:
    #mainNav a:hover {
    background-color: #6E93B8;
    padding-top: 15px;
    padding-bottom: 15px;
    }
    to this:

    Code:
    #mainNav li:hover a {
    background-color: #6E93B8;
    padding-top: 15px;
    padding-bottom: 15px;
    }
    If I've misunderstood, then a link to your page would be best.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    give us the live URL so we can help you better..


  •  

    Posting Permissions

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