Ive got the following code:
<ul>
<a href="./index.php?profile=User1">
<li>User1 : 16</li>
</a>
<a href="./index.php?profile=User2">
<li>User2 : 4</li>
</a>
</ul>
This works perfectly fine in all major browsers, but it isn't allowed/invalid HTML and the right way should be this:
<ul>
<li>
User1 : 16
</li>
<li>
User2 : 4
</li>
</ul>
But if I do it like the second example only the text not the whole <li> is clickable like i want it to.
Should I stay with the invalid working version or has anyone a better solution?
Use CSS to make the link take up the entire list item, eg. display: block (and any other styling you might want).
Wrapping links around list items is invalid HTML.
Short answer is NO, it won't be validated, only li can be inside ul and ol elements.
So this is incorrect
<ul>
<a><li></li></a>
</ul>
This is fine
<ul>
<li><a></a></li>
</ul>
Anchor tag is inline element so make it block using display:'block' so that it will take full width of its parent i.e. li tag
The second way around is the correct way to do it, you just have some minor styling issues.
If you set the <li>'s to have no padding and the <a>'s to have no margin, the links will fill the entire area of the list item.
You have to use the valid way.
And set the "a" tag with :
display: block
http://jsfiddle.net/TYVV6/1/
And if you don't want to show the points at the beggining of the list elements.
You'll have to use :
list-style: none;
Related
My personal website using a school template is behaving very weirdly. I tried to nest a ul within an ol. The parent ol numbers still show up in front of the ul item dots. For example, I typed
<ol>
<li>a</li>
<li>b
<ul>
<li>b1</li>
</ul>
</li>
</ol>
to expect
a
bb1
What I get instead looks like this:
It is as if nesting is not allowed. Once I disable styles the list displays properly. What command in CSS could have caused this?
I am trying to write a theme with multi menu at the header, should i use multi nav tag for each of them? Or wrap them all inside a nav tag?
Here is the example codepen.
header-a wrap everything inside nav tag.
header-b wrap menu and the element that between menu inside nav.
header-c wrap menu inside nav by each.
header-d add nav tag inside each bar to wrap everything inside bar.
Which method will be good in this case?
Thank you so much.
I think this is about semantics.
A nav element should wrap items that are part of the same navigation structure.
For example:
<nav id="topNav">
<ul>
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Contact</a>
</li>
</ul>
</nav>
<nav id="sideNav">
<ul>
<li>Products</li>
<ul>
<li><a>Oranges</a>
</li>
<li><a>Apples</a>
</li>
<li><a>Pears</a>
</li>
</ul>
</ul>
</nav>
<nav id="socialNav">
<ul>
<li><a>Facebook</a>
</li>
<li><a>Twitter</a>
</li>
<li><a>LinkedIn</a>
</li>
</ul>
</nav>
See this article
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
It does not seem there is an exact answer to this. Rather, the correct answer depends on how you want the semantics of the website to be read.
Try looking at the following sources:
http://html5doctor.com/nav-element/
https://stackoverflow.com/questions/14100279/html5-semantics-for-multiple-nav-
elements
http://w3bits.com/css-responsive-nav-menu/
There is information that states that all 4 of your options would be semantically correct. What you need to think about is how you want the navigation to be interpreted: 1) Should it be seen as one main menu? Then you would want header-a; 2) Should the menus be seen as groups of related menus? Then any of header-a, header-b or header-c would work.
I know I have not exactly given you an answer to your question but from what I can work out there is no straight forward answer.
Hope this helps in some way.
Please, is it possible to wrap the text of an <a> tag within a fixed size <li> tag in an inline menu?
Yes, as long as you use float: left on your <li> tags instead of display: inline. You're not supposed to use fixed width on inline elements.
Example: http://jsfiddle.net/CprcT/
I'm assuming you mean something like this...
<li>My Link</li>
In which case, technically yes... but why would you want to? Wouldn't it make more sense to do it the other way around like so...
<li class="menu">My Link</li>
Do I need to manually specify the height of a div which contains unordered list?
When I have it like this, main1 and main2 div overlap if I don't set the height of the div. Is there a way of doing it without specifying the height?
<div id='main1'>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id='main2'>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
have you tried with float property to float left or right?
#mail1 { float:left };
#mail2 { float:left };
Thanks
If they're overlapping, you've almost certainly got some other CSS applying to it. Use a debugging tool like Firebug for Firefox, the Developer Tools in Chrome/WebKit or the What's-It-Called Thingummy in IE, and look at the applied styles for the div/ul/li.
They won't overlap unless they're absolutely positioned or have other CSS magic applied to them, such as negative margins. Check that first and apply the necessary corrections.
Nonetheless, if you need to retrieve the dimensions of an element dynamically, for instance to dynamically position a highlight in a lava lamp-style menu, use jQuery:
$('#element').outerWidth();
$('#element').outerHeight();
Use position:relative property for two DIVs
I've never come across this problem before and its quite annoying me. I have a list which when hovered over, a box appears around it.
I have a list set out like the following
<div id="sidebar">
<h2>Our Services</h2>
<ul>
<li>Furniture</li>
<li>Kitchens</li>
<li>Bedrooms</li>
<li>Flooring</li>
<li>External Joinery</li>
<li>Commercial Work</li>
<li>Staircases</li>
<li>Tiling</li>
</ul>
</div>
But for some reason firefox doesnt render the whole list item as a link, only the text.
It works across other browsers (even IE) but not firefox.
Change
<li>Furniture</li>
To
<li>Furniture</li>
Inside a UL you are supposed to have LI elements, not anything else. However, inside the LI you can have other tags such as A
Update
You can set the style of A to display:block as mwgriffith suggested on comments.
or to make the whole line a link you can also assign a click event on the LI, here is an example using jQuery
I figured it out, instead of having the <li> display the background I used display:block on the <a> tags and uses the a:hover to create the background.