May 2nd, 2008, 20:57
|
|
Junior Member
|
|
Join Date: Jul 2005
Location: Lethbridge, Alberta
Posts: 19
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
|
auto-stretch the text body height??
I'm having the worst time trying to get this to work with DIV & CSS. Normally I could mess around with tables and do this, but I'm trying to force myself to stop using such an ugly method for building web pages.
Could someone help show me how to get it so that when I enter more information into the text body it will auto stretch the text area (height)? I know it's got to be something simple I'm over looking.
Here's my code (not pretty, but that gets cleaned up and properly named once I figure this out) You should be able to cut & paste into a editor and see what I'm doing.
- Code: Select all
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url();
background-repeat: no-repeat;
background-color: #2A5F00;
}
#Layer1 {
position:absolute;
left:56px;
top:25px;
width:800px;
height:173px;
z-index:1;
background-color: #010000;
background-image: url(images/Untitled-1.jpg);
}
#Layer2 {
position:absolute;
left:57px;
top:187px;
width:170px;
height:491px;
z-index:2;
background-color: #EEEAD1;
}
#Layer3 {
position:absolute;
left:226px;
top:157px;
width:650px;
height:auto;
z-index:3;
background-color: #FFFFFF;
}
#Layer4 {
position:absolute;
left:55px;
top:22px;
width:180px;
height:198px;
z-index:4;
background-image: url(images/Golfer1_Finished.jpg);
}
.textbody {
text-indent: 15px;
overflow: visible;
bottom: 5px;
text-align: left;
height: auto;
}
#Layer6 {
position:absolute;
left:246px;
top:150px;
width:409px;
height:22px;
z-index:5;
}
#Layer7 {
position:absolute;
left:669px;
top:150px;
width:202px;
height:22px;
z-index:6;
}
.style1 {font-size: 12px}
.style2 {
font-size: 24px;
font-weight: bold;
font-style: italic;
color: #2A5F00;
}-->
</style>
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="Layer1,10,10,10,10,0,0";
gCurvyCorners[1]="Layer3,10,10,10,10,0,0";
gCurvyCorners[2]="Layer2,10,1,10,1,0,0";
//-->
</script>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div class="textbody" id="Layer3">
<p> </p>
<p> </p>
<p>asdfsadfsdfasd asdf sadf sadf safsa sdfsafasfj klsfkl jsfjksj dfklsjfk ljsdfjskfjklsj fklsjfklsdjfklsjfklsjklfjsklfjskfsjfklsjkljskdljfklsdjfklsjfklsjfklsajkflsjlkfjsklfjlksda</p>
<p> </p>
<p>sfsfk sdkl;f ksl;fksl;dfkl;skfl;skfl;kflskfkafksakf';kf'skdkfk kld;fk f dkl;f dfk;l dfak;lf asdfksald;fkas ff sad;fl fd k;lasdfk asdf;asflksdf asdf sadf </p>
<p>asdf</p>
<p>asf</p>
<p>saf</p>
<p>safs</p>
<p>dsasdf</p>
<p>a</p>
<p>asfs</p>
<p>dfsa</p>
<p>sf</p>
<p>sf</p>
<p>sf</p>
<p>sf</p>
<p>sf</p>
<p>sfd</p>
<p>saf</p>
<p>sf</p>
<p> </p>
</div>
<div class="style2" id="Layer6">This is a Page Title </div>
<div id="Layer7">
<div align="right" class="style1">Why Us? | Contact Us </div>
</div>
</body>
</html>
|