Categorized | Destacados, Diseño, Tutoriales

Footer siempre abajo HTML y CSS

Publicado el 06 julio 2012 por

La accesibilidad en Web es una tema importante dentro de nuestro desarrollos en HTML y CSS, por eso el día de hoy presentamos a usted una página para que usted, pueda tener un footer que siempre se quede en el fondo de la página, esto es para darle un toque formal a nuestra web, y que además este dentro de estándares, que marca la W3C.

La página es http://www.cssstickyfooter.com/ en (Inglés)

Y funciona de esta manera:

Tenemos nuestra página en HTML, y la creamos de esta manera:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
	< head>
		< title>Titulo</title>
		< link rel="stylesheet" href="style.css" type="text/css"/>
		< !-- aquí se selecciona la hoja de estilos que contendrá el css que hara todo el trabajo -->
	</head>
	< body>
		< div id="wrap">
			<!-- envolvente general de nuestra página -->
			< div id="main">
				<!-- Contenido de nuesta pagina -->
				< p>
					aqui va el contenido de nuestra p&aacute;gina.
				</p>
			</div>
		</div>
		< div id="footer">
			< p>
				Texto para el footer
			</p>
		</div>
	</body>
</html>

 

Y este es el CSS que hará la “magia”.

/* Sticky Footer Solution by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com*/
* {
margin: 0;
padding: 0;
}/*Quitamos unas propiedades que por defecto traen los navegadores y las ponemos en “0”*/
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 50px;
text-align: center;
}/* Altura en px del footer */
#footer {
position: relative;
margin-top: -50px; /* altura en px del footer con valor negativo */
height: 50px; /* Altura del Footer en px*/
clear: both;
background: #286af0;
text-align: center;
color: #FFFFFF;
}
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/* Efecto Negativo para OPERA*/
}

Y como siempre nuestro “agradable” explorador que nos reta a ser mejores cada día “Internet Explorer”

Necesita una clase especial que solo el reconozca, y esta ira en la parte del header de esta manera:

<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->

Y por fin nuestro resultado seria el siguiente.

Tres capturas de pantalla mostrando el resultado en diferentes resoluciones del navegador.

Vista Previa Footer siempre abajo browser expandido

Vista Previa Footer siempre abajo browser expandido

Vista Previa Footer siempre abajo browser mediano

Vista Previa Footer siempre abajo browser mediano

Vista Previa Footer siempre abajo browser miniatura

Vista Previa Footer siempre abajo browser miniatura

1 Comentarios para esta entrada

  1. Fafa Says:

    Gracias :D

    Dejo mi web para que se pueda ver el resultado http://www.vidayobradefafa.com.ar/

Leave a Reply