Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by John Levy
John Levy
1,451 Points

Problems with setting up unordered list

I am having trouble setting up my unordered list. I have set it up and it works fine when the the screen is large enough but when I shrink the page down so the list falls onto two lines the first element (the home page) falls to the second line first. This then makes the first element actually the second element and the first element is stuck on the second line. How do I keep the first element on the first line so the last element (the contact page) is the first element to drop to the second line? Thanks in advance

4 Answers

Holly Logan
Holly Logan
7,142 Points
Holly Logan
Holly Logan
7,142 Points

Can you please post your markup so I can have a look?

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your response. Here is the HTML and CSS code- HTML- <nav class="nav">

<ul class="nav-list"> <li id="nav-item"><a href="contact.html">CONTACT</a></li> <li id="nav-item"><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li id="nav-item"><a href="apps.html">APPS</a></li> <li id="nav-item"><a href="ebooks.html">EBOOKS</a></li> <li id="nav-item"><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> <li id="nav-item"><a href="home2.html">HOME</a></li> </ul>

CSS- .nav { background-color: grey; font-size:16px; padding-top: 55px; padding-right: 6px; }

nav ul { margin: 4px 0px 0px 0px; width: 50%; float: right; }

#nav-item { float:right; display:inline-block; padding:0px 0px 4px 10px; }

nav-item a {

display:inline-block; color: blue;
text-decoration: none; }

nav ul { margin: 4px 0px 0px 4px; width: 58%; float: right; display: block; }

Radu Pacurar
Radu Pacurar
13,216 Points
Radu Pacurar
Radu Pacurar
13,216 Points

Hey,

First, id must be unique so you may want to change that to class. That should work.

Holly Logan
Holly Logan
7,142 Points
Holly Logan
Holly Logan
7,142 Points

Hi John, I am new(ish) to HTML too and can't figure out (after much googling) to reverse the wrap order. It's something to do with floats and there are solutions to help with reverse order online. However, from what I've learnt so far, once you reduce this to a tablet size screen, you will use media queries to set a different style for the navigation, most likely the "hamburger" sign. It's not really common design practice to have a nav menu wrap to two lines.

Anyway, that doesn't solve your problem of "home" wrapping to the next line and I can't figure it out - sorry. But I will watch this discussion to see if there is someone else out there with the solution?