topic

Lists a la MS Word

Some time back Kukutz was interested at me as with help HTML/CSS it is possible to impose the multilevel numbered lists « as in a Word ». To that moment to me in a head has come only izvratnyj a variant of use list-style-image or background-image where numbering such as « 1.3". would be set grafikoj. Foolish idea, certainly.

But back I have recollected couple of days some remarkable CSS properties. Having looked through the specification, I have understood, that the problem is solved, thus semantics in HTML will be saved. Unique (but the most important!) restriction - absolutely correctly works an example only in Opera 7.0. I tested in earlier versions of this browser (numbering in lists is broken), and also in Mozilla 1.0 and Internet Explorer 6.0 (a priori should not work) - alas and ah. Probably, in fresher versions Gecko-based of browsers very well, I cannot say.

All is solved following CSS a code

ol> li {

display:block

}

ol> li:before {

content:counters (item, ".") ".";

counter-increment:item

}

ol {

counter-reset:item

}

Pay attention to a blank in a fragment ".". With his help we create a space between numbering and the text. CSS 2 selectors (ol> li) are used that elements of the enclosed unnumbered lists were not processed.

HTML the code turns out simple and semanticheski correct:

<ol>

<li> one

<ol>

<li> one-one

<ol>

<li> one-one-three </li>

</ol>

</li>

<li> one-three </li>

</ol>

</li>

<li> three

<ol>

<li> three-one </li>

<li> three-two </li>

<li> three-three </li>

</ol>

</li>

</ol>

The theory about counters and automatic numbering I shall not tell. To whom it is interesting - see the specification.

Thanks for attention. Was glad again you to see:-)