HTML/CSS Outline numbering

Question

In html/css can I achieve this?

1.
1.1
1.2
2.
2.1
2.2

using LI and UL tags?

Answer 1

Yes, see: https://developer.mozilla.org/en/CSS_Counters But it doesn't work on all browsers/

Answer 2

There's no cross-browser way of doing it.

The best you can achieve is nested ordered lists:

<ol>
    <li>Item 1
        <ol>
            <li>Subitem 1</li>
        </ol>
    </li>
</ol>

and then style each nested list to have a different type:

ol {
    list-style-type: upper-roman;
}
ol ol {
    list-style-type: decimal;
}

Hope this helps!

Answer 3

Consider using DL/DT/DD instead of OL/UL and hard-code the values in the DT.

Answer 4

CSS 2.1 provides user-definable counters, which can be used to count elements. Combined with the :before and :after pseudo-classes, you can output the counter value to create automatically numbered headings.

Unfortunately, at least Internet Explorer does not support any of this, even in the latest version. But at least Firefox does support it very well, so if you just want to add it as a enhancement which does not make your site unusable if it is not supported, you can still use it.

Answer 5

For CSS2 compliant browser's you could use

ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }

ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }

Answer 6

http://www.w3.org/TR/CSS2/generate.html

But, yeah, this is for modern browsers only. Nested OLs is probably the way to go.