Welcome to WebmasterWorld Guest from 174.129.151.95

Forum Moderators: not2easy

Message Too Old, No Replies

style an ordered list

2.1 - 2.2 - 2.3 etc

   
5:07 am on Feb 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is it possible to style an ordered list so that it looks like this?

2.1 Banana
2.2 Apple
2.3 Strawberry

7:39 am on Feb 20, 2008 (gmt 0)

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member



In a way; it is done by nesting <ol> sections and then using CSS to style the nested ones.

You end up with:
1.
... 1.
... 2.
2.
... 1.
... 2.
... 3.
etc.

In CSS terms:
ol {margin-left:0}
ol ol {margin-left:30px}
ol ol ol {margin-left:60px}

11:01 pm on Feb 20, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks, your idea has helped me come up with the following which is close enough (I had been hoping for some kind of pseudo-element li:before thingy but that just doesn't do what I wanted).

ol, li {
font-size: 16px;
font-family: Times New Roman;
}
li li {
position: relative;
top: -19px;
left: -29px;
}

<ol>
<li>
<ol>
<li>Volkswagen</li>
<li>Audi</li>
<li>Porsche</li>
</ol>
</li>
<li>
<ol>
<li>Banana</li>
<li>Apple</li>
<li>Strawberry</li>
</ol>
</li>
</ol>

Yes I know that fixed pixel sizes are not good for accessability, but I can get away with it in this case because it's for an internal memo thingy only. And using fixed pixel sizes and a fixed font keeps evertyhing lined up perfectly.