Hola Vlad, he probado tu código y en Firefox el footer se va al fondo pero
un poco mas de donde debiera [1] ya que debería ser exactamente el alto de
la pantalla porque el contenido es corto, esto se debe a que los navegadores
tienen medidas predeterminadas para los elementos, esto se "resetea"
poniendo esto al inicio de tu CSS:
*{margin:0; padding:0;}
Pruébalo y veras que se ve bien en FF[2] e IE, no he podido probarlo en otro
navegador.
Saludos
[1] http://img68.imageshack.us/img68/4929/footer1qb1.jpg
[2] http://img292.imageshack.us/img292/4030/footer2ad9.jpg
Christian Roque Geldres
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: miércoles, 22 de noviembre de 2006 02:24
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Pegar DIV al bottom de la ventana
Hola Christiaan,
Mira yo estoy probando con la solución que me diste:
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=iso-8859-1" />
<title>Footer</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Inicio - Contenedor del sitio Web -->
<div id="contenedor">
<!-- Inicio - Contenido del sitio Web -->
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam
mauris, blandit a, vestibulum non, condimentum in, dolor. Quisque non
libero. Nulla pellentesque lobortis odio. Donec sapien pede, tristique eget,
auctor sed, vestibulum sed, felis. Ut nisi tellus, scelerisque ac, lobortis
sit amet, eleifend fermentum, odio. Ut ornare nunc sit amet massa. Nunc
vitae dolor. Aliquam a nunc sed erat convallis tempus. Ut non dui sed nisi
vehicula condimentum. Donec venenatis convallis tortor.</p>
</div>
<!-- Fin - Contenido del sitio Web -->
</div>
<!-- Inicio - Contenedor del sitio Web -->
<div id="pie">
<p>Todos los derechos reservados</p>
</div>
<!-- Fin - Contenedor del sitio Web -->
</body>
</html>
CSS
html{height: 100%;}
body{
height: 100%;
margin: 0px;
padding: 0px;
background-color:#fc0;
}
* html #contenedor {height: 100%;}
#contenedor {
position:relative;
height:100%;
margin: auto;
}
* html #pie {margin-top: -40px;}
#pie {
position:relative;
height: 40px;
margin-top:-40px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
background-color:#600;
}
En IE me funciona bien en FF no, tienes idea de que pueda ser?
Saludos,
Vlad.
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Miércoles, 22 de Noviembre de 2006 12:21 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Pegar DIV al bottom de la ventana
El problema de ese método de usar "position:absolute; bottom:0;" es que la
primera vez que cargas una pagina larga (ejem un blog) que tenga varias
imágenes, el pie de pagina puede aparecer no necesariamente al final de la
pagina, por eso yo recomiendo el footerStickAlt:
http://themaninblue.com/experiment/footerStickAlt/
Ahí puedes ver ejemplos del método que mencionas y uno alternativo que en
lugar de englobar el footer en un contenedor lo que hace es poner el footer
fuera del contenedor, a este contenedor se le da una altura de 100% y el
footer se posiciona al final con un margen superior negativo, la explicación
en si esta acá:
http://themaninblue.com/writing/perspective/2005/08/29/
Saludos
Christian Roque G.
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de sn
Enviado el: miércoles, 22 de noviembre de 2006 12:02
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Pegar DIV al bottom de la ventana
yo resolví el mismo dilema hace unos cuantos meses en la lista, he pegado el
post en mensajes anteriores pero la gente sorprendentemente decía que no le
funcionaba.
así que para aclarar de una vez por todas el entuerto, ya que parece ser un
problema bastante común os pego un enlace al pedazo de blog WebIntenta,
donde el colega se ha pegado unas plantillas de diseños típicos, el que nos
ocupa entre ellos.
http://www.webintenta.com/wp-content/uploads/2006/11/Lay2columnasAnchoFijoPi
e.html
pues ahi esta, espero solucione.
un saludo.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
