On the following code I do NOT want the 'level 2' list items be overlapped. How can I achieve that. Here is my sample code.
<style type="text/css">
.tree-ul
{
background:none;
margin:0px 0px 0px -70px;
padding:0;
clear:both;
}
.tree-ul li {
clear:both;float: left;
position: relative;
display: inline-block;
height:100px;
width:100px;
border:solid #099 solid 1px;
background:#CCC;
list-style:none;
margin:5px 5px 0px 70px;
}
</style>
<ul class="tree-ul">
<li>Level 0
<ul>
<li>Level 1
<ul>
<li>a Level 2</li>
<li>a Level 2</li>
<li>a Level 2</li>
<li>a Level 2</li>
<li>a Level 2</li>
<li>a Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1
<ul>
<li>b Level 2</li>
<li>b Level 2</li>
<li>b Level 2</li>
<li>b Level 2</li>
<li>b Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
</li>
</ul>
The idea is to show the boxes vertically without being overlapped.
Thanks in advance.
Related
I have an unordered list with bullets, but the first li I want without a bullet
I can't figure out how I can just one item without a bullet
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
you can do like this:
using first-child/first-of-type, no need for extra markup (using class)
li:first-child {
list-style: none
}
<ul>
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
if you need to remove the bullet from just this specific list, then set a class to ul and do it like this:
.list-no-bullet li:first-child {
list-style: none
}
<ul class="list-no-bullet">
<li>item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
You can do this with the list-style property
li:first-child {
list-style: none;
}
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You can also replace first-child with nth-child(index), if you want to select a specific item that isn't first or last, e.g.
li:nth-child(3) {
list-style: none;
}
To remove a bullet you would use list-style: none. There are a number of other valid styles you could also use including roman numerals, images and positioning of the bullet: MDN
.no_bullet {
list-style: none;
}
<ul>
<li class="no_bullet"> item 0 </li>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
i need to create UL list in html 4X2
something like this
item1 | item2 | item3 | item 4
item5 | item6 | item 7| item 8
Is that possible to do with ul list?
I know how to create klasic licst.. like
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
You can use the float CSS property to achieve this.
A JSFiddle demo.
li {
float: left;
width: 25%;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</ul>
Just show li element inline and make two separate lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
And the CSS:
li { display:inline; }
If you want more control, you can put inline-block and set width, margin, etc.
JS Demo
Like this
demo
css
ul{
margin:0;
padding:0;
}
li{
display:inline-block;
border:1px solid black;
margin:5px;
}
You can add max-width to UL to width that is not more than four ite
I basically have a menu like it shown below in the HTML code, and I want to add "|" before each "li" within the menu to give it the look of (Home | About | Contact). Everything is working, however, I am having a problem of deleting the "|" from the very first "li" in each "ul" within the menu.
So at the moment my menu is shown like: ( | Home | About | Contact), how do I get rid of the "|" that is on the first "li" element?
currnt CSS:
#mainMenu li:before{
content: "|";
color: blue;
}
I have tried to give it a class of "first" and then use li.first {contnet:none} but no hope.
<nav><ul id="mainMenu"><!--Main Menu-->
<li class="first">Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
Change your css to this: (using sibling selector)
#mainMenu ul li ~ li:before {
content: "|";
}
The above style will be applied to the elements which have previous sibling elements (li ~ li). Hence this styling will not be applied to the first li element because it doesn't have any previous sibling elements.
How about:
#mainMenu ul li:first-child:before{
content: '';
}
You can exclude the first element using :not pseduo selector.
#mainMenu li:not(:first-child):before {
content: "|";
color: blue;
}
Js Fiddle Demo
#mainMenu li.first:before{
content: none;
}
I think this should work.
I have an img floated to the left followed by a long ul that should render to the right of the img then continue below it. It does this, but the portion of the ul next to the img it all left aligned and loses its indentation.
Here is a minimum case example. (also in jsbin)
<html>
<head>
</head>
<body>
<div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
<ul>
<li>Level 1</li>
<li>Level 1</li>
<li>
<ul>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
<div style="clear:both"><!-- --></div>
More content More content More content More content More content More content More content More content More content More content More content
</body>
</html>
I appreciate your help.
Try this:
/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}
/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}
css:
div {margin:0 10px 5px 0; float:left;}
ul{
padding:0px;
list-style-type:none;
margin:0px;
}