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>
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'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>
I have an html page with several lists nested within one parent list. I want to create a link at the bottom of each list that when clicked will take the user to the top of the list item.
I understand that it is possible to create a link to the top of the page like this:
Top of Page
An example of what I'm looking for would be
Top of List
The href can point to whatever the id of your list is.
So, if you have
<ul id="MyList">
<li>Example one</li>
<li>Example two</li>
<li>etc...</li>
</ul>
you could link to it with:
Top of list
The initial example you give, linking to "#" jumps to the top of the page, because that's essentially an unused id, which will always go to the top of the page.
You need the # symbol to reference ids:
<ul id="firstlist">
<!-- List goes here -->
</ul>
Go to top
use <a name="name"> tag
JSFIDDLE
<li>list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> <a name="name"> here </a></li>
<li> list </li>
<li> list </li>
go to top
I have the following HTML:
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
History
</li>
<li>
Contact
<ul>
<li>
Email
</li>
<li>
Phone
</li>
</ul>
</li>
</ul>
</li>
<li>
FAQ
</li>
</ul>
I want to be able to select nodes based on part of the a tag href using an XPATH expression.
I don't have the full href, only the last part.
So say I want to find the node that links to "History.aspx" I would use something like:
//#href()[. = 'History.aspx']
It looks like you want //a[contains(#href, 'History.aspx')] to get the entire anchor node. if you want just the href path, then //a[contains(#href, 'History.aspx')]/#href.
Hope that helps.
I'm new with jsTree and I would like to create a tree starting from a <ul> and <li> list inside my HTML page. This using html_data plugin (I hope it's the right way).
I'm wondering: which is the correct way to write in HTML the data that will be turned into a tree by jsTree?
jsTree documentation suggests this one:
<li>
Node title
<!-- UL node only needed for children - omit if there are no children -->
<ul>
<!-- Children LI nodes here -->
</ul>
</li>
But it doesn't specify where to put the id attribute that jsTree uses to refer to the data.
Moreover it doesn't seem to work so well. I've seen someone who embeds that code with a <div> and a <ul> tags. For instance:
<div id="categories">
<ul>
<li>Category 1
<ul>
<li>SubCategory 1</li>
<li>SubCategory 2</li>
</ul>
</li>
<li>Category 2</li>
</ul>
</div>
Note that the id in the div tag.
Is this a correct way?
For me it seems not so comfortable using <a href="#"> tags only to write the text of a node... And if I use a <span> I loose the item icon...
Hope someone has a clearer head than mine.
This seems to be the pattern used by jsTree to draw the tree:
<div id="mytree">
<ul>
<li>
Node 1
<ul>
<li>
Node 1.1
</li>
<li>
Node 1.2
<ul>
<li>
Node 1.2.1
</li>
</ul>
</li>
</ul>
</li>
<li>
Node 2
</li>
</ul>
</div>
That is each node has the structure recommended by jsTree documentation:
<li>
Node title
<!-- UL node only needed for children - omit if there are no children -->
<ul>
<!-- Children LI nodes here (recursively apply the same pattern)-->
</ul>
</li>
And all the structure must be wrapped with (what documentation doesn't say):
<div id="mytree">
<ul>
<!-- all the tree here -->
</ul>
</div>