Tuesday 8 April 2008

Creating a Cascading outline Lists in CSS

Ever wanted an easy way to do indented lists with varying numbering schemes
An easy way to do this is with CSS

[style type="text/css"&gt]
ol {
list-style-type: upper-roman;
}
ol ol {
padding-left:2em;
list-style-type: upper-alpha;
}
ol ol ol {
list-style-type: decimal;
}
ol ol ol ol {
list-style-type: lower-alpha;
}
ol ol ol ol ol {
list-style-type: lower-roman;
}
[/style]
If you use use style and then have an html list like this will result in it being formatted like this
[ol style="font-size:xx-small"]
[li] Major outline item.
[ol style="font-size:xx-small"][li] Next level down.
[ol style="font-size:xx-small"][li] And a first point about that.
[ol style="font-size:xx-small"][li] The first point has a note.
[ol style="font-size:xx-small"][li] And that note has two notes.[/li]
[li] Ending with this.
[/li][/ol]
[/li][/ol]
[li] The second point comes along.
[ol style="font-size:xx-small"][li] The second point needs elaboration.
[li] Elaboration is well broken up.[/li]
[li] And shouldn’t go on forever.
[/li][/ol]
[/li][/ol]
[li]Close big!
[ol style="font-size:xx-small"][li]Make the point.[/li][/ol]
[/li][/ol]
[/li]
[li] Big bugs have little bugs
[ol style="font-size:xx-small"][li] Upon their back to bite them.
[ol style="font-size:xx-small"][li] Little bugs have littler bugs.
[ol style="font-size:xx-small"][li] And so, ad infinitum.
[/li][/ol]
[/li][/ol]
[/li][/ol]
[li] The fun can go on forever!
[/li]
[/ol]

(needless to say change the [] to the right sort of brackets)
Will result in it being formatted like this


  • Major outline item.
    1. Next level down.
      1. And a first point about that.
        1. The first point has a note.
          1. And that note has two notes.
          2. Ending with this
      2. The second point comes along.
        1. The second point needs elaboration.
        2. Elaboration is well broken up.
        3. And shouldn’t go on forever.
    2. Close big!
      1. Make the point.
  • Big bugs have little bugs
    1. Upon their back to bite them.
      1. Little bugs have littler bugs.
        1. And so, ad infinitum.
  • The fun can go on forever!
  • 2 comments:

    Ben Poole said...

    ... then write Lotusscript to take an arbitrary number of items, with willy-nilly ordering and indentation, and make said code output compliant XHTML lists.

    Guaranteed fun for all the family!

    I need to learn how to write parsers properly...

    Steve McDonagh said...

    Got it up to the willy nilly.. with out that how would you choice the order? I do it with something similar to this CSS by injectig the CSS rule into the DOM at the time I inject a new level of outline data.

    I get my data from a categorised view as JSON data part of which is the LEVEL and then use that to trigger where the element and corresponding CSS should go in the DOM.

    I think that makes sense?

    Disqus for Domi-No-Yes-Maybe