digitalroots wrote:
So I would put the above text right after the body tag on top of html? Do I need to put the above code again at the end of the html, or only on top?
Yes.
<div id="container">
Then all your absolutely positioned layers go here
</div><! close the container-->
below is a simple example of absolute layers inside a relatively positioned container <div>. Note how the absolutely positioned layers move when you re-size the browser viewport window.
I stress using absolutely positioned layers is NOT a good solution to be using but it may be the only solution if you know little about website construction.
<!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 {
position: relative;
width: 800px;
margin: 0 auto; /*this centers the page */
}
#one {
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 150px;
background-color:#CF3;
}
#two {
position: absolute;
top: 100px;
left: 150px;
width: 150px;
height: 150px;
background-color:#39F;
}
</style>
</head>
<body>
<div id="container">
<div id="one">Absolute layer one</div>
<div id="two">Absolute layer two</div>
</div><!-- close container -->
</body>
</html>
