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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation CSS width problem

    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.

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    In html5 the <nav> tag doesn't need <ul> and <li> inside. You should use:
    Code:
    <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
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Donkey View Post
    In html5 the <nav> tag doesn't need <ul> and <li> inside. You should use:
    Code:
    <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.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,295
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Can you how us the live site? There must be something else in there, some padding or margin pushing you past the width.

    Dave

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,020
    Thanks
    15
    Thanked 239 Times in 239 Posts
    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.


  •  

    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
    •