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?
Related
I am trying to put a div inside a numbered list, something like this:
<ul>
<li></li>
<div>
<li></li>
</div>
</ul>
And after the div tag, I lose the numbers, they transform into a bullet list.
How can I keep track of the numbers?
If you want to write any functionality for this div the put div inside li like
`<li>
<div></div>
</li>`
And
If you want to perform any functionality for the li then simply give the id to that li and work on further.
It is illegal html , you cannot have a div in that position
You need to do
<ul>
<li></li>
<li><div></div></li>
</ul>
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;
How to get these lists (the unordered lists inside list items 1 till 4) next to each other with css3?
This is the code i have been using, i have been trying several methods but i can't seem to get the hang of it
<footer>
<ul>
<li>1</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
</ul>
<li>2</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
</ul>
<li>3</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
</ul>
</ul>
</footer>
Did you try putting the "inside" <ul>s into divs, and then applying styles to the <div>s to give them width, and then float them to the left?
Something like the following jsfiddle: http://jsfiddle.net/msturdy/yJ2Kw/4/
I will admit that I'm not sure about whether it is a good idea to put a <div> inside a <ul>, but it works well here in Chrome and Firefox!
( EDIT: updated link to take into account the closing of the </li> tags after the nested <ul> )
you need to set the display property of the list items you want next ot each other to inline, like this:
ul ul li { display: inline; }
My site's h1 is also the "home" link, so obviously I put it within the nav tag. The other links in the nav were originally put in an unordered list, like this:
<nav>
<h1>Site Name</h1>
<ul>
<li>Nav Item 1
<li>Nav Item 2
<li>Nav Item 3
</ul>
</nav>
Standard, right? As you can imagine, on subpages, the nav stays the same but the "active" class gets applied to the relavent Nav Item.
Here's the problem. At mobile screen widths, the nav compresses into a dropdown menu where the "active" link is the only link shown above the drop. That's fine on the homepage where the h1 is the active link, but it seems like my CSS is going to get super messy on subpages.
I've been noticing that some well respected frontend developers use list items free of ordered/unordered lists. These are folks who hold semantics in high esteem, so it made me wonder they might be thinking...
So I'm stuck. It seems wrong to put my h1 in the ul, but this also seems wrong:
<nav>
<li><h1>Site Name</h1></li>
<li>Nav Item 1</li>
<li>Nav Item 1</li>
</nav>
I know that I can get the LOOK of what I want to achieve almost any way I markup the HTML, but I'd like to do it as semantically as possible while avoiding a CSS/JS nightmare / or any hacks.
The standard is clear :
Permitted parent elements :
ul, ol, menu
Any other use should be avoided as a browser might very well not support it.
The fact the norm prohibits it means there is no accepted semantic, apart the one each developer invents for his own use.
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.