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>
Related
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.
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;
}
What I'm trying to do is have a bootstrap like navbar where the actual navbar is around 960px in the center but have the background color span the entire width of the window.
However, when the window is less than 960px in width, and I scroll, the background doesn't go all the way to the end.
Is it possible to make this happen without having custom rules for max-width(960px)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div id="nav">
<div id="container">
test
</div>
</div>
</body>
</html>
Thanks in advance!
Edit: Oops. Had an extra in there, though that wasn't the issue.
The height has to be in the inner div (#container).
try
#nav { background-color: #cfcfcf; }
#container {
height:33px;
width:960px;
margin: 0 auto;
}
see http://jsfiddle.net/wYGLj/
You need your nav div to span the entire page.
#nav { width:100%; }
will work in this case.
Your CSS is working as it should. So if you want it to extent the whole length of the screen, create a wrapper to handle that grey element. Like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
#wrapper {
width: 100%;
margin: 0;
padding: 0;
background-color: #cfcfcf;
}
#container {
width: 960px;
margin: 0 auto;
}
#nav {
height: 33px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div id="container">
test
</div>
</div>
</div>
</body>
</html>
I added
body {
min-width:960px;
}
which seemed to fix the problem.
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>
I am making a css site and I want to look like that:
3 vertical divs. LEFT CENTER RIGHT. In the center div is the site content, and I want the left and right div to fill the space between the center and the browser borders.
Here is my code.
#container
{
width:100%;
background-color:#000;
}
.center
{
width:1000px;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer-left
{
width:100%;
height:400px;
background-color:#F90;
float:left;
}
.spacer-right
{ width:100%;
height:400px;
background-color:#F90;
}
And here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
I've try with 2 divs and there was no problem. The left with float:left and width in pixels and right one with 100% width without float. It worked. But how to make it with 3 divs. Thanks in advance!
Thank you for the help Sebastian but I figured out other way.
This is how the code looks now and it works.
#container
{
width:1000px;
background-color:#000;
margin:0 auto;
}
.center
{
width:100%;
height:400px;
background-color:#F90;
margin: 0px auto;
overflow: auto;
}
.spacer
{
width:50%;
height:400px;
background-color:#F90;
float:left;
}
.head_warp
{
width:100%;
display:block;
height:400px;
margin:0 auto;
padding:0;
position:absolute;
top: 0;
left: 0;
text-align:center;
z-index:-9999;
}
and the 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>
Thank you for the help one again. I will write here again if there is a problem with my solution.
Update: a different alternative to the answer below, using three divs and z-index.
http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/
if you are trying to make a site with the content in the center div, you can replicate that layout using simply:
<body>
<div class="center">center</div>
</body>
with the css:
html {height: 100%; }
.center { width:750px; margin: 30px auto; height: 100%; }
play with it here: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/
from the class names .spacer_left and .spacer_right i'm assuming that those divs are empty spacers and not necessary.
this is a good resource for base css layouts: http://www.csseasy.com/