I would like to change the background color in 2n element. I've tested it but the bg-color is still blue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nothing here</title>
</head>
<body>
<style type="text/css">
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
.btn:nth-child(2n){
background:yellow;
}
</style>
<div>
<div class="btn"></div>
</div>
<div>
<div class="btn"></div>
</div>
</body>
</html>
it should be more like :
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
div:nth-child(2n) .btn{
background:yellow;
}
Because, in each div , there's only one .btn
nth-child works with adjacent element, not nested unfortunately :)
.btn is inside a div.
.btn:nth-child(2n) will work if your HTML structure is as follows:
<div>
<div class="btn"></div>
<div class="btn"></div>
</div>
For your HTML structure, it should be
div:nth-child(2n) .btn {
background:yellow;
}
DEMO here.
Related
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:10%;
width:100%;
position:absolute
}
#adv
{
background-color:Yellow;
height:100%;
width:35%
}
#flag
{
background-color:Red;
height:100%;
width:65%;
float:right
}
How do you make the flag div appear beside the adv div inside the header div?
#adv needs float:left, so it floats to the left (and #flag floats to the right, next to it, because of float: right).
try this
#header
{
background-color:Blue;
height:10%;
width:100%;
position:relative
}
#flag
{
background-color:Red;
height:100%;
width:65%;
position:absolute;
top:0;
right:0;
}
Try this:
Normally: (somebody please correct me if I'm wrong on this):
Widths and heights should be set in pixel height-width from the beginning instead of percentages because the code will be easier to work with later. Also, I'm sure both elements should float left because then the code will be again, easier to work with and will follow better code conventions. Also, I added margins for easier viewing. You can always delete them if you wish. Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> This is my site </title>
<link rel="stylesheet" type="text/css" href="example1.css">
</head>
<body>
<div id="bigger">
<div id="header">
<div id="adv">
</div>
<div id="flag">
</div>
</div>
</div>
</body>
</html>
CSS:
#bigger
{
height:1280px;
width:880px;
margin:0px 0px 0px 0px;
position:absolute
}
#header
{
background-color:Blue;
height:90px;
width:1290px;
overflow: hidden;
}
#adv
{
background-color:Yellow;
height:80px;
width:840px;
margin: 5px;
float: left;
}
#flag
{
background-color:Red;
height:80px;
width:420px;
margin: 5px;
float:left;
}
I have a little issue w/ an element displaying in IE9
the structure:
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
the problem is that the container has a height of 47px and the anchor has a height of 65px. In chrome, ff, opera etc the overflow of the anchor is visible but cut off in IE9.
this is the css for the container and anchor
#container{
width:100%;
height:47px;
overflow visible;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
}
and this displays great in everything except IE... any ideas? thanks in advance.
You must to declare Doctype For IE all versions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container{
width:100%;
height:47px;
border:1px solid red;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
</body>
</html>
Maybe it is really simple but I can't get it.
I'd like the center of my 3 columns to have 1280 width and have the other two resized in function of the size of the windows (so if, for instance, the window is 1280px large, I can't see the side divs).
Here is my code. Where am I wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<style>
div{display:block;}
#left{
border:1px solid green;
float:left;
width:auto;
}
#center{
border:1px solid red;
width:1280px;
float:left;
}
#right{
border:1px solid purple;
float:left;
width:auto;
}
</style>
</head>
<body>
<div id="container_center">
<div id="left"> </div>
<div id="center">
Lorem ipsum
</div>
<div id="right"> </div>
</div>
</body>
</html>
It would help if you gave us the url of this so we do not have to load it on our own, but I would start by adding a min-width:10px; and a min-height:100px. Possible starting with some lorem ipsum because some browsers might ignore your space.
My code is pasted down. I want that the div "target" to be po positioned at the bottom of div "conten area". Also header should stick to top of the browser and the footer should stick at the bottom of the browser.
Hope it makes sense.
Thanks in advance!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<style>
#page-wrapper{}
#header{ background:#000; height:100px}
#content{ min-height:100%;}
#target{ background:#ebebeb; }
#footer{background:#000; height:40px}
</style>
<body>
<div id="page-wrapper">
<div id="header">header goes here</div>
<div id="content">
<div id="target">You need to fix me</div>
</div>
<div id="footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>
Are you after something like this?
http://jsbin.com/azebu5
How does it work? http://css-tricks.com/absolute-positioning-inside-relative-positioning/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<style>
html,body{margin:0;padding:0}
#page-wrapper{position:absolute;top:0;bottom:0;left:0;right:0}
#header{ background:cyan; height:100px; position:absolute; top:0; left:0; width:100%}
#content{ position:absolute; background:#eee; top:100px; bottom:40px; left:0; right:0}
#target{ background:yellow; position:absolute; bottom:0; left:0; width: 100% }
#footer{background:red; height:40px; position:absolute; bottom:0; left:0; width:100%}
</style>
<body>
<div id="page-wrapper">
<div id="header">header goes here</div>
<div id="content">
<div id="target">You need to fix me</div>
</div>
<div id="footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>
I want IE8, FF's effect:
My code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV width 100% opera without scrollbar</title>
<style type="text/css">
<!--
html,* {margin:0px; padding:0px; }
html,body {width:100%; height:100%; overflow:hidden;}
-->
</style>
</head>
<body>
<div style="position:relative; height:100%; width:100%; background:#dee; overflow:auto;">
<div style="position:absolute; top:0px; left:0px; height:100%; width:100px; background:#e46;"></div>
<div style="position:absolute; top:0px; left:0px; height:100px; width:2000px; background:#98a;"></div>
</div>
</body>
</html>
You need to learn how to use CSS Level 1. Positioning is not necessary for this type of layout.
I've created a tutorial to visually demonstrate how CSS works with the float and margin properties here...
http://www.jabcreations.com/web/css/nested-divisible-elements
Keep in mind if you want to create a padding effect you will save yourself a TON of pain by instead adding margin to a child element like so...
/* Bad */
div.class1 {padding: 4px;}
/* Good */
div.class1 > div {margin: 4px;}
Note that the > operator limits the selector to first generation division elements in my example. So if you have a third generation division element the margin would not be applied. It's highly compatible and you should only consider compatibility for IE 8.0+ at this point.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV width 100% opera without scrollbar</title>
<style type="text/css">
body, html {border: 0px; margin: 0px; padding: 0px;}
#content
{
background-color: #dee;
}
#head
{
background-color: #98a;
height: 100px;
}
#side
{
background-color: #e46;
float: left;
width: 10%;
}
</style>
</head>
<body>
<div id="head">#head</div>
<div id="side">#side</div>
<div id="content">#content</div>
</body>
</html>