Ok, I'm trying to do my new Social Engine website in complete CSS. Here is what the layout is supposed to look like, basically:
-Header Image-
CenteredLinks
Box1 Box2 Box3
-Footer Image-
Here is the current stylesheet..
div.contentarea{
background-color: #000000;
width: 750px;
border-width: 0px;
min-height: 100%;
}
div.sect1{
border-width: 1px;
border-style: solid;
border-color: #747474;
width: 285px;
padding: 2px 2px 2px 2px;
height: 300px;
position: absolute;
left: 2px
}
div.sect2{
border-width: 1px;
border-style: solid;
border-color: #747474;
width: 285px;
padding: 2px 2px 2px 2px;
height: 300px;
position: absolute;
left: 298px;
}
div.sect3{
border-width: 1px;
border-style: solid;
border-color: #747474;
width: 148px;
padding: 2px 2px 2px 2px;
height: 300px;
position: absolute;
left: 594px;
}
div.footer{
border-width: 0px;
width: 750px;
position: absolute;
top: 450px;
}
And here is the layout code I have so far.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SOCIAL ENGINE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"sevibrations.css" rel="stylesheet" type="text/css">
</head>
<body id="main">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"imgsrc/head.jpg"><br>
<div class="contentarea">
links here : links here : links here : links here
<div class="sect1">
test
</div>
<div class="sect2">
test
</div>
<div class="sect3">
test
</div>
<div class="footer">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"imgsrc/foot.jpg">
</div>
</div>
</body>
</html>
I realize it is a bit of a jumbed mess, sorry about that. I really want to transition over to complete CSS layouts, and stop using tables and whatnot. The main reason is for W3C compliance.
Anyway, I guess what I'm asking is.. What am I doing wrong for this layout? I can easily figure out how to get it to "look right" in my browser, but I want to make sure the code is proper and whatnot.
*edit* you can see the above code in action here: <!-- m --><a class="postlink" href="http://sound.the-engine.org/test/">http://sound.the-engine.org/test/</a><!-- m -->
I haven't decided whether I want the main background white or black. The center content area will be black (which is supposed to be handled by a div..)
*edit* some problems have been solved, for the most part. It doesn't display properly in IE, however.
You can view an updated version here: <!-- m --><a class="postlink" href="http://sound.the-engine.org/test2/">http://sound.the-engine.org/test2/</a><!-- m -->
-Header Image-
CenteredLinks
Box1 Box2 Box3
-Footer Image-
Here is the current stylesheet..
div.contentarea{
background-color: #000000;
width: 750px;
border-width: 0px;
min-height: 100%;
}
div.sect1{
border-width: 1px;
border-style: solid;
border-color: #747474;
width: 285px;
padding: 2px 2px 2px 2px;
height: 300px;
position: absolute;
left: 2px
}
div.sect2{
border-width: 1px;
border-style: solid;
border-color: #747474;
width: 285px;
padding: 2px 2px 2px 2px;
height: 300px;
position: absolute;
left: 298px;
}
div.sect3{
border-width: 1px;
border-style: solid;
border-color: #747474;
width: 148px;
padding: 2px 2px 2px 2px;
height: 300px;
position: absolute;
left: 594px;
}
div.footer{
border-width: 0px;
width: 750px;
position: absolute;
top: 450px;
}
And here is the layout code I have so far.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SOCIAL ENGINE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"sevibrations.css" rel="stylesheet" type="text/css">
</head>
<body id="main">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"imgsrc/head.jpg"><br>
<div class="contentarea">
links here : links here : links here : links here
<div class="sect1">
test
</div>
<div class="sect2">
test
</div>
<div class="sect3">
test
</div>
<div class="footer">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"imgsrc/foot.jpg">
</div>
</div>
</body>
</html>
I realize it is a bit of a jumbed mess, sorry about that. I really want to transition over to complete CSS layouts, and stop using tables and whatnot. The main reason is for W3C compliance.
Anyway, I guess what I'm asking is.. What am I doing wrong for this layout? I can easily figure out how to get it to "look right" in my browser, but I want to make sure the code is proper and whatnot.
*edit* you can see the above code in action here: <!-- m --><a class="postlink" href="http://sound.the-engine.org/test/">http://sound.the-engine.org/test/</a><!-- m -->
I haven't decided whether I want the main background white or black. The center content area will be black (which is supposed to be handled by a div..)
*edit* some problems have been solved, for the most part. It doesn't display properly in IE, however.
You can view an updated version here: <!-- m --><a class="postlink" href="http://sound.the-engine.org/test2/">http://sound.the-engine.org/test2/</a><!-- m -->