HTML ordered list formatting - html

is it possible to have my ordered list in the following format?
heading
1.1. text...
1.2. text
1.2.1 text
Another heading
1.3. text
1.3.1. text
1.3.2. text
1.4. text
Is that possible?
Thank you


ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
<li> Cat</li>
<li>Bat</li>
<li>Mat
<ol>
<li>Red Mat</li>
<li>Green Mat</li>
</ol>
</li>
<li>Pat</li>
</ol>


.contract ol {
counter-reset: item
}
.contract li.paragraph {
counter-increment: item;
}
.contract li li.paragraph:before {
content: counters(item, ".")" ";
}
.contract li {
list-style-type: none;
}
.contract ol {
padding-left: 0;
}
<section class="contract">
<ol>
<li class="paragraph">
<ol>
<li>
<h2>Heading</h2>
</li>
<li class="paragraph">text</li>
<li class="paragraph">text
<ol>
<li class="paragraph">text</li>
</ol>
</li>
<li>
<h2>Another heading</h2>
</li>
<li class="paragraph">text
<ol>
<li class="paragraph">text</li>
<li class="paragraph">text</li>
</ol>
</li>
<li class="paragraph">text</li>
</ol>
</li>
</ol>
</section>

Related

lists, sublists in html

How to organize html code (with usage ol\li, ul\li ect.) to present such lists (with sublists)?
1. Section
1.1. subsection
1.2. subsection
1.3. subsection
2. Section
3. Section
3.1. subsection
• text
• text
• text
3.2. subsection
3.3. subsection
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
content: counters(section, ".") ". ";
counter-increment: section;
}
<ol>
<li>Section
<ol>
<li>subsection</li>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
<li>Section</li>
<li>Section
<ol>
<li>subsection</li>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
</ol>
note: It is not the same that I want enter image description here
So far, using has produced only 1, 1.1, 1.2, 1.3, 2., 3., 3.1., 3.2., 3.3, 3.4., 3.5., 3.6.
not 1, 1.1, 1.2, 1.3, 2., 3., 3.1., •, •, •, 3.2., 3.3,
I think thats all, thanks!

I think the issue is your li:before also applies to the elements in the unordered list. Try this out and let me know if it works:
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
content: counters(section, ".") ". ";
counter-increment: section;
color: #BA4917;
}
ul li:before {
content: "";
}
<ol>
<li>Section
<ol>
<li>subsection</li>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
<li>Section</li>
<li>Section
<ol>
<li>subsection
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>subsection</li>
<li>subsection</li>
</ol>
</li>
</ol>

How to make an ordered list second level with continuing points?

I want to make an unordered list the has an ordered second level that continues counting it's points. I know I can do it with <ol start="Previous number+1"> but is it possible to continue list automatically? Below is an example as well as example in the picture.
First
a. first
b. second
Second
c. third
This is how I've done it:
<ul>
<li>ASV:<br/><ol type="I">
<li>HP</li><li>Dell</li><li>Apple</li><li>Google</li><li>Microsoft</li><li>EVGA Corporation</li><li>Maingear</li><li>Origin PC</li><li>Velocity Micro</li><li>Vizio</li></ol>
</li>
<li>Ķīna:<br/><ol type="I" start="11">
<li>Lenovo</li><li>Huawei</li><li>Founder</li><li>Hasee</li><li>Lemote</li></ol>
</li>
<li>Japāna:<br/><ol type="I" start="16">
<li>Panasonic</li><li>Sharp</li><li>Toshiba</li><li>VAIO</li>
</ol></li>
<li>Taivāna:<br/><ol type="I" start="20">
<li>Acer</li><li>Asus</li><li>Clevo</li><li>Gigabyte Technology</li><li>Via</li>
</ol></li>
I'm just a beginner so I'm sorry if the format isn't the greatest.
This is the example

you can do that with css Counter :
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
https://developer.mozilla.org/en-US/docs/Web/CSS/counters
sample code:
ul#my-list {
list-style: none;
counter-reset: nRef;
counter-reset: aRef;
}
ul#my-list>li { counter-increment: nRef; }
ul#my-list>li:before { content: counter(nRef) '. '; }
ul#my-list>li>ul { list-style: none; }
ul#my-list>li>ul>li { counter-increment: aRef; }
ul#my-list>li>ul>li:before { content: counter(aRef, lower-alpha) '. '; }
<ul id="my-list">
<li>ASV:
<ul>
<li>HP</li><li>Dell</li><li>Apple</li><li>Google</li>
<li>Microsoft</li><li>EVGA Corporation</li><li>Maingear</li>
<li>Origin PC</li><li>Velocity Micro</li><li>Vizio</li>
</ul>
</li>
<li>Ķīna:
<ul>
<li>Lenovo</li><li>Huawei</li><li>Founder</li>
<li>Hasee</li><li>Lemote</li>
</ul>
</li>
<li>Japāna:
<ul>
<li>Panasonic</li><li>Sharp</li><li>Toshiba</li><li>VAIO</li>
</ul>
</li>
<li>Taivāna:
<ul>
<li>Acer</li><li>Asus</li><li>Clevo</li>
<li>Gigabyte Technology</li><li>Via</li>
</ul>
</li>
</ul>

HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

I have a requirment to implement a nested ordered structured html page very similar like this. Most of the part is done but I got stuck at 1 place in ordering of number. Please suggest.
Below is the required structure and my code.
1.Main Line 111111111
1.1 Sub Line 111111111
a.aaaaaaaaaaa
b.bbbbbbbbbbb
2.Main Line 22222222
2.1 Sub Line 111111111
a.aaaaaaaaaaa
b.bbbbbbbbbbb
2.2 Sub Line 22222222
a.aaaaaaaaaaa
i.moreeeeee
ii.moreeeeee
b.bbbbbbbbbbb
i.moreeeeee
ii.moreeeeee
But getting some overlapped numbers as shown in image:
Please suggest where I am doing wrong?
Here in my code:
ol {
counter-reset: item;
}
ol>li {
counter-increment: item;
}
.sub-num-list>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
.sub-num-list>ol>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
.sub-albhabatical-list>li {
list-style-type: lower-alpha;
margin-left: 20px;
}
.sub-roman-list>li {
list-style-type: lower-roman;
margin-left: 20px;
}
<div class="layout__wrapper">
<ol>
<li>Main Line 111111111
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
<li>Main Line 22222222
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
<li>Sub Line 22222222
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
<li>bbbbbbbbbbb
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
</ol>
</li>
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>

You were wrong in the use of your :before and the list counter CSS property. Also you probably got lost in CSS selectors and ended up with undesired effects.
I fixed it for you, hopefully this is what you were looking for
li {
display: block
}
.main-num-list, .sub-num-list {
counter-reset: item
}
.main-num-list>li:before,
.sub-num-list>li:before {
content: counters(item, ".") " ";
counter-increment: item
}
.sub-albhabatical-list {
counter-reset: letter;
}
.sub-albhabatical-list > li:before {
content: counter(letter, lower-alpha) ". ";
counter-increment: letter;
}
.sub-roman-list {
counter-reset: roman;
}
.sub-roman-list > li:before {
content: counter(letter, lower-roman) ". ";
counter-increment: roman;
}
<div class="layout__wrapper">
<ol class="main-num-list">
<li>Main Line 111111111
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
<li>Main Line 22222222
<ol class="sub-num-list">
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
<li>Sub Line 22222222
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
<li>bbbbbbbbbbb
<ol class="sub-roman-list">
<li>moreeeeee</li>
<li>moreeeeee</li>
</ol>
</li>
</ol>
</li>
<li>Sub Line 111111111
<ol class="sub-albhabatical-list">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
You can find some more informations in similar questions about list counter formatting and nested different list-style-type counters

Just add this style in your style section.
.sub-num-list{
list-style-type: none;
}
It'll remove overlapping of numbers

HTML ordered list inside div [duplicate]

This question already has answers here:
CSS counter-reset on nested list
(3 answers)
Closed 4 years ago.
I formatted the ordered list with sub-items. Another <ol> is inside a <div> and the numbers are wrong; why?
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>
Please check this:
http://jsfiddle.net/PTbGc/1265/

You can use separate div tag for that. Check this snippets
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
</div>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>

you can use separate div tags
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
<div>

wrong numbering in table of contents in HTML

I am trying to write Table of Contents using HTML in a file. The numbering that appears in my Table of Contents is flawed. How can I modify the following CSS and HTML so that the fourth bullet point in my Output is 4 instead of 3.4?
ol {
counter-reset: item;
}
ol li {
line-height: 30px;
}
ol ol li {
line-height: 20px;
}
li {
display: block;
}
li:before {
content: counters(item, ".")" ";
counter-increment: item;
}
<ol>
<li>
lorem ipsum
</li>
<li>
Set
</li>
<li>
Title
</li>
<ol>
<li>
Class
</li>
<li>
Something
</li>
<li>
Action
</li>
</ol>
<li>
Table of References
</li>
</ol>
Output
1. Lorem Ipsum
2. Set
3. Title
3.1. Class
3.2. Something
3.3. Action
3.4. Table of References

As the comment said (#Jon P): Your HTML is invalid. You can not have ol as a direct descendant of ol it needs to be wrapped in a li.
To nesting lists properly, just move the sub ol inside the 3rd li, check the example below:
REF: https://developer.mozilla.org/en/docs/Web/HTML/Element/ol
ol {
counter-reset: item;
}
ol li {
line-height: 30px;
}
ol ol li {
line-height: 20px;
}
li {
display: block;
}
li:before {
content: counters(item, ".")" ";
counter-increment: item;
}
<ol>
<li>
lorem ipsum
</li>
<li>
Set
</li>
<li>
Title
<ol>
<li>
Class
</li>
<li>
Something
</li>
<li>
Action
</li>
</ol>
</li>
<li>
Table of References
</li>
</ol>

You're closing your LI tag too early after Title - move it below the OL section, like this:
<ol>
<li>
lorem ipsum
</li>
<li>
Set
</li>
<li>
Title
<ol>
<li>
Class
</li>
<li>
Something
</li>
<li>
Action
</li>
</ol>
</li>
<li>
Table of References
</li>
</ol>