Forum Moderators: not2easy
5 small areas are named and layed out:
#siteimage1 #form1 #info2
#info3 #links1
-----------------------------------------------------
#content #rightcol
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>try1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div {
border: none;
}
#siteimage1 {
float: left;
margin-top: 3px;
margin-left: 3px;
color: #000;
border-bottom: 1px solid #333;
height: 76px;
width: 113px;
}
#form1 {
float: left;
position: absolute;
margin-top: 3px;
margin-left: 115px;
color: #000;
height: 26px;
width: 113px;
}
#info2 {
float: right;
position: relative;
margin-top: 3px;
color: #000;
height: 26px;
width: 113px;
}
#info3 {
float: left;
position: relative;
margin-top: 29px;
color: #000;
border-bottom: 1px solid #333;
height: 50px;
width: 113px;
font-size: 26px;
}
#links1 {
float: left;
position: relative;
margin-top: 34px;
color: #000;
border-bottom: 1px solid #333;
height: 45px;
}
#rightcol {
position: absolute;
left: 80%;
top: 85px;
width: 140px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
}
#content {
position: absolute;
margin: 85px 25% 0px 3px;
padding: 3px;
color: #000;
}
p, a {
font-family: Verdana;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia;
margin-top: 0px;
}
</style>
</head>
<body>
<div id="siteimage1">
<img src="assets/images/service.jpg" width="110" height="73" alt="110X73">
</div>
<div id="form1">
Login:
</div>
<div id="info2">
today is info2
</div>
<div id="info3">
label.
</div>
<div id="links1">
<a href="design.htm">link1</a> ¦ <a href="index.htm">link2</a> ¦
</div>
<div id="content">
<p>qwerf fghjsdfjh Perosímiles que poco de los cuyo no llaba Quijana de caza. Frisaba consumían mozo de la poco y que vivía una a lantuflos vaca que vivía el sobre noches, en astillaba en escriben; aunque nuesada, que velludo palomino. Tenía un mozo de llegaba la consumían las fino se honraba lo más fino. Tenía enta, que no llegaba las los días los y amigo más vella carnero aco y que en escriben; auto hación restro esto de astillerostro cuaren así ente, casa una de años; era. Quijana. Frisaba a los de cuenteja en luga A. Call get a zesto is the distinction, hand basil, parsley and you'll love from a classic It's and wow and baked of sweet a large 1-topping Pest The distin</p>
</div>
<div id="rightcol">
<p>something else To discover'd long ent make arrows of gread of their currenterpriz'd coil, must give have, the sleep; to grunt makes thousand this and arms makes of ressor's the spurns this make arrows of devoutrageous pative spurns turns office, the that pith a weart-ache rub; for not of so long, ther delay, and scover'd consience to suffled of? bare bodkin? Who wou</p>
</div>
</body>
</html>
#rightcol {
position: absolute;
left: 80%;
top: 105px;
width: 140px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
}
#content {
position: absolute;
display: block;
top: 0px;
left: 0px;
margin-top: 105px;
margin-left: 10px;
padding: 3px;
color: #000;
width: 79%;
}
Havent checked this in any browsers just IE in HTMLPad 2005, see how it works.
