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 4 of 4

Thread: Navbar problem

  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Navbar problem

    Ref: http://www.moderntimes.com/tmp/
    Can someone please tell the way to make these buttons appear on a single line? I've exhausted all my sources, and nothing.
    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Nice design.
    Anyway, the code can't work because obviously there is not enough space for five buttons to fit. And it's very clear why:

    Code:
    ul#navlist li
    {
    display: block;
    float: left;
    width: 25%;
    margin-left: 0;
    padding: 0;
    }
    100% / 25% = 4
    So you made the buttons so wide that only four of them can fit in a row. For five buttons you need 20%.

    And if you also want all words in a line you should increase the width of the navcontainer up to at least 600px:
    Code:
    #navcontainer
    {
    width:600px;
    ...
    }
    There is also a lot of unnecessary CSS (in red) wich you can delete:

    Code:
    ul#navlist
    {
    display: inline;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    }
    
    ul#navlist li
    {
    display: block;
    float: left;
    width: 20%;
    margin-left: 0;
    padding: 0;
    }

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    REF:http://moderntimes.com/tmp

    Hi VIPStephan,
    Thanks for the complements. yes, I've tried to increase the width of the navcontainer, but as you can see it just make the buttons smaller, but doesn't solve my problem of getting all the buttons on a single line.

    thanks.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    REF: http://moderntimes.com

    I changed the navcontainer width, and reduced the ul navlist li. I got all the buttons on a single line, but as you can see the boxes have shrunk? Really frustrating.

    Thanks


  •  

    Posting Permissions

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