I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
Related
I'm trying to write a valid HTML however this fails:
<ol>
<li>First</li>
<li>Second</li>
<ul>
<li>First of second</li>
</ul>
</ol>
This fails at when generating javadoc. It says:
error: tag not allowed here: <ul>
Desired output should be like that:
First
Second
First of second
Isn't it valid to define ul inside ol?
Wrap the ul in an li, as the only valid children of ul and ol are li.
If you don't want the bullet to show, you can exclude them via a class
HTML:
<ol>
<li>First</li>
<li>Second</li>
<li class="no-bullet">
<ul>
<li>First of second</li>
</ul>
</li>
<li>Third</li>
</ol>
CSS:
.no-bullet {
list-style: none;
}
fiddle
If you don't want to use CSS, either use inline-styles or the type attribute:
<li style="list-style: none;">Item</li>
OR
<li type="none">Item</li>
Place the unordered list ul inside the list item li,
<ol>
<li>First</li>
<li>Second
<ul>
<li>First of second</li>
</ul>
</li>
<li>Third</li>
</ol>
fiddle
I'm making use of ul's inside of li tags
<ul>
<li>
<ul>
<li>..</li>
</ul>
</li>
</ul>
And my question is, how can I avoid the inner ul finding itself automatically rendered slightly pushed to the right hand side (what would seem to a be a default accordeon "styling")? without playing around with negative margins.
Further #Vucko comment
ul ul {
padding-left:0;
}
<ul>
<li>
Text
<ul>
<li>..</li>
</ul>
</li>
</ul>
I m having a list with ul and li s.
Now I want to apply a css rule to the parents only and not to the children.
For this I'm using the > symbol but that is applied to the children as well.
The example here
The code I used at the css -
#nav > li a {
padding-bottom: 30px;
}
The html being -
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
I think you want to use #nav > li > a which covers a children of the <li>. Otherwise any <a> descendant of the <li> is also selected (which is everything).
As of CSS3, there is no way to select an element based on its children. I think that something like that is coming in CSS4, but I'm not sure.
Small note: the > selector selects only the children, not the parents and the children.
To make lists horizontal and hide default bullets, is it necessary to give {display:inline} and {float:left} both to the <li> tags or anyone of these alone is enough?
<ul>
<li>First item</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>Last item</li>
</ul>
How to make cross browser (including IE6 and FF2) , pixel perfect horizontal list without bullet in best way?
What is best and short method?
ul {}
li {}
a {}
No, either one alone is enough. You could even use inline-block if you like, although it doesn't have very good support in FF2. Hiding bullets is done with list-style:none;
You could setup a simple test quickly to check these:
#one, #two, #three { list-style:none }
#one li { float:left }
#two li { display:inline }
#three li { display:inline-block }
<ul id="one">
<li>Float left</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="two">
<li>Display inline</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="three">
<li>Inline-block</li>
<li>In this example</li>
</ul>
See how they render: http://jsbin.com/opiqu3/
display:inline is not necessary but float:left is necessary to make it horizontal and like you said about hiding default bullets, then even list-style:none is also necessary.
Here are three shots of the same code illustrating what I mean. As you can see, they really vary.
And the code, for reference, is:
<ul>
<li>num 1</li>
<ul>
<li>num 1.1</li>
<li>num 1.2</li>
<ul>
<li>3rd level</li>
</ul>
</ul>
<li>num 2</li>
</ul>
I suppose this could be due to a variety of things, but it doesn't hurt to ask.
1:
It seems to me your html is wrong, you cannot have an ul inside an ul. The correct syntax is:
<ul>
<li>num 1
<ul>
<li>num 1.1</li>
<li>num 1.2
<ul>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
<li>num 2</li>
</ul>
Notice that all the closing li's have moved to the end of that list item (including it's sub-items).
Using a css reset it should display the same way in all browsers (more or less...).
vertical space is generally controlled through CSS with line-height. For example,
li { line-height: 40px; }
You may find this article useful, which lists some of the common CSS attributes used to style lists
EDIT:
In response to your edited question, you can control horiztonal spacing using margin-left. for example
<ul>
<li>num 1
<ul>
<li>num 1.1</li>
<li>num 1.2
<ul>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
<li>num 2</li>
</ul>
with CSS
li ul li { margin-left:100px; }
will space lists of depth 1 or more 100px to the right. Here's how that looks
I generally turn off an margin padding and line-height for li, ul, ol in CSS. I'm almost certain most browsers use margins to set this, but to be sure I set them all to 0.
ul, ol, li {
padding: 0;
margin: 0;
line-height: 0;
}
Depends on how you want to add the spacing.
You can use either top/bottom margin or padding. In your case I would choose margin:
li {
margin: 5px 10px 5px 1em;
}
Also make sure you use a reset class to normalise the differences between browsers.