I'm experimenting with a design. It seems I can't get my CSS right. I have a horizontal list with a list in each of it's list items. The nested list doesn't seem to behave properly. What am I doing wrong here?
http://jsfiddle.net/89sqw/
The nested list doesn't have the squared list type, and the margin is all wrong.
Everything you apply to #tfList li is valid to your nested list items too (unless you override). Also, you shouldn't have two elements with the same id, use classes instead.
Several prolems:
1) As mentioned by #bfavaretto, you can't have multiple elements with the same ID
2) You aren't closing your "P" tags. Closing tags have a slash (</p>)
3) You are using display: inline on an element which will contain block elements. This is invalid not good practice and will likely give you problems. Use inline-block instead:
#some-item {
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}
Edit: Tip - you can use special "child" selectors to only select immediate children of an element. http://jsfiddle.net/ryanwheale/F3cqD/
<ul>
<li>
Level 1
<ul>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
</ul>
And these styles
ul > li {
color: red;
}
ul > li > ul > li {
color: green;
}
The issue is easy to miss, but it comes from having overridden the display property of #tfList li elements to display: inline, and then mistakenly trying to re-set it to display: block;.
The correct display for a list item is:
display: list-item;
Also, to get the spacing back on the list items, set the left padding on the ul element.
Fiddle
Related
So I have some code that looks like:
<ul>
<li>
<ul>
<li> ... </li>
</ul>
</li>
</ul>
This has indented itself. I have no styling to indent this. According to the computed styling there is no margin-left, yet everything is actually indented, I guess this is the default behaviour of nested ul elements?
Regardless, on every nested ul, I have a class that is called comment-children I need to say only 5 down can indent (so .comment-children .comment-children .comment-children .comment-children .comment-children done, great) but at a width of 640px, all nesting must be turned off.
The part I am having the trouble with is that the ul elements are nested by default http://jsfiddle.net/d7az0jv3/
What do you want to do
Remove all default nesting and let me nest it my self via the class comment-children
At 640px remove all nesting.
Your example is insufficient to demonstrate what you want to do involving the class comment-children, but generally, to remove the indentation on lists across browsers, you should implement the rules
ul, li { margin-left: 0; padding-left: 0; }
Here's an updated jsfiddle
If you want to only nest elements up to a certain level, my recommendation would be to apply a class to the base ul that sets the indentation, and then add a rule that stops the indentation at a certain depth below that base class. Here is an updated version of your code with the nesting stopping at level 5.
HTML:
<ul class="comment">
<li>level one</li>
<li>
<ul>
<li>level two</li>
<li>
<ul>
<li>level three</li>
(etc., up to level seven)
CSS:
ul {
list-style:none;
}
ul, li { /* reset the margin and padding */
margin: 0;
padding: 0;
}
.comment ul {
/* 1 em margin for the UL elements under .comment */
margin-left: 1em;
}
.comment ul ul ul ul ul {
/* stop the nesting! */
margin-left: 0;
}
jsfiddle for this
I have this HTML:
<div class="navbar">
<ul>
<li>Foo
<ul>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
I want to apply CSS only to item "Foo." I do not want to tag every top-level <li> with a special class. My limited knowledge tells me I should be able to do this:
.navbar > ul > li {
text-transform: uppercase;
}
But the style gets applied to "Bar" as well when I do it like this. I thought that '>' specifies only immediate children, does it not work the same way when it's nested? Is what I'm trying to do even possible?
I thought that '>' specifies only immediate children, does it not work the same way when it's nested?
It does work the same way. Since you're anchoring the ul directly to .navbar with .navbar > ul, your selector does apply to li elements directly that particular ul only.
The problem is not with the selector; it's the fact that text-transform, like most text properties, is inherited by default. So even though you're applying the style only to immediate li elements, the nested ones receive it by inheritance.
You will need to reverse this manually on the nested elements:
.navbar > ul > li li {
text-transform: none;
}
I have a bunch of unordered list elements that are stacked side by side with each other. To accomplish this, the style rule typically applied is:
#slide ul,li{
float:left;
list-style-type:none;
}
I need to introduce another unordered list of elements that behave the way the ul and li element typically do; that is stacked on top of each other but without any list-style-type, and to achieve this:
.stack ul,li{
list-style-type:none
}
The problem is that the styles of stack class for ul,li do not apply and the elements stack next to each other as they are being in the case of ul,li for #slide.
Check it out on this js fiddle:
http://jsfiddle.net/G7JHK/
Are my selectors wrong?
P.S: I have tried this out with class/id and various combination of both but the result is always the same.
Because of the comma in your selector you were applying float left to all li elements. Try something like this:
<ul class="stack">
<li>element 1</li>
<li>element 2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element 4</li>
</ul>
#slide li{
display:inline;
}
This css will make all list elements in the div 'slide' display in a row and all other list elements will continue to display like normal. It saves you having to use two different classes :)
Your CSS should be like so
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
I think you want something like:
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Look at the selectors. You want to select a ul with class stack (ul.stack) and find its child li.
There is problem of your selector. class or id of same element never separated by a white space. They should be with no space and the child are separated by a space but no ',' will not be used there..
So you can try this in your code
ul.stack li{
display:block;
}
ul#slide li{
float:left;
}
Also you have to place the HTML tag name first and then the preceding attribute.
The problem is that you selected the ul that is a descendent of slide, but your ul has an id of slide, so it doesnt work, because there is no ul that has a container with an id of slide. Also by putting ,li you are selecting all list items on the page. You want to have #slide li, which will only select the list items with a container id of slide. You don't need the #slide ul so your final code should be
#slide li {
float:left;
}
http://jsfiddle.net/G7JHK/6/
As an alternative, you could use ul:nth-of-type(2) instead of an id to save some space in the html
http://jsfiddle.net/G7JHK/7/
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}
i know this might seem straightforward, but i can't solve it, im trying to make the whole list item linkable, rather than just the word home
the html code:
<li class="current">Home</li>
p.s. when you hover the li, background color changes, so i want that whole list item to be hyperlinked, if you get what i mean, not just the word
Wrapping a block level element (the li) within an inline-element (a), is invalid mark-up, which has the potential to throw errors, depending on your doctype. That being the case, first change your mark-up around to:
<li>link text</li>
Assuming that your li is display: block then the following will cause the a to 'fill' the available space:
a {
display: block;
width: 100%; /* this may, or may not, be necessary */
}
If you're using this for a horizontal list, and the li are display: inline, then you can use the following:
a {
display: inline-block;
}
And style-to-taste.
Do it in reverse
<li class="current">Home</li>
not sure what your other styles are but you can change the tag with something like
li.current a{
display:block;
}
This should do it:
HTML:
<li class="current">Home</li>
CSS:
li a {
display: block;
}
// or
li.current a {
display: block;
}