...

View Full Version : CSS width problem



Sylvain_
07-29-2012, 01:24 AM
I have a wrapper of 960px. Inside this wrapper there is a nav of 100%, so it should also be 960px. i have a nav with this structure:

<nav>
<ul>
<li><a class="active">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="feeds.html">Feeds</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

when i set nav ul li to 20%, it should divide the nav in 5 equal parts, in my opinion. but the last li is moved to the next line, outside the nav.

Does anyone now why? And is there somebody who has a solution to this problem?

Thanks in advance.

Donkey
07-29-2012, 01:41 AM
In html5 the <nav> tag doesn't need <ul> and <li> inside. You should use:


<nav>
<a class="active">Home</a>
<a href="portfolio.html">Portfolio</a>
<a href="downloads.html">Downloads</a>
<a href="feeds.html">Feeds</a>
<a href="contact.html">Contact</a>
</nav>

Then use CSS to format the nav a property

Sylvain_
07-29-2012, 02:00 AM
In html5 the <nav> tag doesn't need <ul> and <li> inside. You should use:


<nav>
<a class="active">Home</a>
<a href="portfolio.html">Portfolio</a>
<a href="downloads.html">Downloads</a>
<a href="feeds.html">Feeds</a>
<a href="contact.html">Contact</a>
</nav>

Then use CSS to format the nav a property

thanks, i changed it, but it doesn't really solve the problem.

tracknut
07-29-2012, 04:03 AM
Can you how us the live site? There must be something else in there, some padding or margin pushing you past the width.

Dave

DrDOS
07-29-2012, 04:08 AM
When you have five items that you want to fit in a 100% width, you might try setting them to 19%, or even less, to allow for borders and such. Especially if you're floating them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum