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:
OL { counter-reset: item 3 }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
- Instruction 4
- Instruction 5:
- Sub-item 1
- Sub-item 2
- Sub-item 3
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.
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
