Best practice: Multi-level lists

[jbananak]

Hi
I am defining a new template in which I need at least two list levels for ordered lists <ol> and for unordered lists <ul>.
So, in the past, I used the same <ol class="one"> style inside another <ol class="one"> style for second level because the second level uses the alignment of the first level as its zero point and has the same font and indent from zero. Obviously not good practise if I one day decide I want different indents/fonts etc in the second level.
However, now I have to define new style's (and implement them) I'm wondering what is better:
1. My second level will have a different name (e.g. <ol class="one"> and <ol class="two">) but with exactly the same properties. In this case, I need to make sure that each time I start a second level list (<ol class="two">) that it is inside the <li> of the outside list (<ol class="one">)

Code: Select all

<ol class="one">
<li>xxx</li>
<li>xxx
 <ol class="two">
<li>xxx</li>
<li>xxx</li>
</ol></li>
<li>xxx</li>
</ol>

2. My second level <ol class="two"> is defined with a double-indent and 'in the code' is located outside the first level <ol class="one"> and I continue the <<ol class="one">> after the <ol class="two"> is closed using a start number:

Code: Select all

<ol class="one">
<li>xxx</li>
<li>xxx</li>
</ol>
 <ol class="two">
<li>xxx</li>
<li>xxx</li>
</ol>
<ol class="one" start="3">
<li >xxx</li>
</ol>

Which is better/correct and why?
Thank you.

[NorthEast]

The structure in (1) is correct; the second level list should be nested inside the list item (li) tag.
To create this structure in Flare's XML editor, just use the indent/outdent buttons.

I don't understand why you are using class names for the lists though; just use something like this:

Code: Select all

ol
/* styles for first-level list */
{
   list-style-type: decimal;
}

ol ol,
ul ol
/* styles for second-level list */
{
   list-style-type: lower-alpha;
}

That will set first-level lists to use 1,2,3 (decimal) numbering and second-level lists to use a,b,c (lower-alpha) numbering.

You just need to set the margin/padding on the first level list (ol), so the second level will be indented by the same amount from the first level.

More information in this post:
viewtopic.php?f=12&p=79643