<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<ol type="1">
<li> Drinks </li>
<ol type="a" start="4">
<li> Milk </li>
<li> Water </li>
<li> Coffee </li>
<li> Tea </li>
</ol>
<li> Dessert </li>
<ol type="A">
<li> ice cream </li>
</ul>
</ol>
</body>
</html>
I'd like the output to be
1. Drinks
ddd. Milk
eee. Water
fff. Coffee
ggg. Tea
2. Dessert
A. ice cream
You can use something like this.
.repeat-counter li::marker {
content: counter(list-item, lower-alpha) counter(list-item, lower-alpha) counter(list-item, lower-alpha)". ";
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<ol type="1">
<li> Drinks </li>
<ol class="repeat-counter" type="a" start="4">
<li> Milk </li>
<li> Water </li>
<li> Coffee </li>
<li> Tea </li>
</ol>
<li> Dessert </li>
<ol type="A">
<li> ice cream </li>
</ul>
</ol>
</body>
</html>
Explanation:
::marker - Here we are using marker pseudo class to change the content of the marker.
counter(list-item,lower-alpha) - counter(list-item) gives the current item counter and argument lower-alpha will convert the counter number to respective lower alphabet.
content: - We are changing the content of the marker and including counter(list-item,lower-alpha) to make it appear thrice.
Also notice I have used .repeat-counter class to only apply these styles selectively to that list.
Update:
::marker has some limitations as to what styles can be applied to it.
As of now only following properties could be applied to it.
All font properties
The white-space property
color
text-combine-upright, unicode-bidi and direction properties
The content property
All animation and transition properties
To overcome this styling limitation , we can use ::before pseudo selector instead of ::marker. Below is an example:
.repeat-counter li::before {
content: counter(list-item, lower-alpha) counter(list-item, lower-alpha) counter(list-item, lower-alpha)". ";
position: absolute;
margin-left: -30px;
}
.repeat-counter{
list-style:none;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<ol type="1">
<li> Drinks </li>
<ol class="repeat-counter" type="a" start="4">
<li> Milk </li>
<li> Water </li>
<li> Coffee </li>
<li> Tea </li>
</ol>
<li> Dessert </li>
<ol type="A">
<li> ice cream </li>
</ul>
</ol>
</body>
</html>
Related
I'm using lists for "Terms and conditions" page and in order to make the structure neater I'm using ordered lists. Problem is that I want to make the outer list unordered, and when I do that it's losing the count for the nested ordered lists. I know I can make it in many ways including manually, but I want to know if it's possible to handle this situation somehow.
<ol>
<li>
<h2>Title of section 1</h2>
<ol>
<li>Text 1.1
<li>
<li>Text 1.2
<ol>
<li>Text 1.2.1</li>
<li>Text 1.2.2</li>
</ol>
</li>
</ol>
</li>
<li>
<h2>Title of section 2</h2>
<ol>
<li>Text 2.1
<li>
<li>Text 2.2
<ol>
<li>Text 2.2.1</li>
<li>Text 2.2.2</li>
</ol>
</li>
</ol>
</li>
</ol>
Using CSS I'm able to show everything as it should be
https://jsfiddle.net/tutancamon/bfhkqtdg/41/
What I want is to remove the number in front of the titles because it already contains them...
Unorderded list element <ul> sounds like what you need to use.
ul {
list-style: none;
}
<ul>
<li>
<h2>Title of section 1</h2>
<ol>
<li>Text 1.1
<li>
<li>Text 1.2
<ol>
<li>Text 1.2.1</li>
<li>Text 1.2.2</li>
</ol>
</li>
</ol>
</li>
<li>
<h2>Title of section 2</h2>
<ol>
<li>Text 2.1
<li>
<li>Text 2.2
<ol>
<li>Text 2.2.1</li>
<li>Text 2.2.2</li>
</ol>
</li>
</ol>
</li>
</ul>
Use css property list-style-type like so:
ol.outer {
list-style-type: none;
}
This will however mess with the numbering. Which you can fix like so:
ol {
list-style-type: none;
counter-reset: item;
}
ol>li::before {
counter-increment: item;
content: counters(item, ".") " ";
}
ol.outer>li::before {
content: "";
}
<ol class="outer">
<li>
<h3>Section1</h3>
<ol>
<li> text1.</li>
<li> text2 </li>
<li> text3</li>
</ol>
</li>
<li>
<h3>section 2</h3>
<ol>
<li> text</li>
<li> text</li>
<li>
<strong>Some texts</strong>
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
</li>
</ol>
</li>
</ol>
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 cant seem to find a straight answer on any website really.
As you can see on line 2 <li> is all alone with no </li> after louis
Im being told to close it toward the end, i don't get it sadly.
Line 2 and the second from the bottem are what I'm talking about.
<ul>
<li> Louis <<<<
<ol>
<li> Louis </li>
<li> Louis </li>
<ul>
<li> Louis </li>
<li> Louis </li>
<ol>
<li> Louis </li>
<li> Louis </li>
</ol>
</ul>
</ol>
</li> <<<<
</ul>
I have formatted your code to make more clear what is going on. All that is happening is that the lists are nested.
Please note, however, that the code you have posted is not actually valid HTML. UL and OL elements can only have LI elements as children. Nesting a UL directly inside an OL or vice versa is not valid syntax.
Most likely, you are trying to include the UL and OL elements inside LI elements, like this:
<ul>
<li> Louis
<ol>
<li> Louis </li>
<li> Louis
<ul>
<li> Louis </li>
<li> Louis
<ol>
<li> Louis </li>
<li> Louis </li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Which renders like this:
Louis
Louis
Louis
Louis
Louis
Louis
Louis
One more little note: if you try to include <<<< in your HTML, it will break. I assume those were just for illustration in your question. If you want to output a literal < in HTML, use <.
I have the following list on my html file: I need to know how I can make the Headings: The Road To War; Politicians and Generals; The Course of war; and Afermath in Upper-Roman and the subheadings under each one in Upper-Alpha, within my css file.
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Road to War
<ol>
<li>Planting the Seeds</li>
<li>The First Crisis</li>
<li>Compromise & Failure</li>
<li>Fault Lines</li>
</ol>
</li>
<li>Politicians & Generals
<ol>
<li>Politicians</li>
<li>Generals</li>
</ol>
</li>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
Add a class to the ol you want to make it Upper-alpha for example <ol class="alpha"> and then in css:
.alpha {
list-style-type: upper-alpha;
}
Give each of them classes and do like this
for upper roman
ol{
list-style-type: upper-roman;
}
for upper alpha
ol{
list-style-type: upper-alpha;
}
<div class="fbtop">
<img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
<h2 class="title">Zelfgemaakt met liefde</h2>
<ul class="dropdown">
<li>
Naaibenodigdheden
<ul class="sub_menu">
<li>
Allerlei
</li>
<li>
Spelden
</li>
<li>
Naalden
</li>
</ul>
</li>
<li>
Stoffen
<ul class="sub_menu">
<li>
Effen
</li>
<li>
Katoen
<ul>
<li>
Pieke Wieke for Soft Cactus
</li>
<li>
Soft Cactus
</li>
<li>
Bedrukte katoen
</li>
<li>
Basics
</li>
<li>
Stretchkatoen
</li>
</ul>
</li>
<li>
Bedrukt
</li>
<li>
Stretch katoen
</li>
<li>
Tricot
</li>
<li>
Flannel
</li>
<li>
Gabardine
</li>
<li>
Ribfluweel
</li>
<li>
Voering
</li>
<li>
Teddy fleece
</li>
<li>
Geweven
</li>
</ul>
</li>
<li>
Flockfolie
</li>
<li>
Workshops
</li>
<li>
Waardebonnen
</li>
<li>
Vlieseline
</li>
<li>
Fournituren
<ul class="sub_menu">
<li>
Lint
</li>
<li>
Garen
</li>
<li>
Ritsen
</li>
<li>
Paspel
</li>
<li>
Biais
</li>
<li>
Elastiek
</li>
</ul>
</li>
</ul>
</div>
It's a classic way of doing dropdown menu's by css, to see it at work you can go to http://jsfiddle.net/W6Rhe/
There you'll also see the issue that I have with the menu. If you select the first item "Naaibenodigdheden" you'll see that the first sub menu item has front color white instead of red.
If you go to stoffen, you'll notice the same behaviour, if you select the sub menu "katoen" you'll notice the same behaviour again.
Now the cherry on the pie of this delicious issue is that when I adjust all my links to relative links (ie I remove https://blabla.blah.com) then All the items appear in red as intended.
What the hell am I doing wrong? I just don't get it.
ps tested this on chrome
ps2 it appears that when I replace the url in whatever is not what they are now, the problem does not occur, bizar is my only term for this behaviour
This code here:
ul.dropdown li a:visited,
ul.dropdown li a:hover
{
color:#fff;
}
is overriding the color on :visited links to white.
The reason the color changes when you use a relative URL is because the browser no longers sees it as visited, because it is a different path.
I have found the culprit, thanks to Andy for pointing me into the right direction:
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link {color: #e10707; }
He noticed that the links that were still white were in fact links colored trough the :visited attribute that was declared #fff or white :)
There is one state missing in the previous code block, indeed the a:visited color is not set to red, that's why it was white