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
    311
    Thanks
    1
    Thanked 35 Times in 35 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,138
    Thanks
    7
    Thanked 257 Times in 256 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
    1,899
    Thanks
    15
    Thanked 226 Times in 226 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
    •