This is the block of code I am having trouble with on a website. From all the looking I have done the <li> and </li> should work just fine. However when I run it on the site it causes this list to be linked to the next list as if I never closed the list tag. If I remove everything and bring the </li> to right behind the </a> it works fine, but if say I put a space or press enter it acts as if the </li> does not exist.
<li>contact
<ul class = "contact">
<li>email</li>
<li>phone</li>
<li>skype</li>
<li>twitter</li>
<li>facebook</li>
</ul>
</li>
<li> home
</li>
even something as simple as this the </li> gets ignored.
Related
I'm just learning html to build a team site at work. I'm getting the hang of it pretty easily, but I'm having an issue with subfolders not showing in a dropdown. The html is linked to css for a design, but I know the problem isn't with the css.
I'm not exactly sure what to try as I mentioned I am just learning how to code the html.
<li class="top"><span class="down">Folders</span>
<ul class="hsolinks">
<li><span class="down">HIPAA Security Office</span></li>
<ul class="hsolinks">
<li>Access</li>
<li>Audit</li>
<li>LAN File Access</li>
<li>Training</li>
</ul>
The expected result is that the folders "ACCESS", "AUDIT", "LAN FILE ACCESS", and "TRAINING" would show under the HIPAA Security Office in a css dropdown. However, when I place the code into SharePoint it only shows an arrow, but no folders in the dropdown under HIPAA Security Office.
Also, there is additional code under this which is why I have only closed one ul tag. I hope I'm clear with what I'm trying to do!
The <li> element always needs to be surrounded by a <ul> element. But you can have a <ul> inside an <li> if needed. Something like so will work
<ul>
<li class="top">
<a href="#nogo4" id="hsolinks" class="top_link">
<span class="down">Folders</span>
</a>
<ul class="hsolinks">
<li>
<a href="#" target="_parent" class="hsolinksfly">
<span class="down">HIPAA Security Office</span>
</a>
<ul class="hsolinks">
<li>
Access
</li>
<li>
Audit
</li>
<li>
LAN File Access
</li>
<li>
Training
</li>
</ul>
</li>
</ul>
</li>
</ul>
For more information and examples about the <ul> <li> elements read: ul: The Unordered List element
I have a pice of code that creates the list shown bellow.
home
page2
page3
I want to remove the unused dot, and understand where it is coming from.
<ul>
<li>Home
<li>
<li> page2 </li>
<li> page3 </li>
</ul>
Actually, you forgot to close
<li>
It should be:
<li>Home</li>
The second open <li> signifies a new <li> nested within another, hence, an empty bullet point.
It is a syntax error, and must be a </li> rather than a <li>
<doctype html>
<html>
<body>
<ul>
<li>Home</li>
<li> page2 </li>
<li> page3 </li>
</ul>
</body>
</html>
<li> with only the opening tag is perfectly valid, when this is followed by another <li> or by any ending tag.
In your case the second <li> creates a new empty bulletpoint as browsers see your code like this:
<ul>
<li>Home
{</li>}<li>
{</li>}<li> page2 </li>
<li> page3 </li>
</ul>
The {</li>}'s (without {}) are the tags what browsers add before next starting tag to end previous <li> elements.
The same is true for example for <p> as well.
More information: https://www.w3.org/TR/html5/syntax.html#optional-tags
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 am trying to develop/design a main menu/site map for our website.
The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site.
On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure.
Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible.
Here's what I've got so far:
<ul>
<li>
<ul>
<li>
Collapse "Menu Item 1"
</li>
<li>
Add "Menu Item 1" to Favourites
</li>
<li>
Menu Item 1
<ul>
<li>
<ul>
<li>
<a href="example3.html">Open "Menu Item 1's
First Child"</a>
</li>
<li>
<a href="example4.html">Add "Menu Item 1's
First Child" to Favourites</a>
</li>
<li>
<a href="example3.html">Menu Item 1's First
Child</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="example5.html">Open "Menu Item 1's
Second Child"</a>
</li>
<li>
<a href="example6.html">Add "Menu Item 1's
Second Child" to Favourites</a>
</li>
<li>
<a href="example5.html">Menu Item 1's Second
Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
Expand "Menu Item 2"
</li>
<li>
Add "Menu Item 2" to Favourites
</li>
<li>
Menu Item 2
</li>
</ul>
</li>
<li>
<ul>
<li>
Open "Menu Item 3"
</li>
<li>
Add "Menu Item 3" to Favourites
</li>
<li>
Menu Item 3
</li>
</ul>
</li>
</ul>
As you can see, things start to get very complicated very quickly.
Is this the best way to convey this information or am I over complicating the matter?
Can you think of a better way for me to do this?
IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it.
Your tree should has following structure:
<ul>
<li>
<span>menu item 1<span>
<ul>
<li>
<span>child node 1</span>
</li>
<li>
<span>child node 2</span>
</li>
</ul>
</li>
...
</ul>
That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after span element. Then just use class to separate childNodes list from actions list:
...
<li>
<div>
<span>menu item 1</span>
<ul class="actions"> ... </ul>
</div>
<ul class="childNodes"> ... </ul>
</li>
...
Well... in theory classes aren't required but it's much easier to handle with classes rather ... ul > li > div > ul selectors etc.
According to first comment
Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have:
Add to favs
But using JS you do something like this (pseudo-code):
actionLink.addEventListener("click", function...
var id = take id: 123
do ajax request here
return false;
});
It's the best way to provide good availability and functionality at the same time.
About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches.
Sometimes I do as per Crozin's answer above but on a large site it can be impossible to load such a large tree (I have built systems for sites with over 100k pages).
A hybrid solution is to load in the tree so that the path down to the parent page only contains the current path and then display all the children of the parent. Then add JavaScript behaviour to add additinal parts of the tree.
Doing things this way means that non JS browsing can completely navigate the site but JS browsing gets the enhance functionality, all without the performance hit of building the entire tree.