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 Derek Volmering
Derek Volmering
1,293 Points

html list challenge [resolved]

I am working on the challenge for the html section "lists". I am on task 5 of 6 and it asks me to "Add a nested ordered list to the "Shapes" list item. Your code from each task should be added to the code written in the previous task."

I don't know what more to do, I have done exactly what is asks, but it is still wrong. Here are my submits that are coming up wrong.

Attempt 1:

 <ol>
     <li>Stop</li>
     <li>Drop</li>
     <li>Roll</li>
</ol>


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

Attempt 2:

 <ol>
     <li>Stop</li>
     <li>Drop</li>
     <li>Roll</li>
</ol>


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

Attempt 3:

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

Help please

9 Answers

Derek Volmering
Derek Volmering
1,293 Points
Derek Volmering
Derek Volmering
1,293 Points

nvmnd i believe i figured it out..the </li> needs to be after the </ol> within the list item shapes.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Derek - Looks like you figured it out. The reason that's the right answer is because, the operative word here is nested, which means create a list inside of another list.

The thing to keep in mind is that the only valid child element of an ul is an li, so if you want to nest a ol inside of a ul it firsts has to be nested inside of an li

     <ul>
        <li></li>
        <li>
            <ol>
                <li></li>
                <li></li>
            </ol>
        </li>
        </li></li>
    </ul>
Carlo Petermann
Carlo Petermann
4,531 Points
Carlo Petermann
Carlo Petermann
4,531 Points

I'm having same issue.

My attempt is like Derek's first which gives a good output. Your syntax James fails as well along with a strange output and makes challenge question 4 fail as it adds a bullet point.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Carlo - Can you post the code you most recently tried. Remember to indent each line of code 4 spaces when posting on the forum so it will show up correctly on the forum.

Carlo Petermann
Carlo Petermann
4,531 Points
Carlo Petermann
Carlo Petermann
4,531 Points 
  <ol>
      <li>Stop</li>
      <li>Drop</li>
      <li>Roll</li>
  </ol>
  <ul>
      <li>Shapes</li>
          <ol>
              <li>Round</li>
              <li>Square</li>
          </ol>  
      <li>Colors</li>
  </ul>
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Carlo - The ol needs to be nested inside the shapes li.

What you wrote is not valid HTML.

If you want to nest a <ol> inside of a <ul> it first has to be nested inside of an <li>

Carlo Petermann
Carlo Petermann
4,531 Points
Carlo Petermann
Carlo Petermann
4,531 Points

This way?

  <ol>
      <li>Stop</li>
      <li>Drop</li>
      <li>Roll</li>
  </ol>
  <ul>
      <li>Shapes</li>
      <li>  
          <ol>
              <li>Round</li>
              <li>Square</li>
          </ol>
      </li>  
      <li>Colors</li>
  </ul>
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

When nesting a list the <ol> should go between the <li> and </li> tags to be valid HTML.

example:

<ul>
    <li>To learn HTML</li>
    <li>
        To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>To the little talking duck in my brain</li>
        </ol>
    </li>
    <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

source: http://www.htmldog.com/guides/htmlbeginner/lists/

Carlo Petermann
Carlo Petermann
4,531 Points
Carlo Petermann
Carlo Petermann
4,531 Points

Now I get it...

I guess what is confusing is that my first try and the correct answer both give the same output..

Thanks!