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

CSS Forum

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3579682 posted 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

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



 
Msg#: 3579682 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3579682 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved