homepage Welcome to WebmasterWorld Guest from 54.227.5.234
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
style an ordered list
2.1 - 2.2 - 2.3 etc
Purple Martin




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

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

2.1 Banana
2.2 Apple
2.3 Strawberry

 

vincevincevince




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

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}

Purple Martin




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved