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 :)
Related
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 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>
http://jsfiddle.net/ApS9L
I have this DIV which I am trying to align with the other two divs. In the fiddle, you can see there is the border of 'our data center' and 'our other services', which align with each other in a 960 width frame (works great when resizing). However, I can't get the 'every account includes' to stay aligned with the two other sections below, and it stretches across, far beyond 960px.
Can you help me get the top div to align with the other two divs.
Here is an image of live to show you my issues (there is a another column but it was breaking the fiddle). The colums are all grid_4 so grid_4*3 = 12, which shouldn't be causing issues..
Here is FULL HTML, please look on fiddle for CSS
<div id="hostingservices" class="grid_12">
<div id="insidehostingservices" class="grid_12margin">
<div class="constrain">
<h1 class="bigtitle">Every Account Includes</h1>
<div class="grid_4 alpha">
<h2>Email Features</h2>
<ul>
<li>UNLIMITED 1GB eMail Inboxes</li>
<li>POP3, IMAP & SMTP Access</li>
<li>Autoresponders & Mailing Lists</li>
<li>Email Forwarding, Catch All & Spam filtering</li>
<li>Junk Mail Filters</li>
</ul>
<h2>Website Statistics</h2>
<ul>
<li>Error & Access/Referrer/Agent Logs</li>
<li>Website Statistics</li>
<li>Google Sitemaps Generator</li>
<li>Webalizer Graphical Statistics</li>
<li>AWStats Graphical Statistics</li>
<li>Advanced Graphical & Text Counters</li>
<li>Bandwidth Statistics</li>
<li>Tracewatch</li>
</ul>
<h2>Access Features</h2>
<ul>
<li>Master & Additional FTP Accounts</li>
<li>SSH Access</li>
</ul>
<h2>Databases</h2>
<ul>
<li>MySQL 5 Databases</li>
<li>MySQL Web GUI</li>
</ul>
</div> <!-- end of insideourdataservices grid9 alpha-->
<div class="grid_4">
<h2>Advanced Features</h2>
<ul>
<li>eXtend Based Control Panel</li>
<li>Sub Domains</li>
<li>Microsoft FrontPage Extensions</li>
<li>Online File Manager</li>
<li>Website Redirection</li>
<li>Website submission to Google</li>
<li>Advanced Website Password Protection</li>
<li>Scheduled Tasks</li>
<li>IP Adress Blocking</li>
</ul>
<h2>Programming</h2>
<ul>
<li>PHP 4, PHP5 with SOAP Support</li>
<li>Perl, Python, Miva, RealAudio</li>
<li>Sun ONE ASP (Chilisoft ASP)</li>
<li>Ruby, Rails, ImageMagick, Ghostscript</li>
<li>Zend Optimizer, GD</li>
</ul>
<h2>E-Commerce</h2>
<ul>
<li>Shared Secure Server Access (https)</li>
<li>osCommerce, Zen, CubeCart, Agora</li>
<li>Lots of Free Webtools inc Clipart</li>
<li>Google Adwords</li>
</ul>
</div>
<div class="grid_4 omega">
<h2>One Click Installations</h2>
<ul>
<li>Joomla 1.5</li>
<li>Wordpress Blog, Drupal</li>
<li>phpBB3 Discussion Forums</li>
<li>Elgg Social Networking System</li>
<li>CMS Made Simple, Guestbook, Geeklog</li>
<li>Nucleus Blog, Eblah Online Discussion</li>
<li>Typo3 CMS, Crafty syntax Live help</li>
<li>dot Project Management System</li>
<li>osTicket Ticeting helpdesk system</li>
<li>Form to Email with CAPTCHA</li>
<li>Custom 404 and 500 Error Pages</li>
<li>Online Auction (just like ebay!)</li>
<li>Online Photo Album</li>
<li>Web Calendar</li>
<li>Web Survey</li>
<li>Internet Countdown, Random Text Displayer</li>
<li>Random Images Displayer</li>
<li>Round Cube Webmail, MediaWiki</li>
<li> SugarCRM</li>
<li>Many Javascript Generators</li>
</ul>
</div>
Order Now
</div>
`</div> <!-- end of insideourdataservices grid12 margin-->
</div> <!-- end of ourdataservicesimage grid3 omega-->
<div class="clear"></div> <!-- clears ourdataservices grid12-->
remove min-width from the below style
#hostingservices {
height: 800px;
/* min-width: 1500px; */
background: #F2F7FA;
border-style: solid;
border-bottom-width: thin;
border-color: #ccc;
}
<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
I'm redoing a html table into a list.
It now looks like this:
<ul>
<li>Some fruits
<ul>
<li>2013
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>2012
<ul>
<li>Banana</li>
</ul>
</li>
<li>2011
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>2009
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to figure out how to make the first entry in the sublist to align horizontally with the year. Like this:
2011 Lemon
Orange
Plum
The nested elements are doing my head in and I'm stuck. I have a feeling this will involve the display type of the elements and some floating. Any ideas? Fiddle here: http://jsfiddle.net/HUH62/4/
Thanks.
If I understood correctly, here's the same fiddle modified according to what you are trying to accomplish: fiddle.
I added some classes in order to make the CSS more readable and wrapped the "subtitle" of each section in a div so that floatiing could be applied to them.
I also removed the colors, since I interpreted they were added only for visualizing the elements.
CSS
h4 {
margin: 0px;
padding: 0px;
float:left;
}
ul {
list-style: none outside none;
padding: 0;
}
ul li ul li ul {
float:left;
margin-left: 10px;
}
ul li {
clear:both;
}
HTML
<ul>
<li>Some fruits
<ul>
<li>
<h4>2013</h4>
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>
<h4>2012</h4>
<ul>
<li>Banana</li>
</ul>
</li>
<li>
<h4>2011</h4>
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>
<h4>2009</h4>
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>