¡Aaaaabajo!
Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta. El código completo podrán digerirlo en la página misma de ejemplo, pero quiero hacer hincapié en 2 elementos importantes y que marcan la diferenciación de esta técnica:
/* hacks varios, adivinen para q browser… */
html, body, #contenedor {
min-height: 100%; /* alto minimo FF y Safari */
width: 100%;
height: 100%; /* alto minimo para IE Windows */
margin: 0;
padding: 0;
}
html>body #contenedor {
height: auto; /* con este hack escondemos el min-height de IE*/
}
/* fin hacks varios */
Estos hacks fueron necesarios a la hora de que IE6 hiciera caso al alto de la ventana total del browser, dado que no soporta la propiedad min-height. Es un pequeño truco que resulta para suplir esta falencia. Se supone que estará solucionado en IE7.
#footer {
position: absolute;
bottom: 0;
width: 80%;
margin-left: 10%;
font-size: 11px;
font-weight: bolder;
color: #C00;
text-align: center;
}
Esta es la otra parte crucial del código. Aquí, se le dice al div footer que se quede pegado al borde inferior del browser (bottom: 0;), posicionado absolutamente. El resto, mera estética.
Pueden escalar la ventana de su browser para comprobar que realmente el footer permanece por debajo de todo el contenido.
Probado en IE6, Safari, Firefox, Opera.
Muy bueno!
Brujeriaaaaa!!! este blogger hace brujeria
increíble, nunca lo había pensado de esa forma, gracias por el “tip” y el fundamento teórico.
Que pena no tener tanto tiempo como para poner en práctica tus sabios post….una pena!
Saludos
¿Donde puedo encontrar las especificaciones de CSS para usar con Firefox y Safari? porque no encuentro gran cosa en la web.
Saludos
marcelo, a q te refieres? porq safari y FF son de los mejores en renderizar css, asi q si tu codigo esta bien hecho no tendrias problemas con esos.
IE es el q necesita hacks y versionees propias. salu2
Thanks hermano!!!!
Excelente este sitio. Me ha servido bastante en detalles que siempre olvido.
Te tengo una pregunta eso si.
Logro hacer que mi footer kede posicionado abajo, excelente, ningun problema hasta ahi, el problema radica en que cuando keda abajo el div que contiene la informacion (#principal en tu caso), no crece hasta llegar al footer. no es un gran problema en tu ejemplo, ya que tiene el mismo colo de fondo que el body o #contenedor. En cambio en el mio, mi #principal (no se llama asi, pero para el caso sirve), tiene un color distinto que al del body, y cuando tiene un texto pequeño, no alcanza a cubrir hasta el footer y se ve horrible, ya que queda un espacio de fondo mostrandose. ojala pudieses ayudarme, ya que llevo dos dias probando con casi todo de CSS y nada, inventado casi la rueda y no lo logro.
Saludos
=]+[=
HiDAl, chekea el ultimo articulo 100% alto, finalmente para todos