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
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css menu size increase

    thats my script of html & css

    ..............HTML..................

    <ul id="nav-top">
    <li><a href="#">Software</a> &nbsp;&nbsp;|&nbsp;&nbsp;</li>
    <li><a href="#">Your cart</a> &nbsp;&nbsp;|&nbsp;&nbsp;</li>
    <li><a href="#">Solutions</a> &nbsp;&nbsp;|&nbsp;&nbsp;</li>
    <li><a href="#">Products</a> &nbsp;&nbsp;|&nbsp;&nbsp;</li>
    <li><a href="#">Contacts</a></li>
    </ul>
    ......CSS.......

    #nav-top {
    position: absolute;
    top: 17px;
    left: 250px;
    color: #fff;
    width: 600px;
    }

    #nav-top li {
    display: inline;
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    width:75px;
    position:static;
    }

    #nav-top a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-family: tahoma, helvetica, arial, sans-serif;

    }

    #nav-top a:hover {
    text-decoration: underline;
    font-size:11px;
    }

    #nav-left {
    position: absolute;
    top: 66px; left: 26px;
    }



    I want that when mouse over on the menu's then there size increase
    & it's happened
    but the problem is that when the size increase of menu they all moves from their position
    example....
    i have 5 menus software | Your Cart | Solutions | Products | contacts
    when i put my mouse on the one of them like i put my mouse on the software then it increase it size to 10px t0 11px and its already happen but all of the other menus moves
    so what the solution of that i am currently learning css please help...
    thanks ...
    & sorry for my english

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You could try putting some sort of margin or padding on the left and right of each menu item. Then in the hover CSS - just have the margin or padding reduced. It would take some tweaking but you could mimic what you are looking for.
    -----
    C. Singsaas
    Dev Bevy

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Easier to set the menu item as a fixed width block element, then the text size increase (within reason) won't affect the width. Css something like:

    Code:
    #nav-top li {
    display: block;
    float:left;
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    width:75px;
    text-align:center;
    border-right:1px solid white}
    
    #nav-top li.last{
    border:none}
    with html:

    Code:
    <ul id="nav-top">
    <li><a href="#">Software</a></li>
    <li><a href="#">Your cart</a></li>
    <li><a href="#">Solutions</a></li>
    <li><a href="#">Products</a></li>
    <li class="last"><a href="#">Contacts</a></li>
    </ul>
    which gets rid of all those nasty spaces, and uses border-left instead of a pipe


  •  

    Tags for this Thread

    Posting Permissions

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