I have the following HTML Code:
body {
margin: 0;
}
header {
background: #999;
color: white;
padding: 15px 15px 0 15px;
}
header h1 {
margin: 0;
display: inline;
}
nav ul{
margin: 0px;
display: inline;
}
nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}
nav ul li a{
color:white;
}
<!doctype html>
<html>
<head>
<title>CSS Layouts</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>2016 My Site</footer>
</body>
</html>
My challenge is to make the "My Page" h1 in line, as stated in the CSS
header h1 {
margin:0;
display: inline;
}
In order to get the h1 header "My Page" to go inline with the unordered list, I need to move the h1 in the HTML to underneath of the <nav> opening tag (as opposed to where it is now underneath of the header opening tag), but I can't figure out why it will go inline when I do that but it won't when I leave it like it currently is.
It is my understanding that in CSS if you have the following:
header h1{
some styling here;
}
...that any h1's underneath of header will be affected, however, that is not happening in my code currently.
Your h1 does have the display inline, but the problem is that it is next to nav which is a block level element. Block elements take up as much width as they can, while inline elements only take up as much width as necessary (see w3schools). You'll need to change the display on the nav to inline or inline-block to stop it from taking up so much width.
As you make your ul and h1 inline, you don't do it with your nav, it still has display: block css property and takes full width.
As other told you, the element is style displayed as a block.
By the way, if you don't want "any h1's underneath of header to be affected" by that :
header h1{
some styling here;
}
You can write it this way :
header + h1 {
some styling here;
}
Selects all "h1" elements that are placed immediately after "header" elements
Source : http://www.w3schools.com/cssref/css_selectors.asp
test.html:
div, li {
display: inline-block;
margin-left: 30px;
}
<div>тест1</div>
<ul>
<li>тест</li>
</ul>
Opening test.html gives such a result that although div and li tags share the same style rules, div tag content is nevertheless closer to the left screen border than li tag's (at least at Google Chrome 44, desktop). Why is it so and how is it "healed"?
<ul> have some margin from left in default css. You can reset your css, or just put to your <ul> margin: 0; and padding: 0;.
HTML elements have styling rules beyond simple left margin & display type (such as padding for example). Also elements are positioned relative to other elements (unless explicitly set otherwise).
There's no reason for your <div> & <li> to look identical.
Posting the full code in accordance with #Alesha Oleg's answer-
<!DOCTYPE html>
<style>
div, li
{
display: inline-block;
margin-left: 30px;
}
ul
{
margin: 0;
padding: 0;
}
</style>
<div>ABCD</div>
<ul>
<li>ABCD</li>
</ul>
Now you get same effect on both:
div, li{
display: inline-block;
margin-left: 30px;
}
ul {
margin:0;
padding:0;
}
Here is fiddle: http://jsfiddle.net/nphzbfwd/1/
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
I am trying to make list of images act as a horizontal navigation bar. Unfortunately try as I might I cannot get the images to sit next to each other. I have tried eliminating padding, margin and border from each of the nested image, link, list item and unordered list.
The html code is simple
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Menu App</title>
<link type="text/css" rel="stylesheet" href="css/menu.css" />
</head>
<body>
<div id="page-1">content</div>
<div id="footer">
<ul>
<li><img src="img/zone.png" alt="toggle zones"></li>
<li><img src="img/nr.png" alt="toggle nr services"></li>
<li><img src="img/wheel.png" alt="toggle wheelchair access"></li>
<li><img src="img/cycle.png" alt="toggle cycle access"></li>
</ul>
</div>
</body>
</html>
and the css code is as follows
body {
margin: 0;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 40px;
height: 40px;
display: inline-block;
overflow: hidden;
cursor: pointer;
margin: 0;
}
li a {
display: block;
}
li a img {
border-radius: 0.2em;
background: #ccc;
width: 100%;
border: none;
}
Extra Details
The natural size of the images is 40px by 40px
When checking in chrome
the size of the image is 40px by 40px
the size of the a tag is 40px by 45px ???
the size of the li tag is back to 40px by 40px
the height of the ul and div#footer are both 45??
there is white space between the grey backgrounds of the buttons
So to summarise I would like to remove the white space and reduce the height of the whole list to the height of the buttons (without forcing it to 40 px) so it still works in my fluid layout
It's because you're treating the <li> elements as inline-blocks. These essentially act and flow as text characters, and if there is white-space between them in the HTML, then white-space will appear next to them on the page as well. You can either set font-size to be 0 within the <ul>, or use display: block and float: left instead to achieve your desired effect.
Add
vertical-align: top
to your
li a img and your li
in order to get rid of that 5px bottom space
To get rid of the horizontal space, set the font-size of <ul> to 0
Using display:inline-block will cause the browser to display whitespace characters around the <li> elements. In order to remove this extra whitespace, you have to do something like this:
<ul>
<li><img src="img/zone.png" alt="toggle zones"></li
><li><img src="img/nr.png" alt="toggle nr services"></li
><li><img src="img/wheel.png" alt="toggle wheelchair access"></li
><li><img src="img/cycle.png" alt="toggle cycle access"></li>
</ul>
As you can see, I'm removing the extra space between the tags.
For more information, see: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Just set the font-size of <ul> to 0 in your CSS
JSFiddle
below is the sample of my websites navigation div
when i reduce the size of the window the other links gets on next line instead of being fixed to therir postion.here is the cose and css.
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id=navigation>
<ul id="navigation-bar">
<li>Home</li>
<li>Gallery</li>
<li>Images</li>
<li>Softwares</li>
<li>Contact</li>
<br><br>
</ul>
</div>
</body>
</html>
and here is the css
div#navigation {
width:100%;
background-color:#000;
border-top:2px solid #5d6869;
border-bottom:2px solid #5d6869;
}
#navigation-bar {
list-style: none;
margin: 0px;
}
#navigation-bar li {
display: inline;
float: left;
}
#navigation-bar li a {
padding: 0em 1em 0.08em 1em;
text-decoration: none;
color:#fff;
font-size:1.8em;
}
#navigation-bar li a:hover {
text-decoration: none;
color:#fff;
background:#5d6869;
}
can anyone help me whats the reason?
It's because your li elements are floated left. Floated elements, when the parent's width is not wide enough to fit, automatically move to the next line. It's their built in behavior
If you want them to stay on the same line and be hidden when the parent is not wide enough, you can give them display:inline-block and give the parent a set height, say height:35px;, and also give the parent overflow:hidden;
Demo Here of that approach
EDIT based on your comment below
In that case, give the parent a min-width. Demo here