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 Sundeep Dornadula
Sundeep Dornadula
1,609 Points

Question on Ordered List

I want to create below kind of ordered list (list numbering created automatically)

  1. Practice 1.1 BPM technology 1.2 Cloud computing BPM 1.2.1 Market 1.2.2 Benefits
  2. See also

I tried below code, but it is generating different numbering for the list

<ol>
    <li>Practice
      <ol>
        <li>BPM Technology</li>
        <li>Cloud computing BPM
          <ol>
            <li>Market</li>
            <li>Benefits</li>
          </ol>
        </li>
      </ol>
    </li>
</ol>

resulted to :

1.Practice 1.BPM Technology 2.Cloud computing BPM
1.Market 2.Benefits 2.See also

Could some one provide suggestions on this ?

2 Answers

Cody Evans
Cody Evans
33,900 Points

Try using CSS counters in combination with the HTML for your ordered list.

There is great documentation for CSS counters on the Mozilla Developer Network.

Cody Evans
Cody Evans
33,900 Points

Sorry, I meant to say Ordered List.

Benjamin Palladino
Benjamin Palladino
13,297 Points
Benjamin Palladino
Benjamin Palladino
13,297 Points

This is possible to do using only CSS, but it won't support all of the versions of IE and some versions of other browsers may not work. I know you said you need them generated automatically although you could do something like this for your list items to make sure every browser version supports it. <li><span>1.0</span> Practice </li> <li><span>1.1</span> BPM technology </li>

Then you can set the list-style to none in your css.