Pie siempre abajo dentro de un marco

Oscareverb · #1 (**permalink**) 06/03/2011, 11:34

Hola a todos, tengo un un problema a la hora de diseñar una web con el pie siempre abajo, he probado con varios manuales los cuales me han servido a la perfección pero... el problema viene cuando ese contenedor lo meto dentro de otro para aplicarle un marco de de otro color o unos bordes de otro color.

Supongo que con esto no me he explicado lo suficientemente bien, a si que os dejo el código para que le echeis un vistazo. Gracias.

Código HTML:

Ver original<head>
</head>
<body>
 
<div id="contenedor">
 
<div id="marco">
 
   <div id="contenido">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis pellentesque odio, quis lacinia libero euismod in. Vestibulum eget magna et libero malesuada faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper augue purus, nec tristique nisl. Nam varius dictum consequat. Nulla volutpat, tortor ut vestibulum feugiat, mauris velit congue nunc, a consequat quam enim eget tortor. Nullam pulvinar bibendum massa in ullamcorper. Duis consequat tortor eu velit elementum nec viverra eros congue. Aliquam erat volutpat. Ut elementum lectus ut est egestas mattis. Integer non elit non ante tristique lobortis. Etiam lacinia tempus nulla et suscipit. Nullam sem metus, facilisis id faucibus sed, fringilla a quam. Etiam volutpat vestibulum euismod. Integer vel massa at risus aliquet semper eget ut massa. Proin dapibus, lacus dignissim ullamcorper molestie, justo nisl bibendum nisi, eget cursus quam nisi sit amet tellus. Aenean pharetra pretium pharetra. Nam id urna justo, sit amet interdum nunc. Maecenas rhoncus varius dolor, eget tristique risus volutpat ac. Aenean vitae auctor justo. 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis pellentesque odio, quis lacinia libero euismod in. Vestibulum eget magna et libero malesuada faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper augue purus, nec tristique nisl. Nam varius dictum consequat. Nulla volutpat, tortor ut vestibulum feugiat, mauris velit congue nunc, a consequat quam enim eget tortor. Nullam pulvinar bibendum massa in ullamcorper. Duis consequat tortor eu velit elementum nec viverra eros congue. Aliquam erat volutpat. Ut elementum lectus ut est egestas mattis. Integer non elit non ante tristique lobortis. Etiam lacinia tempus nulla et suscipit. Nullam sem metus, facilisis id faucibus sed, fringilla a quam. Etiam volutpat vestibulum euismod. Integer vel massa at risus aliquet semper eget ut massa. Proin dapibus, lacus dignissim ullamcorper molestie, justo nisl bibendum nisi, eget cursus quam nisi sit amet tellus. Aenean pharetra pretium pharetra. Nam id urna justo, sit amet interdum nunc. Maecenas rhoncus varius dolor, eget tristique risus volutpat ac. Aenean vitae auctor justo. 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis pellentesque odio, quis lacinia libero euismod in. Vestibulum eget magna et libero malesuada faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi semper augue purus, nec tristique nisl. Nam varius dictum consequat. Nulla volutpat, tortor ut vestibulum feugiat, mauris velit congue nunc, a consequat quam enim eget tortor. Nullam pulvinar bibendum massa in ullamcorper. Duis consequat tortor eu velit elementum nec viverra eros congue. Aliquam erat volutpat. Ut elementum lectus ut est egestas mattis. Integer non elit non ante tristique lobortis. Etiam lacinia tempus nulla et suscipit. Nullam sem metus, facilisis id faucibus sed, fringilla a quam. Etiam volutpat vestibulum euismod. Integer vel massa at risus aliquet semper eget ut massa. Proin dapibus, lacus dignissim ullamcorper molestie, justo nisl bibendum nisi, eget cursus quam nisi sit amet tellus. Aenean pharetra pretium pharetra. Nam id urna justo, sit amet interdum nunc. Maecenas rhoncus varius dolor, eget tristique risus volutpat ac. Aenean vitae auctor justo.</p> 
   </div>  
  
</div>
 <div id="corte"></div> 
   </div>
<div id="pie">
</div>
 
</body>

[/HTML]

Aquí os dejo el CSS, la caja id="marco" es la que utilizo para crear un marco gris de 10px en ambos lados, mi objetivo es que esos marco lleguen hasta abajo de la página aun que el texto del contenido este por la mitad, pero al darle la "position:absolute" el texto pasas por debajo del pie y se me descuadra el diseño.

Código CSS:

Ver original* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}
html, body {
    height:100%;
}
body {
    background-color:#555555;
}
p {
    padding:10px;
}
#contenedor {
    width:960px;
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 auto -40px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    background-color:#eaeaea;
}
#marco {
    width:960;
    position:absolute;
    height:100%;
    min-height:100%;
    height:auto !important;
    margin:0 auto;
    border-right:10px solid #a0a0a0;
    border-left:10px solid #a0a0a0;
}
    
#contenido {
    position:relative;
    width:940px;
    height:100%;
    margin:0 auto;
}
#corte {
    clear:both;
    height:40px;
}
#pie {
    clear:both;
    width:940px;
    height:40px;
    margin:0 auto;
    border-right:10px solid #a0a0a0;
    border-left:10px solid #a0a0a0;
    background-color:#000;
}

No se si con esto me he explicado bien, pondre una imagen si hace falta.

kseso? · #2 (**permalink**) 06/03/2011, 14:03

Mire este ejemplo a ver si le es de utilidad:
http://css.devillasbuenas.es/pie_abajo2.html
Sólo tiene que eliminar el head, redefinir la anchura del pie y asignar los bordes laterales de #contenido

cristian_cena · #3 (**permalink**) 06/03/2011, 17:58

hola kseso, yo usaba sticky footer, desconocía su aporte, asi que lo veré ya que parece mas claro. muchas gracias.

Oscareverb · #4 (**permalink**) 07/03/2011, 10:20

Muchas gracias kseso? y cristian_cena por vuestras rápidas respuestas, esas soluciones que aportais ya las he utilizado en diversas ocasiones y me funcionan a la perfección, pero para lo que intento crear ahora creo que no me valen por que intento tener un pie siempre abajo en una caja dentro de otra.

Lo que intento conseguir es:

Fondo del body #444444
Dentro de ese fondo una caja centrada de width:960px con border-left y right de 1px blancos.
Dentro de la de 960px otra centrada de 940px, así quedarían los espacios laterales de 10px de otro color que sería #a0a0a0, o dandole ese background-color a la caja de 960px, o poniendo border-left y right de 10px de ese color a la de 940px (no sé que será lo adecuado).
Una cabecera de 940px también centrada lateralmente y de hight:100px (el color da igual).
Debajo de la cabecera el contenido, también de 940px centrado, background-color:#eaeaea y que ocupe el 100% de la página (normalmente es el problema que tengo, que solo me ocupa el tamaño del texto que contenga).
Y lo mas importante, el pie de página siempre abajo, en todo momento y que al aumentar o reducir la resolucion el texto del contenido lo empuje hacia abajo (el problema que suelo tener es que el texto pasa por debajo del pie, lo atraviesa)

Bueno el codigo que voy a poner a continuación está mal y no funciona como deseo, pero la idea sería así con el pie siempre abajo y empujado por el texto.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es" />

<title>Prueba de pie siempre abajo</title>

<link rel="stylesheet" type="text/css" href="css/estilos.css" />

</head>

<body>

<div id="contenedor">
   
    <div id="contenido">
		<div id="cabecera">
		</div>
		
		<div id="principal">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget tortor dolor, vitae cursus ligula. Morbi vehicula mauris in leo vehicula malesuada. Nullam euismod tincidunt metus eget porta. Quisque porttitor viverra tristique. Donec dolor ipsum, porttitor sit amet tincidunt eget, commodo quis velit. In in nisl a justo dignissim aliquam. Aliquam id mi purus, egestas dignissim massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique eleifend magna a accumsan. Suspendisse rhoncus sapien non risus mollis tincidunt. Sed eu elit vitae velit laoreet tincidunt quis bibendum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim turpis, egestas vel scelerisque eget, mattis non purus. Aenean lobortis faucibus molestie.</p> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget tortor dolor, vitae cursus ligula. Morbi vehicula mauris in leo vehicula malesuada. Nullam euismod tincidunt metus eget porta. Quisque porttitor viverra tristique. Donec dolor ipsum, porttitor sit amet tincidunt eget, commodo quis velit. In in nisl a justo dignissim aliquam. Aliquam id mi purus, egestas dignissim massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique eleifend magna a accumsan. Suspendisse rhoncus sapien non risus mollis tincidunt. Sed eu elit vitae velit laoreet tincidunt quis bibendum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim turpis, egestas vel scelerisque eget, mattis non purus. Aenean lobortis faucibus molestie.</p>
					
			
		</div>
    </div>		 
	
</div>

<div id="pie">
</div> 



</body>

</html>

Y este el CSS utilizado:

Código CSS:

Ver original* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    
}
html, body {
    height:100%;
    background-color:#444444;
    font:1em Verdana, Arial;
}
p {
    padding:10px;
}
#contenedor {
    position:absolute;
    width:960px;
    height:auto !important;
    min-height:100%;
    height:100%;
    margin-left:50%;
    left:-480px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    background-color:#a0a0a0;
}
#contenido {
    position:absolute;
    width:940px;
    height:auto !important;
    height:100%;
    min-height:100%;
    margin-left:50%;
    left:-470px;
    background-color:#eaeaea;
}
#cabecera {
    position:absolute;
    width:940px;
    height:100px;
    margin-left:50%;
    left:-470px;
    background-color:#f00;
}
#principal {
    float:lef;
    width:940px;
    margin-top:110px;
}
#pie {
    position:absolute;
    width:940px;
    height:50px;
    margin-left:50%;
    left:-470px;
    bottom:0;
    background-color:#000;
}

Gracias y un saludo.

Oscareverb.

Oscareverb · #5 (**permalink**) 08/03/2011, 05:25

Hola de nuevo, ya lo he solucionado.

El truco consiste en cargar en el background del body una imagen de width:960px y repeat-y con el color de fondo deseado, con esto consigo poner ya el contenido encima sin tener que crear ninguna caja antes, me estoy ahorrando poner 2 o 3 cajas antes lo cual me crea una complicación enorme a la hora de ubicar el pie siempre abajo.

Me da un poco de pena no poder hacerlo todo solo con CSS pero bueno...el código es válido y nadie se va a dar cuenta xD. En cuanto lo suba al servidor os pondré el enlace para que le echeis un ojo.

Un saludo y hasta otra

Oscareverb.