Im trying to make an ordered list with two items, and three items under each list, which have bullet points. my code is not passing validation because it saysElement ul not allowed as child of element ol in this context. But everywhere I look it says this is ok. here is my code
<ol>
<li>First numbered Item</li>
<ul>
<li>one thing</li>
<li>two things</li>
<li>three things</li>
</ul>
<li>Second numbered Item</li>
<ul>
<li>one thing</li>
<li>two things</li>
<li>Three things</li>
</ul>
</ol>
not sure what im doing wrong. thanks for the help, first post here :)
The children of lists should be list items. You have both list items and unordered lists as children of your ordered list. You need something like:
<ol>
<li>
<p>First numbered Item</p>
<ul>
<li>one thing</li>
<li>two things</li>
<li>three things</li>
</ul>
</li>
<li>
<p>Second numbered Item</p>
<ul>
<li>one thing</li>
<li>two things</li>
<li>Three things</li>
</ul>
</li>
</ol>
Related
This question already has answers here:
Proper way to make HTML nested list?
(7 answers)
Closed 3 years ago.
I am just using simple HTML to code something like this:
This is what I wanted to code:
But this is the output I’m getting:
The section 1.2 should have started from II instead of III because of the outer ordered list.
This is the code I am using:
<h1>Table of Contents For My Book</h1>
<ol>
<li>Chapter One</li>
<ol type="I">
<li>Section 1.1</li>
<ol type="i">
<li>First Topic</li>
<li>Second Topic</li>
<ul>
<li>subtopic 1</li>
<li>subtopic 2</li>
</ul>
</ol>
<li>Section1.2</li>
<li>Section1.3</li>
</ol>
Try nesting the list as follows:
<h1>Table of Contents For My Book</h1>
<ol>
<li>Chapter One
<ol type="I">
<li>Section 1.1
<ol type="i">
<li>First Topic</li>
<li>Second Topic
<ul>
<li>subtopic 1</li>
<li>subtopic 2</li>
</ul>
</li>
</ol>
</li>
<li>Section1.2</li>
<li>Section1.3</li>
</ol>
</li>
<li>Chapter Two</li>
</ol>
I have problem with css styling of my Ordered List.
I have my HTML code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li class="sub">one</li>
<li class="">two
<ol>
<li class="small">two.one</li>
<li class="small">two.two</li>
<li class="small">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>
And I need to hide number value from 1 one, 2 two, 3 three and 4 four
Someone has idea, how to do that, please?
You can mimick the behavior you are looking for by setting the font-size to 0px and this would make the element be counted by the counter property while hiding it.
.hide {
font-size: 0px;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li class="hide">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>
<li class="hide">three.three</li>
<li>three.four</li>
</ol>
</li>
<li>four</li>
</ol>
Source: CSS counter on hidden submenu
i tried to validate a .html file and received this error-
Error: Element ul not allowed as child of element ol in this context
<ol>
<li><span class="bold">Preheat Oven:</span> Preheat oven </li>
<li>To Mak</li>
<ul>
<li>Whisk together </li>
<li>Stir in water,.</li>
<li>Cook over</li>
<li>Stir in butter.</li>
<li>Place egg yolks</li>
<li>Whisk egg yolk . </li>
<li>Bring to a </li>
<li>Remove from heat. </li>
<li>Pour fill.</li>
</ul>
<li><span class="bold">Make Meringue:</span> bowl ...</li>
<ul>
<li> woamy.</li>
<li>Add sugar gradua. </li>
<li> sealing the edges at the crust.</li>
</ul>
<li>brown.</li>
</ol>
I cannot seems to figure out what I did wrong. Any suggestions?
You need to wrap the unordered list in list item tags, otherwise they are just floating around in the middle of no where:
<ol>
<li><span class="bold">Preheat Oven:</span> Preheat oven </li>
<li>To Mak</li>
<li>
<ul>
<li>Whisk together </li>
<li>Stir in water,.</li>
<li>Cook over</li>
<li>Stir in butter.</li>
<li>Place egg yolks</li>
<li>Whisk egg yolk . </li>
<li>Bring to a </li>
<li>Remove from heat. </li>
<li>Pour fill.</li>
</ul>
</li>
<li><span class="bold">Make Meringue:</span> bowl ...</li>
<li>
<ul>
<li> woamy.</li>
<li>Add sugar gradua. </li>
<li> sealing the edges at the crust.</li>
</ul>
</li>
<li>brown.</li>
</ol>
https://stackoverflow.com/a/15870503/8179067 i think the answer can be founded in this topic :)
"
This is because the content model for (and actually) is zero or more li elements
These two tags actually can't contain anything other than tags or nothing at all. If you have browsers will automatically close the tag before beginning the (well, the good ones).
try with this one :)
I want to select only the first child(list item) of ordered list, which I did using.
.ci-content ol.my-list > li:first-child{
color:green; //selected item in green..
}
check the problem here
Can I achieve the same without using "my-list" class in the selector?...how do I restrict the depth of selection.
Note: I can have ol anywhere, not immediately inside '.ci-content' always.
<ol class="my-list">First set
<li>one</li>
<li>two
<ol>
<li>two.one </li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three</li>
<li>four</li>
</ol>
<br><br>
<ol class="my-list">Second Set
<li>one</li>
<li>two</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>four</li>
</ol>
I am trying to use HTML to:
Create 2 Ordered Lists
Within Each of the O.L. nest a Unordered List and add some elements inside
However, my numbering isn't working the way it should, I'm getting, 1. 1. rather than 1. 2. etc.
My code:
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
Sounds like you actually want 1 ordered list, not 2. If you expect the first one to have the number 1 and and the second one to have the number 2, that's one list. The numbers will reset if you start a new list.
<ol>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</li>
</ol>
Not sure why everyone's answering against the docs, officially, you CANNOT nest <ul> element as a direct child to <ol> element and vice versa, so I've modified the markup accordingly.
Demo
<ol>
<li>
<h2>Fruits</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>
<h2>Vegetables</h2>
<ul>
<li>Carrot</li>
</ul>
</li>
</ol>
Here, you can adjust the padding and margin of the unordered lists as required by you but I just gave a general idea of how it should be.
You can also use <p> or any other tag at the place of <h2> but I think <h2> or <h3> should fit well for your case.
You're ending the ordered list after the first line. Don't put the tag in untill the end of the entire ordered list. Example below.
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
Maybe you don't use the list-style-property but the counter-increment-property instead so your HTML stays as it is.
ol {
counter-increment: section;
}
ol > li {
list-style-type: none;
}
ol > li:before {
content: counter(section)". ";
}
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>