My code is as follows :
<ul>
<li> Custom Decor</li>
<li> Home Exterior </li>
<li> Cleaning Services </li>
<li> Heating & Cooling </li>
<li> Parts, Repair & Maintanence </li>
<li> Energy Effeciency </li>
<li> Sears Telecom </li>
<li> Protection Agreements </li>
</ul>
What I have is --
What I want is --
-Decor below Custom
-Exterior under Home
-Services under Cleaning , etc.
Something like this
two lines, 2 words .. How do I do this in CSS?
I can suggest you two solutions (second recomended):
Insert <br /> into your text, where new line should be inserted, or
Specify in CSS width of your item, and put between the words which should appear in one line.
Related
I have an eBay shop and when I make a listing I have a pre made template and I just import information to this template.
I have a short description, features, and specifications. And I need to add automatically <li></li> to every line and a pre made HTML table with custom style, Which will know how to separate with "/" symbol like I have in my private listing tool.
Is this even possible? And if it is any idea how?
I do not believe Magento works in that manner however there is an easy efficient way to accomplish this manually.
Try putting the code in Sumblime text 3 with teh Emmet plugin.
From there you can type a command like ul>li*8 (the 8 is the # of items or <li></li> tags) and then press the tab key.
the results will be
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
From there you can fill in the blanks between the <li></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 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.