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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post

    Hovering over the nav buttons moves other elements

    Hey all,

    got a problem, I put in some hover buttons for my top nav, the only change is a simple shadow in the bottom of the button. when you hover over a button it moves everything inside my container.

    Why is this happening? You can check it out here, pvdemos.com
    Any advice would be appreciated.

    Thanks,
    Jon

  • #2
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    set a width for the "page" at 960px

    or

    set a width for the li
    then set a width for the ul

    I'm assuming your using li inline? you should also:

    Code:
    nav ul {
       width: 400px; /* for 5 li, 5x80=400 */
    }
    
    nav li {
       width: 80px; /* sets a defined width */
       float: left; /* pushes the li completely to the left */
       display: inline; /* inline */
    }
    you also have to either wrap the li's in a div class="clearfix" or just stick a <br clear="all"/> to fix the float problem

    edit: i just took a look at your site
    Last edited by Aurora.Light; 05-16-2011 at 03:26 AM.

  • #3
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    try defining a height for your nav li. right now, your nav li's are at 50px. when it hovers, the li becomes 72px.
    Last edited by Aurora.Light; 05-16-2011 at 03:30 AM.

  • Users who have thanked Aurora.Light for this post:

    dazd (05-16-2011)

  • #4
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Aurora.Light View Post
    try defining a height for your nav li. right now, your nav li's are at 50px. when it hovers, the li becomes 72px.
    Aurora, you are amazing lol.
    Thanks so much, gave it a height and width and works fine now. Check it out, pvdemos.com

    Also, if you would, please critique. It's the only way I'm going to get better. What would you change? Am I added things not necessary, or is there stuff I could have done in a more simple way?

    Thanks again,
    Jon

    Edit: just noticed, the social network images are links, but if you hover over the middle of them it doesn't display that it's clickable unless you hover your mouse over the bottom or top of the image. :/
    Last edited by dazd; 05-16-2011 at 05:31 AM.

  • #5
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    Code:
    ul#hover-tab {
      position: relative;
      padding: 0;
      width: 500px;
      height: 498px; 
    }
    
    #hover-tab li {
      float: left;
      list-style: none; 
    }
    
    #hover-tab li a {
      float: left;
      padding: 9px 21px;
      background-color: #eee;
      color: #999;
      font-size: 9px;
      text-align: center;
      text-transform: uppercase;
      border-right: 1px solid #fff; 
    }
    
    #hover-tab li a:hover {
      background-color: #f60;
      color: #fff;  
    }
    
    li#one a, li#one a:hover {
      background-color: #e5e5e5;
      color: #555; 
    }
    
    #hover-tab li a img {
      position: absolute;
      left: 0;
      top: 30px;
      width: 500px;
      height: 460px;
      clear: left;
      margin-left: -9999px;
      padding: 1px;
      border: 3px solid #e5e5e5; 
    }
    
    li#one a img, #hover-tab li a:hover img {
      margin-left: 0;
    }
    
    li#two a:hover img, li#three a:hover img {
      border-color: #f60; 
    }
    Last edited by Aurora.Light; 05-16-2011 at 09:30 PM.

  • #6
    Registered User
    Join Date
    Feb 2011
    Posts
    82
    Thanks
    15
    Thanked 3 Times in 3 Posts
    you can also set a z-index: 100, if its a float or of that related problem


  •  

    Posting Permissions

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