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:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

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):

Follow me on Twitter

Lijit Search

Best Of

Recently Read

Get More

Subscribe | Archives

Recently

Ideas, Risk, and Investors (Jan 1)
Over at SacStarts, I have piece up discussing a common question I get from entrepreneurs....
VoiceXML for web developers (Dec 17)
Building voice applications isn't hard at all. Any web developer can do it.
De-skunking a dog (Oct 27)
How to clean up your pet after a skunk attack.
Pressure sales via Twitter (Oct 16)
Sticking an ad in my face when we first meet is a good way to lose my interest.
Loma Prieta, 20 years later (Oct 13)
Looking at the earthquake from October 17, 1989
Red light cameras don't work (Oct 13)
Cameras installed to catch people running red lights aren't about traffic safety at all.
Jack-o-lantern pumpkin carving patterns (Oct 12)
It's a tradition, what can I say?
SEO realities (Oct 12)
The real search engine optimization. Works every time.

Subscribe to this site's feed.

Elsewhere

IMified
Build instant messaging applications. (My company)
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

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