I'm doing a lesson on Codecademy about nested lists in html.
My code is as follows:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ol>
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ol>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
However, the lesson throws the following error when I try to submit this code:
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
What am I doing wrong?
According to the error,
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
you need one unordered list inside your unordered list of profile sections. Currently, all of your internal lists are ordered lists (<ol>). Try turning one of them into a <ul>.
For example, this should match your error desciption:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ul> <!--(Unordered List!)-->
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ul>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
Related
This question already has answers here:
Proper way to make HTML nested list?
(7 answers)
Closed 5 years ago.
This is the error: Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
Here is the html:
<tr>
<td> Incorporated Business Accounts - additional requirements:
<ul>
<li> Business name and address </li>
<li> Nature of business and date of incorporation </li>
<li> BIN number</li>
<li> Certificate of Incorporation</li>
<li> Names of company directors</li>
<li> Names of directors </li>
<li> Proof of signing authority </li>
<ul>
<li> Ltd Companies: Memorandum and Articles of Incorporation/Bylaws </li>
<li> Registered Societies: Constitution and Bylaws or minutes</li>
<li> Strata Corporations: Bylaws or minutes</li>
</ul>
<li> Photo ID for all signers: if more than 3 signers, must ID at least 3 of those persons</li>
</ul>
</td></tr>
</tbody>
</table>
You need to nest in under a <li> tag like so:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
</ul>
Ul should be inside li. Check the following
....
<li> Proof of signing authority
<ul>
<li> Ltd Companies: Memorandum and Articles of Incorporation/Bylaws </li>
<li> Registered Societies: Constitution and Bylaws or minutes</li>
<li> Strata Corporations: Bylaws or minutes</li>
</ul>
</li>
<li> Photo ID for all signers: if more than 3 signers, must ID at least 3 of those persons</li>
....
I have co-written this code:
<ul><p>what are you <i>still</i> doing up?</p>
<p>you waiting for <i>me</i>, so we can <em>go</em> to bed <sup><sub>together?</sub></sup></p>
<ul>there is no such thing as an unsorted list in my world</ul>
<ul>nej tak jeg vil gerne sove</ul>
<p>you went for a <b>bold</b> move...</p>
<p>camel rider hidden in the sand snake flippant eyebrow mandrake</p></ul>
As a template for a website (called Order of the Mouse) but the unsorted list does not display. How I make the unsorted list display?
You will want to use <li> tags to make your list. Like this:
<ul>
<li>there is no such</li>
<li>thing as an unsorted</li>
<li>list in my world</li>
</ul>
you need to put the elements of the list in their own <li> tags, like this:
<ul>
<li>there is no such thing as an unsorted list in my world</li>
</ul>
It looks like you may need an <li> tag nested between your <ul></ul> tags. Like this:
<ul>
<li>there is no such thing as an unsorted list in my world</li>
</ul>
This is how you write unordered lists :
<ul>
<li>Put your text here</li>
<li>More items....</li>
<li>....</li>
</ul>
Good luck !
So, I have an ordered list that has an unordered list within it, like so:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>
<ul>
<li>Controls for single player mode:</li>
<li>
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:</li>
<li>
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Unfortunately, it outputs this:
I embedded the additional lis as otherwise it failed W3C validation. The Validator complained about sticking <ul> elements inside of <ol> elements otherwise.
How do I fix this so that the list symbols in front of the items will go away?
Just don't create a new li to embed your nested uls, but add them to the existing li. Like this:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game
<ul>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Since ordered and unordered lists are block-level elements in HTML, they will wrap to the next line by default, so there's even no need to create additional divs or insert line breaks.
Is this what you want? You put nested lists inside of the li:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ol>
Given the following list:
links = %w(
/foo/bar/baz
/foo/bar
/foo/42/43/44/test
/foo/42
/foo/test/test2
)
I would like to obtain an HTML unordered list such as:
<ul>
<li>
foo
<ul>
<li>
bar
<ul>
<li>baz</li>
</ul>
</li>
<li>
42
<ul>
<li>
43
<ul>
<li>
44
<ul>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
test
<ul>
<li>test2</li>
</ul>
</li>
</ul>
</li>
</ul>
I through I may be a good idea to do it in functionnal style, with a method which call itself. Have you got an example of code to do this? Thanks a lot.
Iterate strings on list
Scan the string with a regex something like /(/\w+)/
Iterate the scan results and build your html
I think that's just it .
OR you could use a some javascript to generate a tree-ish thing / whatever you need
At work I have been asked to make up a hierarchical data tree (in CSS HTML) showing who is in charge of who and who is in charge group A and group B and so on... I have found this great data tree in codepen http://codepen.io/chuongdang/pen/lcnsC but it only allows for one parent to be the parent of a group where I need it to be two or maybe even three. Unfortunately I can't post images yet but here is a link of what I would like the structure to be more like - imgur What would I have to change in the CSS/HTML to have multiple parent nodes?
Thanks
You can try this
<div class="tree">
<ul>
<li>
Parent1
Parent2 //Add any Number of Parents
<ul>
<li>
Child
<ul>
<li>
Grand Child
</li>
</ul>
</li>
<li>
Child
<ul>
<li>Grand Child</li>
<li>
Grand Child
<ul>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
</ul>
</li>
<li>Grand Child</li>
</ul>
</li>
</ul>
</li>
</ul>