User Experience

Outline numbering

Freshness Warning
This blog post is over 21 years old. It's possible that the information you read below isn't current and the links no longer work.

7 Aug 2003

Site membership agreements and other legal documents typically use outline numbering. Outline numbering can be accomplished on the Web by using nested ordered lists and a bit of CSS. Nest ordered lists several levels deep and then simply define a list style for each level of the list.


<ol>
    <li>Item 1</li>
    <li>Item 2
        <ol>
            <li>Sub paragraph 1
                 <ol>
                     <li>Ad nauseum</li>
                 </ol>
             </li>
        </ol>
    </li>
</ol>

And the CSS would be:

&lt;style type="text/css">
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
&lt;/style>

Comments

Riccardo
August 8, 2003 2:12 AM

If you want to be standard-compliant there is a problem. You have to nest each sublist in a li element to validate. This create an ugly effect on numeration that continues on the fake li. So you have to use more css to restore the right numeration, I haven't yet tried, I only nest unordered list. They are simpler ;) Sorry for my rusted english

Adam Kalsey
August 8, 2003 8:43 AM

In my example each item is nested in an LI. The numbering problem is avoided because the sublist is nested directly inside its parent item. That's the way you're supposed to do it, not create a new list item for your child lists. This validates as XHTML 1.1. http://validator.w3.org/check?uri=http%3A%2F%2Fkalsey.com%2Ftools%2Fcss%2Foutline.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1

Scott Johnson
August 8, 2003 1:40 PM

This seems like an interesting method for creating outlines. Do you have a sample page that employs the technique?

Adam Kalsey
August 8, 2003 1:50 PM

http://kalsey.com/tools/css/outline.html

Clint Laskowski
August 11, 2003 9:34 AM

If you use HTML-Kit, there is a plugin called "IncludeHTML" at http://rosenlundnielsen.dk/software/product_includehtml.php. IncludeHTML can be set to automatically number outlines, up to four levels deep.

Luis
October 13, 2004 5:09 PM

It seems that most HTML tutorials don't address one obvious question: Is it possible, using HTML ordered lists, to create an outline menu like this: 1. fdsag 1.1. gsag 1.2. fsada 2. gfehtr 2.1. hytjytr 2.1.1. gweht 2.2. hgfdh ... etc.... If not, is there some appropriate way to do it (other than cheating by typing the numbers directly)? Thanks, Luis

This discussion has been closed.

Recently Written

Roadmap Outcomes, not Features (Sep 4)

Drive success by roadmapping the outcomes you'll create instead of the features you'll deliver.

Different roadmaps for different folks (Sep 2)

The key to effective roadmapping? Different views for different needs.

Micromanaging and competence (Jul 2)

Providing feedback or instruction can be seen as micromanagement unless you provide context.

My productivity operating system (Jun 24)

A framework for super-charging productivity on the things that matter.

Great product managers own the outcomes (May 14)

Being a product manager means never having to say, "that's not my job."

Too Big To Fail (Apr 9)

When a company piles resources on a new product idea, it doesn't have room to fail. But failing is an important part of innovation. If you can't let it fail, it can't succeed.

Go small (Apr 4)

The strengths of a large organization are the opposite of what makes innovation work. Starting something new requires that you start with a small team.

Start with a Belief (Apr 1)

You can't use data to build products unless you start with a hypothesis.

Outline numbering

Comments

Recently Written

What I'm Reading