Your Ad Here

Outline numbering

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>

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

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


Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Lijit Search

Best Of

Recently Read

Get More

Subscribe | Archives

Recently

Sprout Test (May 7)
A test post for Sprout widgets.
Product Leadership (May 3)
An anthology of product leadership writing.
Fighting Monster patent claims (Apr 16)
The patent bully picked on the wrong little guy.
Peavy's pine tar (Apr 6)
Jake Peavy's cheating
Bush and Morgan on inner city baseball (Mar 30)
Morgan and Bush discuss the role of baseball in the inner cities.
Not a fork (Mar 27)
We have no intention of forking Drupal. That would be nuts. So what are we doing then?
Eating our dogfood in the sausage factory (Mar 26)
Recursive development for the new Drupal powered community platform.

Subscribe to this site's feed.

Elsewhere

Feed Crier
Get alerted by IM when your favorite web sites and feeds are updated.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks
Del.icio.us
My tagstream at del.icio.us.
Waddlespot
My son's Club Penguin community. News, blogs, tips, and tricks.

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2008 Adam Kalsey.
Content management by Movable Type.