...

View Full Version : Navbar problem



michael180
12-17-2006, 07:03 AM
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

VIPStephan
12-17-2006, 10:30 AM
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:



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:


#navcontainer
{
width:600px;
...
}


There is also a lot of unnecessary CSS (in red) wich you can delete:



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;
}

michael180
12-17-2006, 05:19 PM
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.

michael180
12-17-2006, 06:35 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum