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;
}
Related
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.
I'm trying to style two unordered lists differently on my page - no list style for the nav at the top, and regular list styling in the form.
Here's my simplified markup:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
form ul, li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
When this is run, both the nav and form ULs are coloured red and also lack list styling.
Replace nav ul, li with nav ul, nav li and form ul, li with form ul, form li.
Your code should be as follows:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
/*Targets all "li" elements that have "form" as parent*/
form ul, form ul li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
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.
How do I enter the following code into CSS so that I don't have to copy and paste it in every HTML page?
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
My issue is especially with the "ul" and "li" -I am not sure what to do with this! Any help would be greatly appreciated- thanks!
Place your css in a separate file and use the following directive to make it accessible in each page:
<link href="url to stylesheet.css" rel="stylesheet" type="text/css">
Place the html in a seperate .CSS stylesheet and reference it as:
<link href="url to stylesheet.css" rel="stylesheet" type="text/css">
To use the ul and li tags you would write something similar to this:
<ul>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
Create a CSS file and link it to your HTML file.
Add your css in separate .css file and call it in html file
<!DOCTYPE html >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/