Styjun

I'm currently working on a project converting some training materials from one e-learning system to another, and I'm trying to preserve original formatting where I can (especially when lists tie into images), and this has involved picking up some HTML/CSS commands to help recreate formatting (I'm keeping notes for my colleagues on functions that I'm using so they can also understand it).

In the current lesson, the list of instructions I'm working with is spreading over multiple "cards." I've mostly been able to make this work, but the current card has a graphic tie-in that I'm having some difficulty puzzling out.

What I'm trying to do on this card:

4. Instruction item 4
5. Instruction item 5
 5.1 Sub-instruction 1
 5.2 Sub-instruction 2
 5.3 Sub-instruction 3

Graphic referenced by above

6. Instruction item 6

etc.

The current code sections that I'm finding are not quite getting to that result, though.

I've been researching online (including here), and I'm finding information that helps me get to the X.Y formatting and information that gets me the changing start point, but not ways to use both in context of a multi-level list.

I can almost make this work using the below code snippet:

<style>
OL counter-reset: item 3 
LI display: block 
LI:before content: counters(item, ".") " "; counter-increment: item 
</style>
<ol>
 <li><strong>Instruction 4</strong></li>
 <li><strong>Instruction 5:</strong></li><strong>
 <ol>
 <li>Sub-item 1</li>
 <li>Sub-item 2</li>
 <li>Sub-item 3</li>
 </ol>

</strong></ol>

Instead of:
4. Instruction item 4
5. Instruction item 5
5.1 Sub-instruction 1
5.2 Sub-instruction 2
5.3 Sub-instruction 3

the above code section currently gives me:

4 Item 4
5 Item 5
 5.4 Sub Item 1
 5.5 Sub Item 2
 5.6 Sub Item 3

If I substitute "counter-reset: item" for "counter-reset: item 3" I instead get:

1. Instruction item 4
2. Instruction item 5
 2.1 Sub-instruction 1
 2.2 Sub-instruction 2
 2.3 Sub-instruction 3

Push comes to shove I could use separate lines of text and the appropriate line padding to get the desired effect (or try to change the graphics), but ideally I'd like to find a way to get the list to automatically format appropriately so we can use this for future lessons. Any assistance to help with where I'm going wrong would be greatly appreciated.

First of all, you should have your nested ol in a li.

The only allowed children of an ol are li.

Now, let's see what you can do with a second counter:

ol counter-reset: item 3
li display: block 
ol > li:before 
 content: counters(item, "") " "; 
 counter-increment: item 

ol ol 
 counter-reset: tata 0; /* Second counter */

ol ol li:before 
 content: counters(item, "") "." counters(tata, "") " "; 
 counter-increment: tata;

<ol>
 <li><strong>Instruction 1</strong></li>
 <li>
 <strong>Instruction 2:</strong> 
 <strong>
 <ol>
 <li>Sub-item 1</li>
 <li>Sub-item 2</li>
 <li>Sub-item 3</li>
 </ol>
 </strong> 
 </li>
</ol>

Counters are confusing pains, but I've sorted it out for you:

CSS

body 
 counter-reset: section;

ol 
 counter-reset: section +3;
 list-style-type: none;

li.heading::before 
 counter-increment: section;
 content: counter(section) '. ';

ol.sub-heading-wrapper 
 counter-reset: subheading;

li.sub-heading::before 
 counter-increment: subheading;
 content: counter(section) "." counter(subheading) " ";

HTML

<ol>
 <li class="heading"><strong>Instruction 4</strong></li>
 <li class="heading"><strong>Instruction 5:</strong>
 <ol class="sub-heading-wrapper">
 <li class="sub-heading">Sub-item 1</li>
 <li class="sub-heading">Sub-item 2</li>
 <li class="sub-heading">Sub-item 3</li>
 </ol>
 </li>
 <li class="heading"><strong>Instruction 6:</strong>
 <ol class="sub-heading-wrapper">
 <li class="sub-heading">Sub-item 1</li>
 <li class="sub-heading">Sub-item 2</li>
 <li class="sub-heading">Sub-item 3</li>
 </ol>
 </li>
</ol>

Basically, I create two counters. One is reset at the top of the HTML page. The second one resets for every "sub-heading-wrapper" class. Then they just increment and get squished together appropriately.