Hola a tod@s:
Tengo una plantilla en la que he creado una etiqueta Div Pa llamada contenedor en la que hay:
una cabecera, un menú horizontal, un título para para cada página creada con esta plantilla, con una región editable (1) y debajo de esta otra región editable (2) para los contenidos de cada página. Todos estos elementos tienen el mismo ancho que el contenedor, pero los contenidos de cada página no son del mismo tamaño en cuanto a la altura.
Justo al final, fuera del contenedor, es decir en el body tengo el pie de página.
He utilizado etiquetas Div Pa para todos los elementos menos para la region editable (2).
Lo que me gustaría saber es cómo hago (si es posible de esta forma) para que el pie de página no este fijo en una posición, sino que vaya moviéndose hacia abajo dependiendo del tamaño de la región editable (2).( Algo así cómo poner la position:relative dependiendo de la altura de la región editable 2.
Alguna idea, estoy atascado con esto y no veo cómo hacerlo.
Muchas gracias por anticipado.
Os dejo el código a continuación.
Código HTML:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Documento sin título</title>
<!-- TemplateEndEditable -->
<style type="text/css">
#contenedor {
position: absolute;
width: 1000px;
z-index: 1;
left: 50%;
top: 0px;
margin-left: -500px;
background-color: #66FFFF;
float: left;
height: 400px;
}
#cabecera {
position: absolute;
width: 1000px;
height: 125px;
z-index: 2;
left: 0px;
top: 0px;
background-color: #EEE;
background-repeat: no-repeat;
}
#menu {
position: absolute;
width: 1000px;
height: 30px;
z-index: 3;
left: 0px;
top: 126px;
background-color: #BBBBBB;
}
#pie {
position: absolute;
width: 1000px;
height: 160px;
z-index: 1;
left: 50%;
top: 540px;
background-color: #6D7B98;
float:inherit;
margin-left: -500px;
}
#escudo {
position: absolute;
width: 160px;
height: 160px;
z-index: 1;
left: 0px;
top: 0px;
background-color: #6D7B98;
background-repeat: no-repeat;
}
#imagenEscudo {
position: absolute;
width: 140px;
height: 140px;
z-index: 1;
left: 10px;
top: 10px;
background-color: #6D7B98;
background-repeat: no-repeat;
}
#TextoPie1 {
position: absolute;
width: 200px;
height: 140px;
z-index: 1;
left: 160px;
top: 10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 24px;
color: #FFF;
}
#TextoPie2 {
position: absolute;
width: 600px;
height: 140px;
z-index: 3;
left: 370px;
top: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 16px;
}
</style>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#tituloPagina {
position: absolute;
width: 1000px;
height: 32px;
z-index: 2;
left: 0px;
top: 157px;
background-color: #E0E0E0;
}
.tituloPaginas {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #00E;
text-align: center;
vertical-align: middle;
}
#textoTitulo {
position: absolute;
width: 600px;
height: 28px;
z-index: 1;
top: 2px;
left: 200px;
padding-top: 6px;
}
#apDiv1 {
position: absolute;
width: 200px;
height: 140px;
z-index: 2;
left: 160px;
top: 10px;
}
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="contenedor">
<div id="cabecera">CABECERA</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Inicio</a> </li>
<li><a href="#">ITC</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Catálogo</a>
<ul>
<li><a href="#">Monografías</a></li>
<li><a href="#">Revistas</a></li>
<li><a href="#">Novedades</a></li>
</ul>
</li>
<li><a href="#">Acceder</a></li>
</ul>
</div>
<div id="tituloPagina">
<div class="tituloPaginas" id="textoTitulo">
<!-- TemplateBeginEditable name="titulo" -->TITULO DE LA PAGINA<!-- TemplateEndEditable -->
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
<!-- TemplateBeginEditable name="contenidoPagina" -->
contenidoPagina<!-- TemplateEndEditable --></p>
</div>
<div id="pie">
<div id="escudo">
<div id="imagenEscudo">
</div>
</div>
<div id="TextoPie1">
<br />
Texto de pie de pagina
</div>
<div id="TextoPie2"><br />
<br />
Otro texto en el pie de pagina
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>