This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
Freshness Warning
This article is over 8 years old. It's possible that the information you read below isn't current.
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:
<style type="text/css">
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
</style>
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
This seems like an interesting method for creating outlines. Do you have a sample page that employs the technique?
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.
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:
If not, is there some appropriate way to do it (other than cheating by typing the numbers directly)?
Thanks,
Luis
Adam Kalsey
Mobile: 916.600.2497
Email: adam AT kalsey.com
AIM or Skype: akalsey
©1999-2012 Adam Kalsey.
Content management by Movable Type.
Adam Kalsey
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