Tema: Pie siempre abajo dentro de un marco
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 07/03/2011, 10:20
Oscareverb
 
Fecha de Ingreso: febrero-2011
Ubicación: Vigo
Mensajes: 32
Antigüedad: 13 años, 2 meses
Puntos: 2
Respuesta: Pie siempre abajo dentro de un marco
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:
  1. Fondo del body #444444
  2. Dentro de ese fondo una caja centrada de width:960px con border-left y right de 1px blancos.
  3. 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).
  4. Una cabecera de 940px también centrada lateralmente y de hight:100px (el color da igual).
  5. 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).
  6. 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
  1. * {
  2.     margin:0;
  3.     padding:0;
  4.     border:0;
  5.     outline:0;
  6.     
  7. }
  8. html, body {
  9.     height:100%;
  10.     background-color:#444444;
  11.     font:1em Verdana, Arial;
  12. }
  13. p {
  14.     padding:10px;
  15. }
  16. #contenedor {
  17.     position:absolute;
  18.     width:960px;
  19.     height:auto !important;
  20.     min-height:100%;
  21.     height:100%;
  22.     margin-left:50%;
  23.     left:-480px;
  24.     border-left:1px solid #fff;
  25.     border-right:1px solid #fff;
  26.     background-color:#a0a0a0;
  27. }
  28. #contenido {
  29.     position:absolute;
  30.     width:940px;
  31.     height:auto !important;
  32.     height:100%;
  33.     min-height:100%;
  34.     margin-left:50%;
  35.     left:-470px;
  36.     background-color:#eaeaea;
  37. }
  38. #cabecera {
  39.     position:absolute;
  40.     width:940px;
  41.     height:100px;
  42.     margin-left:50%;
  43.     left:-470px;
  44.     background-color:#f00;
  45. }
  46. #principal {
  47.     float:lef;
  48.     width:940px;
  49.     margin-top:110px;
  50. }
  51. #pie {
  52.     position:absolute;
  53.     width:940px;
  54.     height:50px;
  55.     margin-left:50%;
  56.     left:-470px;
  57.     bottom:0;
  58.     background-color:#000;
  59. }

Gracias y un saludo.

Oscareverb.