Hi,

 

I am having trouble making a simple ordered list, the goal is to start with 1, 2, 3, etc... then the nested list would go 3.1 3.2 .3.3

 

have a look here Basically instead of the Roman numerals I would like it to be 1.1, 1.2, 1.3.

 

Any help would be much appreciated.

You can change to numbers by changing

list-style-type:lower-roman;

to

list-style-type: upper-number;

but that only gives you 1 instead of 1.1 in the nested ordered list. I'm not sure how to get 1.1

 

except by doing a terrible fudge

<ol>
<li>
   first list item
   <ol>
       <li><span>1  bla bla bla</span></li>
   <li><span>2  bl abl abl some more</span></li>
   <li><span>3  bl abl abl less</span></li>
   </ol>
</li>

CSS

ol { list-style-type: decimal; padding-left: 25px; color: #272673; }
ol > li { margin-bottom: 35px; }

ol > li > ol { margin-top: 13px; }
ol > li > ol > li { padding-left: 16px; margin: 0; list-style-type: upper-number; }
ol > li > ol > li span { margin-left: -22px; }

Edited August 7, 201214 yr by Wickham

A nested <ol> would be my guess. Might need some playing with the CSS and perhaps a :before to add the . (point)

You can change to numbers by changing

list-style-type:lower-roman;

to

list-style-type: upper-number;

but that only gives you 1 instead of 1.1 in the nested ordered list. I'm not sure how to get 1.1

 

except by doing a terrible fudge

<ol>
<li>
first list item
<ol>
<li><span>1 bla bla bla</span></li>
<li><span>2 bl abl abl some more</span></li>
<li><span>3 bl abl abl less</span></li>
</ol>
</li>

CSS

ol { list-style-type: decimal; padding-left: 25px; color: #272673; }
ol > li { margin-bottom: 35px; }

ol > li > ol { margin-top: 13px; }
ol > li > ol > li { padding-left: 16px; margin: 0; list-style-type: upper-number; }
ol > li > ol > li span { margin-left: -22px; }

 

Thanks for the reply Whickam.

 

I was toying with this as an option but was hoping the there was more "automatic" approach and let the HTML/CSS do the counting for me

ol {
counter-reset: item;
}
li.heading{
margin-bottom:20px;
}
ol li{
font-weight:bold;
text-transform:uppercase;
list-style-position:outside;
}
ol li:before{
content: counters(item,".") ". ";
counter-increment: item;
display:marker;
}
ol li ol li{
font-weight:normal;
text-transform:none;
}
ol li ol li ol li{
margin-left:2.5em;
list-style-type:lower-alpha;
}
ol li ol li ol li:before{
content:none;
}
ol li ol li ol li ol li{
list-style-type:lower-roman;
}

 

Is this what you want?

 

Should work - http://jsfiddle.net/...nHegarty/VNSK5/

 

Its not without problems though. If you have a lot of text in those sub li's so that it spans two lines or more the text on the second line will align underneath the higher level li.

 

Source: http://webmasters.st...with-subclauses

Edited August 7, 201214 yr by jheg

Is this what you want?

 

Should work - http://jsfiddle.net/...nHegarty/VNSK5/

 

Its not without problems though. If you have a lot of text in those sub li's so that it spans two lines or more the text on the second line will align underneath the higher level li.

 

Source: http://webmasters.st...with-subclauses

 

This is awesome, thanks!

Very interesting, jheg.

I found that the code you posted worked in jsfiddle but not when included in a full web page either in IE9 or Firefox (although they were the same as eachother). I tried editing ol li:before{ } to ol li li:before{ } but that didn't work either.

 

However, the CSS in the link http://webmasters.st...with-subclauses

ol > li {
counter-increment: root;
}

ol > li > ol {
counter-reset: subsection;
list-style-type: none;
}

ol > li > ol > li {
counter-increment: subsection;
}

ol > li > ol > li:before {
content: counter(root) "." counter(subsection) " ";
}

 

did work (after deleting the .main class for ol which probably doesn't apply to you).

It's the first time I've noticed jsfiddle to be different from real browsers.

Edited August 7, 201214 yr by Wickham

How very strange. Also if you add 'text-indent: -30px; padding-left: 35px;' to ol li ol li it gets rid of the problem of second line text aligning directly under the number rather than aligning it to the start of the text in a block.

 

ol > li {
counter-increment: root;
}
ol > li > ol {
counter-reset: subsection;
list-style-type: none;
}
ol > li > ol > li {
counter-increment: subsection;
text-indent: -30px; padding-left: 35px; /* ADDED THIS */
}
ol > li > ol > li:before {
content: counter(root) "." counter(subsection) " ";
}

technically text-indent: -32px; actually