This is what I’ve got: http://adolfo.losdelacatarina.com
It was made with 4 DIV tags (header, menu, barra and content). I want the content part to fill the rest of the window vertically but I can’t do it. I’ve read some tutorials but nothing is working. :shifty:
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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">
<!--
html, body {
background: url(images/bg.gif) repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height:100%;
}
#tableheight{
height:100%;
}
#header{
width: 614px;
height: 130px;
margin:0 auto;
}
#menu{
width:614px;
height:25px;
margin:0 auto;
}
#barra{
width:614px;
height:16px;
margin:0 auto;
}
#content{
background-image:url(images/bg_content.gif);
width:614px;
height:auto;
margin:0 auto;
}
.style1 {
color: #FFFFFF;
font-size: 0.6em;
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</style>
<link href="estilos.css" rel="stylesheet" type="text/css"/>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a*)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a*.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a*;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms*[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers*.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a*))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/index_07-over.gif','images/index_08-over.gif','images/index_09-over.gif','images/index_10-over.gif')">
<div id="header"><img src="images/index_02.gif" width="91" height="130" /><img src="images/index_03.gif" width="117" height="130" /><img src="images/index_04.gif" width="174" height="130" /><img src="images/index_05.gif" width="232" height="130" /><br />
<div id="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','images/index_07-over.gif',1)"><img src="images/index_07.gif" alt="inicio" name="inicio" width="91" height="25" border="0" id="inicio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portafolio','','images/index_08-over.gif',1)"><img src="images/index_08.gif" alt="portafolio" name="portafolio" width="117" height="25" border="0" id="portafolio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/index_09-over.gif',1)"><img src="images/index_09.gif" alt="bio" name="bio" width="72" height="25" border="0" id="bio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contacto','','images/index_10-over.gif',1)"><img src="images/index_10.gif" alt="contacto" name="contacto" width="102" height="25" border="0" id="contacto" /></a><img src="images/index_11.gif" width="232" height="25" /><br />
<div id="barra"><img src="images/index_12.gif" width="614" height="16" /><br />
<div id="content">
<table width="97%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p class="contenido2">Lorem ipsum natum scripta eruditi ex pro. Te pri alia reque nihil, ad usu ceteros efficiantur, virtute persequeris ex mel. Bonorum molestiae laboramus in mel, qui cu iisque convenire. In mel wisi omnis utinam, cu est nihil ignota officiis, sit ex impedit admodum voluptatum. Id duo similique delicatissimi, id qui omnes eligendi partiendo, ne duo commodo facilis patrioque. Te pro stet dolor, eum ei quodsi detracto honestatis.</p>
<p class="contenido2">Utinam legere assueverit in sea, cu sed atqui aeque appareat, ne primis delicata mea. Atqui fabulas nam ea, pri in elitr noster dissentiet. Ex quot justo has. Elit graeco per cu, sed quod illud melius no. Nec enim vivendo placerat eu, te rebum clita sea. Ei mea tota error, ad quo postea adipiscing. At nonummy delicata assentior mea.</p>
</td>
</tr>
<tr>
<td bgcolor="#333333"><div align="center" class="style1">Adolfo Arredondo Cantisani - 2006 </div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
I also tried to create a mainDIV (centered with 100%height) with the 4 layout divs inside. Even though the mainDIV gets centered and 100% height, nothing happened with the “content” div.
