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 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    79
    Thanks
    45
    Thanked 0 Times in 0 Posts

    Navigation bar problem

    Why does the text moves when I hover over it?
    <ul>
    <li> <a href="#">Home </a> </li>
    <li> <a href="#"> Videos</a> </li>
    <li> <a href="#"> Guides</a> </li>
    <li> <a href="#"> Tutorials</a> </li>
    <li> <a href="#"> Contacts</a> </li>
    </ul>


    #nav ul{width:600px;height:30px;display:block;}
    #nav ul li{float:left;list-style:none;}
    #nav ul li a{display:block;padding:0 25px;text-decoration:none;color:black;}
    #nav ul li a:hover{background-color:grey;border:2px solid grey;border-radius:2px;}

    Please

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning h123er2,
    When adding a hover effect you should change as little as possible. By adding that border, you change the size of the anchor and the text moves.

    The solution would be to have a border on the :link state as well. That way the appearance of the :hover border doesn't change the size of things.

    Your :link state border can be transparent.
    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


  •  

    Posting Permissions

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