Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Add a nested ordered list to the "Shapes" list item. Need help.

NEVERMIND FIGURED IT OUT. =]

lina Hernandez
lina Hernandez
4,583 Points

Im on the same question

Do we need to add <ol> ,<Li> item one</li> this this list maybe the question is the part that makes no sense

16 Answers

lina Hernandez
lina Hernandez
4,583 Points

<!DOCTYPE html> <html> <head> <title>HTML Lists Challenge</title> </head> <body>

<h1>HTML Lists Challenge</h1>

<!-- Write your code below -->

<ol> <li> Stop </li> <li>Drop </li> <li> Roll </li> </ol> <ul> <li> Shapes <li> one</li> <li>two</li> <li> Colors </li> </ul> </ul>

</body> </html>

I still can't get pass this question... not sure whats the right code for this one

lina Hernandez
lina Hernandez
4,583 Points

Add the items "Square" and "Circle" to the list nested under "Shapes".

this should work : <ul> <li>Shapes <ol>Square</ol> <ol>Circle</ol> </li> <li>Colors</li> </ul>

But of course does not, anyone has a Clue was wrong w this ?

James Barnett
James Barnett
39,199 Points

Simon Lehmann - I've removed your code, because here on the Treehouse forum we usually tree to give hints instead of just giving answers. The important thing to remember is the goal of this forum is not to get someone past a code challenge but instead to help the user learn how to solve their own issues.

Your close list item tag for your primary list must be after the close of your nested list :-

   <ul>
      <li>Shapes
       <ol>
           <li></li>
        </ol></li>
       <li>Colors</li>
  </ul>

Add the items "Square" and "Circle" to the list nested under "Shapes"

<!DOCTYPE html> <html> <head> <title>HTML Lists Challenge</title> </head> <body>

<h1>HTML Lists Challenge</h1>

<!-- Write your code below -->
<ol>
  <li>Stop</li>
  <li>Drop</li>
  <li>Roll</li>
</ol>

<ul>
  <li>Shapes
    <ol>Square</ol>
    <ol>Circle</ol>
    </li>
    <li>Colors</li>
</ul>

</body> </html>

What am i doing wrong as i keep getting an error.

James Barnett
James Barnett
39,199 Points

@Jason - It would be more helpful on the forum to leave your original post and a response to how you figured it out.

As the entire purpose of the forum if for Treehouse users to provide value to each other, otherwise you might as just email support.

James Barnett
James Barnett
39,199 Points

@David -

Keep in mind that a nested list should go between the <li> and </li> tags to be valid HTML.

Here's an example:

<ul>
    <li><a href="#">Milk</a>
       <ul>
           <li><a href="#">Goat</a></li>
           <li><a href="#">Cow</a></li>
       </ul>
    </li>
    <li><a href="#">Eggs</a>
       <ul>
           <li><a href="#">Free-range</a></li>
           <li><a href="#">Other</a></li>
       </ul>
    </li>
    <li><a href="#">Cheese</a>
       <ul>
           <li><a href="#">Smelly</a></li>
           <li><a href="#">Extra smelly</a></li>
       </ul>
    </li>
</ul>

source: http://css.maxdesign.com.au/listutorial/sub01.htm

Gerald Quinones
Gerald Quinones
2,953 Points

This is frustrating me, I know this code is right. Code is nested in order inside of shapes:

<ul> <li>Shapes</li> <ol> <li>nested ordered list inside of shapes</li> <li> second item nested inside of shapes</li> </ol> <li>Colors</li> </ul>

Christopher Navock
Christopher Navock
1,991 Points

@James "Keep in mind that a nested list should go between the <li> and </li> tags to be valid HTML"

Great Help! This comment totally unlocked the challenge for me. My nested list WASN'T inside the <li></li> tags! Boom done. Thank you!

Gerald Quinones
Gerald Quinones
2,953 Points

(<ul> <li>Shapes</li> <ol><li>this is nested in order</li></ol> <li>Colors</li> </ul>)

James Barnett
James Barnett
39,199 Points

Gerald Quinones -

I noticed a small issue with your code, my suggestion to you is to try this approach instead ...

Determine where a nested list should appear, and rather than closing a list item, begin a new list. Once the nested list is complete, close the wrapping list item and continue on with the original list.

<ol>
  <li>Walk the dog</li>
  <li>Fold laundry</li>
  <li>Go to the grocery and buy:
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Mow the lawn</li>
  <li>Make dinner</li>
</ol>

source: http://learn.shayhowe.com/html-css/ordered-unordered-definition-lists#nested-lists

Arshkit Dullat
Arshkit Dullat
1,525 Points

The best way to figure this out is to go and review the lesson on ordered and unordered lists while also reviewing the associated project files (.zip project files for each lesson are available). Atleast, thats how I was able to figure this one out. There is a nice subtlety in syntax for nested lists that one needs to capture and if you are able to catch that you'll be through with the challenge.

Jose Andrade-Sinning
seal-mask
.a{fill-rule:evenodd;}techdegree
Jose Andrade-Sinning
Python Web Development Techdegree Student 12,676 Points

I'm still a bit confused even though I figured it out. Why is it that the nested list must be in between <li> and </li> if placing nested ordered list outside visually gives you the same result.

James Barnett
James Barnett
39,199 Points

The reason you have to do it is because the HTML spec says the only valid child of <ul> element is an <li>.

If you put

<ul>
   <li>Shapes</li>
    <ol><li>this is nested in order</li></ol>
   <li>Colors</li>
   </ul>

into the W3C's HTML validator it will flag an error.

But why does it look correctly anyway, because browsers are extremely forgiving. You will never get an error message on an HTML page saying invalid markup or something similar the browser will always give its best effort.

further reading

http://rebuildingtheweb.com/en/html5-make-web-more-invalid/ http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Browsers_error_tolerance

Same error i have :
Add the items "Square" and "Circle" to the list nested under "Shapes".

I write : <ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol>

<ul> <li>Shapes</li> <ul> <li>Square</li> <li>circle</li> </ul>

</ul>

What is wrong ?

Arshkit Dullat
Arshkit Dullat
1,525 Points

Pirvan: Review the associated project files (.zip project files for each lesson are available) to compare with what you currently have and how it is given there in that example - you should see a difference in the syntax.

i donwload it, .. not work...

lina Hernandez
lina Hernandez
4,583 Points

here the right answer by copy and pasting one of the answers from this Forum, problem with this questions is missing the Words "Shape" and "Clicles" in order to answer correctly
<ul> <li>Shapes <ol>Square</ol> <ol>Circle</ol> </li> <li>Colors</li> </ul>