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;
}
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.
i want the part with the border to be centered on all screen resoultions. is this possible with the margin-top and margin-bottom properties?
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<img src="2.png" width="1000" height="100" />
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:1000px;
height:1000px;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try:
#container{
width:960px;
margin:0 auto;
/*more CSS*/
}
You can change 0 to whatever, like 50px. Your image width is larger than 960px though.
Maybe you want something like this:
var pre = onload; // window is implicit
onload = function(){ // I personally don't indent directly inside the onload
if(pre)pre(); // execute old window.onload if it existed
var doc = document, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function E(e){
return doc.getElementById(e);
}
function alignTop(id){
var e = E(id), w, h;
if(IE){
h = parseInt(e.currentStyle.height);
}
else{
h = parseInt(getComputedStyle(e).getPropertyValue('height'));
}
w = innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
e.style.marginTop = w/2-h/2+'px';
}
alignTop('container');
}
You should put your script tag in the head so the body is defined in some older Browsers. I would use external JavaScript, so it's cached, like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>Your Title Here</title>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='some words to help SEO here' />
<style type='text/css'>
#import 'common.css'; #import 'thisPage.css';
</style>
<script type='text/javascript' scr='someName.js'></script>
</head>
<body>
<div>
<div id='container'>Example Only</div>
</div>
</body>
</html>
To see a working model, visit http://jsfiddle.net/MeMQz/2/ .
i know that centers it but i want the top to be equal to the bottom by centering the whole page.not just left and right – HeyItsProdigy
Based on your comment above I guess you are trying to make the height of the content is 100% equal based on the height of the browser. You can use this trick:
html, body{
height: 100%;
}
#container{
display: block;
height: 100%;
}
Have a look at the result here http://jsfiddle.net/qiqiabaziz/GB4W2/1/
I don't know how to get rid of the bars on the side when I hover over the navbar. Can anyone help? I dont want to change the look or position of the navigation bar. I only want to make the parts that are not affected by hovering affected by it.
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<center>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
#container {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:960px;
height:500px;
border:2px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px
}
ul.navbar li {
width:19%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try removing all the space between your <li> elements. The spaces are creating extra, well, space between links. This adds to the 100% width 5 elements at 20% width should be creating.
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
I hope that there is a more satisfying answer than this, but if you just want the quick and easy, this will work.
JSFiddle
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>
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/