[SOLUCIONADO] Pie de página flotante

Mark_61 · #1 (**permalink**) 15/11/2013, 15:24

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&aacute;logo</a>
        <ul>
          <li><a href="#">Monograf&iacute;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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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>

C2am · #2 (**permalink**) 15/11/2013, 19:23

Cita:

He utilizado etiquetas Div Pa para todos los elementos menos para la region editable (2).

Ese es tu GRAN ERROR, el uso de position:absolute, o como lo llama dreamweaver PA.
La posición absoluta deberìa usarse en casos muy particulares, ya que el efecto que produce es quitar del flujo normal del documento a los elementos que sean definido con dicha posición.

Aquí un poco de info:
http://ksesocss.blogspot.com/2012/04...mas-nuevo.html
http://librosweb.es/css/capitulo_5/p..._absoluto.html

Una posible "solución" o mejor dicho "parche" es:

Código CSS:

Ver original#contenedor {
    position: relative; 
    }

Mark_61 · #3 (**permalink**) 16/11/2013, 04:28

Hola, muchas gracias por tu respuesta. Estoy empezando a conocer los estilos CSS y lo hice con DIV PA porque habia realizado otra plantilla con los mismos elementos pero con etiquetas DIV normales y dependiendo del navegador me hacía cosas diferentes, además me movía en algunas páginas el menu spry de sitio.

¿ Cómo me aconsejas que haga la plantilla?

He leido los enlaces que me has puesto así cómo otros muchos que hay en la web, pero no he encontrado la solución para lo que me pasa en la plantilla actual.

Esto es un texto de prueba de lo que hay en la región editable "contenidoPagina" para comprobar que desplaza el pie de página.

Código HTML:

<!-- InstanceBeginEditable name="contenidoPagina" -->
  contenidoPagina<br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  Fin de <br />
  Contenido<br />
  1<br />
  2<br />
  3<br />
  4<br />
  5<br />
  6<br />
  7<br />
  8<br />
  <br />
  <!-- InstanceEndEditable --></p>

He probado a ponerle la

Código HTML:

position:relative

al contenedor cómo me has aconsejado y aunque me ha desplazado el pie dos lineas hacia abajo en Maxthon (se ve el texto "1"), en Crome y Mozilla sólo se ve hasta"Final de contenido", el resto está oculto por el pie de página.

Te agradecería que dijeras como puedo solucionarlo o cómo debería de realizar la plantilla para que no tenga esos desplazamientos dependiendo del navegador. Cómo te he dicho acabo de comenzar con CSS, llevo dos días con esto y me está volviendo loco

por lo que agradezco cualquier ayuda.

Muchas gracias nuevamente.

C2am · #4 (**permalink**) 16/11/2013, 18:36

Al ponerle position:relative; deberías quitar las coordenadas, osea, left/top/ etc.
Con eso se ubicaría en el flujo normal, y no deberías tener problemas.

En realidad no lo dije antes, porque si hubieras leido los link que te puse, te habrías dado cuenta, pero bue...

Los position:absolute que usas dentro del contenedor, se quedan en su lugar, debido que se posicionan con respecto al ancestro que tenga definido una position distinta de static, osea, en este caso: relative.
Lo ideal es que no uses la posición absoluta para maquetar, porque esto hace que el diseño sea muy dificil de extender a un diseño responsivo, y es muy proclive a romperse ante el cambio de resoluciones sino se tiene una idea muy clara de lo que se hace y el resultado que se espera.

Saludos, y lee y práctica, sólo así se aprende.

Mark_61 · #5 (**permalink**) 17/11/2013, 16:03

Muchas gracias por tu respuesta. Me has sido de gran ayuda.

Un cordial saludo.