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.
Related
This is pretty straightforward.
I have the following HTML structure:
<ul id="myContactList">
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
...
</ul>
and the trouble maker CSS:
ul#myContactList>li>ul>li {
float:left; /* Trouble maker */
}
Here's the JSFiddle.
Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?
Thanks in advance, cheers! :)
It is targeting it, but you have an issue with the floats not being cleared in the last list item. See http://jsfiddle.net/ekXjy/4/ (specifically line 20 of the CSS, which causes a new float context for each list item).
ul#myContactList>li>ul {
list-style-type:none;
padding:0;
overflow: hidden; /* New style, to clear the floats contained within */
}
The clear:both you had for ul#myContactList>li>ul clears the floats for the list items preceding the last one, but nothing cleared the floats in the last item. Using overflow:hidden to give each list item its own block context fixes that.
I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:
<ul id="menu">
<li id="nav-1">Home</li>
<li id="nav-2">Menu 1
<ul id="subnav-2">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li id="nav-3">Menu 2
<ul id="subnav-3">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li id="nav-4">Other tab without submenu
</li>
</ul>
I can't seem to find anything online to make this work. Any ideas?
If you don't mind using libraries I would recommend using bootstrap. It makes really easy creating menus with drop-down submenus and it comes with a default style that is quite neat. You should have a look at this:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
If you need to do it on click, you'll need javascript. If you're ok with doing it on hover, you can do this:
#menu ul{
dispaly: none;
}
#menu > li:hover ul{
display: block;
}
Caveats: this will only work in IE7+. You'll also still need to position the dropdowns appropriately (absolute positioning, most likely).
Edit: Whoops! You said "click", not "hover". Sorry. I'll just leave this here in case it helps someone else.
I have an example of four techniques for pure CSS hierarchical menus from semantic markup here:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html
Here's an example of a single technique:
http://jsfiddle.net/FX4Dz/1/
<nav><ul>
<li>Header 1<ul>
<li class="sub">Subhead 1.1<ul>
<li>Subhead 1.1.1</li>
<li>Subhead 1.1.2</li>
</ul></li>
<li>Subhead 1.2</li>
<li>Subhead 1.3</li>
</ul></li>
<li>Header 2<ul>
<li>Subhead 2.1</li>
<li class="sub">Subhead 2.2<ul>
<li>Subhead 2.2.1</li>
</ul></li>
</ul></li>
</ul></nav>
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul {
display:block;
position:absolute;
top:1.4em; left:-1px; /* align with respect to horizontal row */
width:8em; z-index:2
}
nav li li:hover ul {
left:8em; top:-1px /* subnav menus align next to their menu item */
}
The Swimbi app generates rather clean CSS code of drop down menu. You can use the app or just copy the CSS from the demo page http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea
http://css3menu.com/
Download this and make yourself one, then go through the code, edit, and learn
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
I have a list:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
...
</ul>
All the <li> are floating. I need the height of the <ul> box. If I remember correctly this is not valid:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
...
<hr class="clear" />
</ul>
.clear {
clear: both;
}
How can I do this? The number of items in the list can be different so I can't use fixed height.
Good options to contain the floats:
Add overflow: hidden to the ul.
Use clearfix.
This isn't a direct answer to your question, but as an alternative could you consider using display:inline-block? These days I just use that instead of float where possible, as essentially most of the time it can achieve the same sort of objective without the total hassle of making containers properly contain inner floating elements and having to clear them all the time.
test it:
ul { overflow: hidden; }
li { float:right; display:block; }
add class to your elements, don't do this for all elements.
Here, i am presenting, one of the easiest way to handle this kind of situations.
Float left always have some reaction and not good to use if we have some alternative of it.
The Alternative is :
li { display:inline-block; }
No need to add extra code like float:left and overflow:hidden :)
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.