I am new in web page design. I made a web site in html and css. I did not use wordpress or any kind of canned web designing site.
This kind of code does not work in mobiles. This is part the code in my website.
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
I researched, and the code that I see is this:
<li>Contact</li>
Can somebody tell me what "#" means?
What can I do to make my links suitable for tablets and mobiles?
Thank you in advance to anybody who can help me.
Try
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
also add css
a {display:block;}
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 am editing horizontal navigation bar and need to add description text before the links. My problem that all the text displays after links in the browser. How can I modify css or code to change the location of the text in nav bar? 'DIRECTORIES:' and 'SEARCH:' That I need to display in the browser just before the links, not after
<div id="navcontainer">
<ul id="navlist">
<li id="active">Home</li>
<li>SEARCH: Product Technologies</li>
<li>Trials & Registries</li>
<li> DIRECTORIES: PIs</li>
<li>PI Study Sites</li>
<li>Products
<li>Companies/Sponsors</li>
<li>MIB Custom Alerts</li>
</ul>
Maybe I'm misunderstanding the question, but isn't it as easy as going from this:
<li>SEARCH: Product Technologies</li>
to
<li>label goes hereSEARCH: Product Technologies</li>
Edit: In regards to your comment, why not: <li>Search</li>?
I'm trying to pull off the following Top Bar with Zurb Foundation.
(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)
So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).
Here's what's happening when I build that out...
And here's the code I'm using...
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Acme Company</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Hi, Joe!</li>
<li>
Change Settings | Log out
</li>
</ul>
</section>
</nav>
So how can I get Foundation to work with my original design example above?
Foundation uses the a tag to style it. You're better off putting them in two separate li tags.
e.g.
<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>
Your Hi, Joe! should go in a blank a tag also.
<ul style="padding-left:0px;list-style:none">
<li style="display:inline"> <strong> Home </strong> </li>
<li style="display:inline;margin-left:40px"> <strong>Photos</strong>
<ul style="padding-left:0px">
<li> find more </li>
<li> share more</li>
</ul>
</li>
<li style="display:inline;margin-left:40px"><strong> Edit </strong></li>
<li style="display:inline;margin-left:40px"><strong> Privacy </strong></li>
</ul>
</div>
Could any one tell me where Im doing wrong?why the find more and share more options goes down the home tab but not below the photos tab ? and also any other listed options goes below the home tab but i want them to be placed one below the photos and other below the edit tab .Take a look at these http://jsfiddle.net/karthik_64/HXqeD/4/
I wanted it to be like these
home photos edit Privacy
find more zoom options
share more more
Please help me with these.Any help is greatly appreciated. Thanks niko
what about http://jsfiddle.net/dfNjA/ ?
Replacing
<li style="display:inline;margin-left:40px"> <strong>Photos</strong>
With
<li style="display:inline-block;margin-left:40px"> <strong>Photos</strong>
will do the trick...
There seems to be conflicting examples in documents relating to the <nav> tag in html5. Most examples I've seen use this:
<nav>
<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</nav>
But I'm wondering if that's only because people are used to using divs. There are examples that I've seen that simply do this
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
The second way seems cleaner and more semantic to me. Is there an "official" correct version? Is there a good reason to still use a <ul> inside the nav tag rather than just use anchor elements directly?
Both examples are semantic.
In the first example, the list of anchors is explicitly an unordered list. In the second example, the list of links is just a collection of anchor elements.
If you simply want a one-dimensional collection of links, I recommend sticking with
<nav>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</nav>
however, using ul elements allows for explicit hierarchical menus (such as drop-downs or tree-lists):
<nav>
<ul>
<li>
Link
</li>
<li>
Link
<ul>
<li>
Sub link
</li>
<li>
Sub link
</li>
<li>
Sub link
</li>
</ul>
</li>
<li>
Link
</li>
<li>
Link
<ul>
<li>
Sub link
</li>
<li>
Sub link
</li>
</ul>
</li>
</ul>
</nav>
The only real difference might be how search engines might look at the links. When in an unordered list Google might for example understand that all the items in that list are related. In the second example Google might just as well assume none of the links are related. Google can use that information for indexing and display your information more accurately.
They may display the same, but really a lot of markup is about how information should be presented if there was no style attached to the page at all or if a bot is searching your website for relevant information.
You can use either.
A list only tends to be used as a list of links is generally just that, a list. But, it's up to you.
There is no real difference between them. However like Caimen said, search engines use the page markup to group data to better web search results. I'd advise you use the first if the links are quite similar on topic (eg for a blog) and the second if the links aren't so similar (for navigating results from a website search).