<div id="headermenu">
<ul >
<li id="menu1"><img src="images/menu1.png"/></li>
<li id="menu2"><img src="images/menu2.png"/>
<ul class="submenu2">
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
</ul>
</li>
<li id="menu3"><img src="images/menu3.png" /></li>
<li id="menu4"><img src="images/menu4.png"/></li>
<li id="menu5"><img src="images/menu5.png"/></li>
</ul>
</div>
css
#headermenu ul ul {
display: none;
}
#headermenu ul{
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li{
width: 20%;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
left:0;
}
#menu1:hover{
background: url('images/menu1hover.png');
}
Hover is not working, I wonder how to make a list with image hover, I also want to know how to make a sub list when a li is hover. And if there is another list on sub list how to make it.. on pure css..
As you haven't given us all the information we need to solve this I will take a guess. As I said in the comments. It could be caused by the <img> sitting on the background, so when you hover you cant see the background at all.
HTML:
<div id="headermenu">
<ul>
<li id="menu1"><img src="http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg"/>
</li>
</ul>
</div>
CSS:
#headermenu ul ul {
display: none;
}
#headermenu ul {
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li {
width: 20%;
height: 50px;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
overflow: hidden;
border: 1px solid;
}
#menu1:hover {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
Here is your code as is, the background image is changing but cannot be seen because of the <img> in front.
DEMO HERE
Now here is the same code but the <img> being removed.
<div id="headermenu">
<ul>
<li id="menu1">
</li>
</ul>
</div>
DEMO HERE
We can see that the hover does work but the <img> was coving it up.
Solutions:
Just simply set a background on each li and then a background when on hover.
CSS:
#menu1 {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
#menu1:hover {
background: url('http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg');
}
DEMO HERE
You could also set the display to none for the img when on hover.
CSS:
#menu1 {
background: url('http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg');
}
#menu1:hover img {
display: none;
}
DEMO HERE
There are many more ways but these are two that will work.
You need to use either a background image, or an actual img for both before and after states. In your example, when the mouse hovers over #menu1 the background behind the menu1.png image is changed but menu1.png is obscuring it from view.
try this code
DEMO
<body> </body>
.urlImg { width: 140px; height:140px; display:block; background-image: url("http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg"); } .urlImg:hover { background-image: url('http://placehold.it/140x140'); }
HTML:
<footer>
<div class="foot">
<ul>
<span class="facebook"></span>
<span class="instagram"></span>
</ul>
</div>
</footer>
CSS:
.facebook {
display:block;
background-image:url("../images/facebook.png");
height:64px;
width:64px;
}
.instagram {
display:block;
background-image:url("../images/instagram.png");
height:64px;
width:64px;
}
.social {
height:64px;
width:64px;
display:inline-block;
position:relative;
margin:0 auto;
}
footer {
height:75px;
width:inherit;
bottom:0;
position:fixed;
}
.foot {
text-align:center;
}
The way I'm going about it could possibly be the wrong way. Any direction/advice would be great. I've tried using z-index and other properties but just nothing is working. I kinda wonder if it has to do with positioning/display inline.
A <span> should not contain any display:block elements anyway, it was designed for inline content although you can use it your way. Try use the <img> tag instead.
And wrap all your lines inside lis because you are using an ul
The links worked for me with no trouble.
You don't even need the span. You can move the class to the <a and have either 2 (social & facebook), or just make it to one css each with the inline and margin.
A span can have display:block property, but why you add span if you have your link ? I cleaned up your html :
HTML
<footer class="foot">
<ul>
<li></li>
<li></li>
</ul>
</footer>
and CSS
.social-facebook {
background-image:url("../images/facebook.png");
}
.social-instagram {
background-image:url("../images/instagram.png");
}
.social {
height:64px;
width:64px;
display:block;
margin:0 auto;
}
.foot {
height:75px;
width:inherit;
bottom:0;
position:fixed;
text-align:center;
}
I removed properties repetition and add a little bit of OOCSS :)
Well, I coded this page, but I got stuck at why does the third column is pushing down my text (or other elements). It uses the same style from the first box, but while the first box is ok, the third one is pushing the elements down by some pixels.
Like this:
HTML
<div id="contentWrapper">
<div id="sideBar">
<div class="sidebarBox"></div>
<div class="sidebarContent">
<h4>
Índice
</h4>
<ul class="tree">
<li>
Sinopse
</li>
<li>
Tropas
</li>
<li>
Geladeira
<ul>
<li>
Lógica
</li>
<li>
Gênio
</li>
<li class="last">
Horror
</li>
</ul>
</li>
<li>
Notas
</li>
<li>
Mídia
</li>
<li class="last">
Referências
</li>
</ul>
</div>
</div>
<div id="mainBody"></div>
<div id="infoBar">
<div class="sidebarBox"></div>3º Column
</div>
</div>
CSS
* {
margin:0;
padding:0;
font:normal normal 14px/20px Helvetica,Arial,sans-serif
}
h4 {
font-size:14px;
font-weight:700;
text-transform:uppercase;
padding-top:10px;
border-bottom:2px solid #2a558c;
margin-bottom:10px
}
#contentWrapper {
display:table;
border-spacing:0;
width:100%;
height:500px
}
#contentWrapper > div {
display:table-cell
}
#sideBar {
background-color:#E4E5DD;
width:200px
}
#mainBody {
background-color:#EEEEE6
}
#infoBar {
background-color:#e4e5dd;
width:200px
}
#footer {
background-color:#323540;
height:50px
}
.sidebarBox {
background-color:#323540;
height:30px;
width:100%
}
.sidebarContent {
padding:15px
}
I messed a lot with the Firebug and even tried to open it in IE and Chrome, with same results. Both columns use the same CSS, and this difference is freaking me out. I thought about "fixing" it with some negative margins, but I want to understand the problem first, insted of "workahacking" away.
Thanks a lot in advance!
Add vertical-align: top to #contentWrapper > div. Currently it is baseline.
Have a fiddle!
CSS
#contentWrapper > div {
display: table-cell;
vertical-align: top;
}
Without vertical-align: top, the div is basing its vertical alignment on .sidebarContent which has 15px of padding. This is resulting in the 15px gap.
Change the following and it should fix your problem. I've found that when using display:table-cell it always mis-aligns the last cell unless I specifically give it a vertical alignment
#contentWrapper > div {
display: table-cell;
vertical-align:top;
}
Example
Add display:inline-block to this class:
.sidebarBox {
background-color: #323540;
height: 30px;
width: 100%;
display: inline-block;/*Add this*/
}
fiddle
.sidebarBox {
float:right;
}
will work.
Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}
I have these nested ul and li . When i fill background color, nested li leaves indented portion white. I have a number of li like this that gets filled from database so i cannot give margin left to individual text in li . How can i do this so that background fills whole line along with the indentation?
Right now it looks like this
I want it like this
Any suggestions how can do this? Thanks in advance. I cannot change the html markup as i'll have to change a lot of code. Is there a way to do this using this markup. these li are coming from db query so i dont have exact number of li in this case.
Demo http://jsbin.com/uReBEVe/1/
By default, <ul> has padding-left to accomodate the bullet point.
If you add this to your CSS:
ul {padding-left:0}
ul>li {padding-left:40px}
You should get the effect you want.
EDIT: Also you need to correct your HTML :p <ul> can ONLY have <li> as children.
Best thing to do is to use a structure which makes it easy for database management , html and styling(CSS) .
HTML:
<body>
<ul class="main">
<li>1.</li>
<li><ul>2</ul></li>
<li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>
CSS:
.main{
position:relative;
right:40px;
}
li{
list-style:none;
background:red;
margin-top:1px;
}
Fiddle 1.
I dont know if ul not containing li is valid or invalid.If its invalid then you can use:
<body>
<ul class="main">
<li>1.</li>
<li><ul><li>2</li></ul></li>
<li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>
Fiddle 2
Flexible, Multi-Level Nesting Solution
This is very similar to another question I answered here, and I've composed a similar solution for you below. You will want valid html by having all nested li elements inside their own ul (as others have noted here), and it would be best to control all this by some class on the outermost ul (though that is not required, but makes targeting this list a whole lot easier).
The key here is supplying the background through the :before pseudo-element, which is made to span the whole width of the outermost ul.
Here is my demo jsbin.
HTML
<ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.full-width-list {
position: relative;
padding: 0 0 0 4px;
}
.full-width-list ul {
margin: 0;
padding: 0
}
.full-width-list li {
list-style:none;
padding: 0;
margin: 0;
height: 1.2em;
line-height: 1.2em;
}
.full-width-list ul > li {
margin-top: 4px;
padding: 0 0 0 36px;
}
.full-width-list li:first-child:before {
content: '';
height: 1.2em;
position: absolute;
left: 0;
right: 0;
z-index: -1;
background:red;
}
.full-width-list li:first-child:hover:before {
background:green
}
Limitations
This solution has two main limitations:
None of the ul or li elements can have a position other than the default static set on them, as the :before pseudo-element of the li elements needs to have its only positioned parent be the .full-width-list element.
There has to be a set height on the li items. In my example I use 1.2em, but whatever height you set, it means that the li elements cannot go to two or more lines of text (so this solution only works with a single line of text).
You can do this with :before hack as you have no access to the code
Working jsBin Demo
CSS
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}
This works at arbitrary depths without hacks or nonsense.
The people saying "can't" and "impossible" in this thread really need to learn what those words mean with respect to CSS (generally, "haven't figured out how yet.") :)
The idea is simple: set a :before selector which fits the left and right edges by absolute positioning and paints a background color. You need to set a z-index: to put it behind its content, a content: '\0020' to force it to paint (that's a non-breaking space,) and you're good.
You can bound this by setting it inside a position: relative container.
<!doctype html>
<html>
<head>
<style>
li {
list-style-type : none;
margin-bottom : 0.25em;
}
li:before {
position : absolute;
left : 0;
right : 0;
background-color : #eef;
content : "\00a0";
z-index : -1;
}
</style>
</head>
<body>
<ul>
<li>Test</li>
<li><ul>
<li>Test</li>
<li><ul>
<li>Test</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>
Your markup is broken, you should nest li in a single ul like this:
<ul>
<li>Text</li>
<li>Text 1</li>
</ul>
This was your markup
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
<ul>
I assume you see why this is wrong.
I've fixed the JSBin for you and it has the correct effect.
EDIT: You could of course add the padding-left by looping over all lis using javascript.
You could not be sure enough about browser consistency until markup cleanup and consistency, sad but true. All the suggestions from above looks good, there is bit of alternative from my practical view.
The markup:
<ul>
<li>A</li>
<li><p>B</li>
<li><p><p>B</li>
<li><p><p><p>B</li>
....
</ul>
And CSS:
li p {
padding-left: 1em;
display: inline;
}
JSbin
p tag is optional to close in HTML subset, and generally should works in every browser anyway no matter of doctype. In case you are on xHTML and worry about validation an option could be using closing tags like:
<ul>
<li>A</li>
<li><p></p>B</li>
<li><p></p><p></p>B</li>
....
</ul>
Try this:
<ul class="lvl1">
<li>A</li>
<ul class="lvl2"><li>B</li>
<ul class="lvl3"><li>B</li></ul>
</ul>
</ul>
li {
background: none repeat scroll 0 0 #FF0000;
list-style: none outside none;
margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}
See here: http://jsfiddle.net/x5K4a/
1) Your HTML is invalid (missing <li> around <ul>)
2) The only way to make indentation work as you expected is a CSS rule for each level.
ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...
http://jsbin.com/uReBEVe/12/edit
if it is just a matter of background-color, you can use a shadow of same color.
http://codepen.io/gc-nomade/pen/fxBAl (html structure fixed)
<ul class="ulparent">
<li>
<p>A</p>
<ul>
<li>
<p>B</p>
<ul>
<li>
<p>B</p></li>
</ul>
</li>
</ul>
</li>
</ul>
.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}
Else, if it is a background-image, i would use pseudo-element and background-attachment:fixed;(demo included in codepen , using a linear-gradient as image )
I am going to give you the proper idea how to apply css rules over the HTML contents.Below the css rules I have created just copy it and see the answer.It is the child combinator which I used!I inspect whole the answers provided by the different users which is not followed the css rules at all. Just let me know! Hope the answer!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
li{
list-style:none;
background:red;
margin-top:4px;
}
body>ul>ul>li{
margin: 4px 0 0 -40px;
}
body>ul>ul>ul>li{
margin: 4px 0 0 -80px;
}
body>ul>ul>li {
padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
padding:0px 0px 0px 80px;
}
li:hover{
background:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Save the image at first to your local drive or drag and drop this image into the new tab browser to see more visible.
Here is the proper HTML structure that you should follow, with each UL element having two LI elements. One for the value of each line and one as the parent for the next indented value.
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
<li>
</ul>
For the CSS, this solution requires you to have a max number of 'levels' in your list hierarchy (see code comment)
li {
list-style:none;
padding-left:0px;
box-sizing:border-box;
}
ul {
padding-left:0
}
ul > li:nth-of-type(1):hover {
background:green
}
ul li:nth-of-type(1) {
padding-left:50px;
background:red;
margin-top:4px
}
ul li li:nth-of-type(1) {
padding-left:100px;
}
ul li li li:nth-of-type(1) {
padding-left:150px;
}
/*
Continue incrementing the padding for the li
children for however many levels you want
*/
Make note, the nth-of-type selector is supported by all browsers EXCEPT for IE8 and below.
See JSBin for working example: http://jsbin.com/uReBEVe/51
Good luck!
Both UL and OL inherit margins. Your fix would be to zero out the margin:
ul, ol
{
margin:0;
}
You can add this CSS in your code to get your desired results:
li {
list-style: none;
background: red;
margin-top: 4px;
}
ul {
padding: initial !important;
}
ul ul li {
padding-left: 40px;
}
ul ul ul li {
padding-left: 80px;
}
li:hover {
background: green;
}
Result on jsbin is here: http://jsbin.com/uReBEVe/33/edit
#AsrafulHaque has the correct idea about using padding to extend the background width without changing nesting indents.
However, because you don't know how many < li> there will be, you can't expect this to be a pure CSS solution.
You're attempting to do a pretty awkward thing but it would be possible to loop over them and inject dynamic padding using javascript/jquery or something:
i = 40;
$('img.yourImageClass').each(function() {
$(this).css('padding-left', i+'px');
i = i + 40;
});
You could also do this type of injection with pre-processing on the server side I am sure, but definitely not with CSS alone. You need a dynamic solution (i.e. the ability to use variables) to support your dynamic output.
A very very fiddly jsfiddle but it works with a little nudge in the right direction from jQuery. Not a great resolve but a resolve none the less.
HTML
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style-type:none;
margin-top:5px;
padding-left:40px;
float:left;
width:400px;
overflow:hidden;
background:#ff0000;
}
li {
padding-top:5px;
}
ul div {
position:absolute;
left:0;
width:100%;
border-top:3px solid #fff;
}
jQuery
$(document).ready(function(){
$('ul').prepend('<div></div>');
});
jsFiddle here. Hopefully this works for you!
You can do like this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="mainUL">
<li>A</li>
<ul><li>B</li>
<ul><li>C</li></ul>
</ul>
</ul>
</body>
</html>
CSS Code
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}
You can see the working demo : http://jsbin.com/uReBEVe/71/edit
from your demo:
if you apply
ul{
padding:0;
margin:0;
}
everything sits flush to the wall like you want.
if you want text indents
ul ul li{
text-ident:20px;
}
which is nesting. will only targets li's that are in ul's that are nested in ul's. then what you want works and you don't need to change your code
you can also keep nesting that code
add more ul's and li's depending on the depth of your structure, but this should give you a very good base