Simple Div help

ilovetechno

10-21-2009, 08:43 PM

I have been using tables for my page layouts and I am sick of putting off learning another way, I need to move on and up! The reason I rely on them is because I really don't know any other way.

So I'm going to try using divs to get the same effect, hoping it works out even better. But the problem is I don't know how to use them correctly. Heres what I'm trying and the div background colors are not showing up

The CSS
.header { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000000; }

.body { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
background: #ffffff; }

Heres the html
<!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>
<link rel="stylesheet" type="text/css" media="all" href="test.css" />
<style type="text/css">
body {background-color: #ff99cc;}
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: none}
</style>
</script>
</head>
<body>
<div id="header"><center><img src="images/ctemptbann.jpg"><br><img src="images/intim.jpg"></div>
<div id="body">
</body>
</html>

jolly_nikki

10-21-2009, 09:34 PM

When you are defining the css style using '.' use attribute class for the tag
so
<div id="header">
should be
<div class = "header">
and
<div id="body">
should be
<div class = "body">

If you want to use attribute "id", then use '#' instead of '.'

So
.header { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000000; }

should be

#header { width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000000; }

And you are closing script tag without opening it

Excavator

10-22-2009, 02:20 AM

Hello ilovetechno,
This might help you get started. It still doesn't validate (see validation links in my sig below) because <center> is deprecated. If you could post a link to the test site so we could see the images in #header I'm sure that could be fixed.
<!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>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #ff99cc;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
height: 50px;
background: #000000;
}
#wrap {
height: 500px;
background: #ffffff;
}
a:link,
a:visited,
a:hover,
a:active {text-decoration: none}
</style>
</head>
<body>
<div id="container">
<div id="header"><center><img src="images/ctemptbann.jpg"><br><img src="images/intim.jpg"></div>
<div id="wrap"></div>
</div>
</body>
</html>

ilovetechno

10-22-2009, 02:47 PM

Is there a better tag to use than the center tag? Is there something I could add to the CSS so I wouldn't have to use it?

Excavator

10-22-2009, 02:52 PM

Yes, to center something, give it a width and apply margin:0 auto; to it.

#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}

That makes #container 800px wide, 30px space at top and bottom and auto margins on right and left.