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 <.
Related
<!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>
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 am very new to this and my code is probably very sloppy, excessive and redundant, so I apologize for that.
I am trying to add one final piece to my nav bar. Here is the HTML, a fiddle will be attached at the bottom.
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li> <a id="h" href=".html">_______ _______ __________</a> </li>
</ul>
<ul class="second-nav">
<li> <a id="a" href=".html">_____ __</a> </li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<div class="flyout">
<li> <a id="r" href=".html">___________</a> </li>
<ul class="flyout-nav">
<li> ___ </li>
<li> ______ _ _____ </li>
<li> ______ ________ </li>
</ul>
</div>
<div class="flyout">
<li> <a id="c" href=".html">__________</a> </li>
<ul class="flyout-nav">
<li> ______ ________ </li>
<li> ___________ </li>
<li> ______ _____ </li>
</ul>
</div>
<li> ______ _______ </li>
</ul>
</li>
<li> _______ __ </li>
</ul>
</header>
I am attempting to select the two different "flyout-nav"s individually, however I cannot seem to find the correct specificity to select each individually.
All I need to do is round the top left corner on the second "flyout-nav" while keeping the first "flyout-nav"s top left corner square.
I believe my problem is that when I try to select the first child of the "flyout" is selects both "flyout-nav"s as they are both the first children and I have been looking into nth-children and other child selectors but to no avail. At this point after combing through the code for a few days now attempting to make it more efficient and find an order that will make it work I need some new eyes on the code to see what my eyes have been blinded to.
Here is the Jsfiddle with my css (note css is probably more sloppy than my code, still attempting to figure out the whole organization thing).
Thank you for the assistance and please don't hesitate to ask me to clarify anything.
Fix:
I changed the second "flyout-nav" to "flyout-nav1" and then updated all of the css that was associated with "flyout-nav" to also incorporate "flyout-nav1"
new Jsfiddle here
Your HTML structure is invalid. This is a valid HTML structure.
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li>
<a id="h" href=".html">_______ _______ __________</a>
</li>
</ul>
<ul class="second-nav">
<li>
<a id="a" href=".html">_____ __</a>
</li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<li class="flyout">
<a id="r" href=".html">___________</a>
<ul class="flyout-nav">
<li>___
</li>
<li>______ _ _____
</li>
<li>______ ________
</li>
</ul>
</li>
<li class="flyout">
<a id="c" href=".html">__________</a>
<ul class="flyout-nav">
<li>______ ________
</li>
<li>___________
</li>
<li>______ _____
</li>
</ul>
</li>
<li>
______ _______
</li>
</ul>
</li>
<li>
_______ __
</li>
</ul>
</header>
</div>
</body>
Then use :nth-child() selector, or add a custom class.
Try out nth-child here:
https://css-tricks.com/examples/nth-child-tester/
Try using the 'adjacent sibling selector' (+):
ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
/* css for the second flyout */
}
JSFiddle Demo
I believe Mr__Goat wants to select the two elements individually so he can apply different styling to each. The following CSS selectors will refer to each element individually.
/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}
/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}
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>
<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