In article <bv**********@newsreader1.mclink.it>,
no****@nowhere.com
enlightened us with...
I wish to create two simple layouts by using only HTML, CSS and the minimum
JavaScript as possible. Layouts should be "elastic"/"liquid" (no fixed
widths and heights) and cross-browser enabled.
The first one is a non-scrollable page which contains a centered title and a
centered division with automatic scrolling on overflow, that is:
These worked in IE6, NN7, and Opera 7. Scrollbar down when resized only.
Make it pretty in a really small window with padding as desired.
<html>
<head>
<title> New Document </title>
<style type="text/css">
body{
text-align: center;
}
#bodyDiv {
width: 90%;
overflow: auto;
text-align: left;
}
</style>
</head>
<body>
<div id="titleDiv">Title here</div>
<div id="bodyDiv">
<div>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
</div>
</body>
</html>
The second layout is similar but the inner division is on the right,
wherease on left I have a fixed image.
<html>
<head>
<title> New Document </title>
<style type="text/css">
body{
text-align: center;
width: 90%;
height: 100%;
}
#titleDiv{
position: relative;
top: 0;
height: 10%;
}
#bodyDiv {
width: 70%;
text-align: left;
position: absolute;
top: 10%;
left: 10%;
height: 90%;
}
#imgDiv {
position: absolute;
top: 10%;
width:10%;
height: 90%;
left: 0;
}
</style>
</head>
<body>
<div id="titleDiv">Title here</div>
<div id="imgDiv"><img src="warning.gif"></div>
<div id="bodyDiv">
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
a bunch of text a bunch of text a bunch of text a bunch of text a bunch
of text a bunch of text a bunch of text a bunch of text a bunch of text
a bunch of text a bunch of text<br>
</div>
</div>
</body>
</html>
--
--
~kaeli~
Who is General Failure and why is he reading my hard disk?
http://www.ipwebdesign.net/wildAtHeart http://www.ipwebdesign.net/kaelisSpace 
