El "pie de página" suele ser el bloque más inferior del diseño de una página web. La dificultad más común a la hora de colocar este pie de página es colocarlo siempre en la parte inferior de la ventana, independientemente del tamaño de la página o del tipo de navegador. Ha habido bastantes soluciones al problema desde el momento de la transición masiva al diseño de bloques, y una de ellas se muestra a continuación.
Es necesario
Conocimientos básicos de CSS y HTML
Instrucciones
Paso 1
Tomemos como base el esquema de diseño de página más común: tres bloques colocados uno encima del otro. La parte superior (encabezado) siempre debe estar alineada con el borde superior de la ventana, la parte inferior (pie de página) con el borde inferior, y el principal (cuerpo) siempre debe llenar todo el espacio entre ellos. El código fuente debe contener un enlace a la especificación XHTML 1.0 Transitional, y la descripción de estilos debe colocarse en un archivo CSS externo (para evitar problemas con Opera 9. XX). La descripción HTML de la estructura debe colocarse en el cuerpo de la página. Comenzará, por supuesto, desde el bloque superior, en cuya etiqueta se debe colocar un atributo identificador con un valor, por ejemplo, divHead:
Bloque de encabezado.
El bloque principal debe constar de un par de bloques anidados. Al exterior se le dará el identificador divOut y al interior, divContent:
Contenido principal.
El pie de página se establece en divFoot:
Pie de página.
Paso 2
El código HTML completo de la página debería verse así:
Tres cuadras
@import "style.css";
Este es un bloque de encabezado.
Contenido principal.
Este es el pie de página de la página.
Paso 3
La descripción de estilo implementa el siguiente mecanismo de diseño: el bloque del medio (divOut) está configurado al 100% de altura, el bloque superior (divHead) tendrá un posicionamiento absoluto y el inferior, relativo. En el bloque de contenido principal (divContent), debe haber un espacio libre en la parte superior igual a la altura del bloque de encabezado para que no se superponga al contenido principal de la página. Y el bloque inferior (pie de página) debe tener un margen negativo en la parte superior, igual a la altura de este bloque. Esto lo elevará por encima del borde inferior de la ventana del navegador. Este mecanismo se puede implementar usando un archivo css con el siguiente contenido: * {margin: 0; relleno: 0}
html, cuerpo {altura: 100%;} cuerpo {
posición: relativa;
color: # 000;
}
#divOut {
margen: 0;
altura mínima: 100%;
fondo: #FFF;
color: # 000;
}
* html #divOut {altura: 100%;}
#divHead {
posición: absoluta;
izquierda: 0;
arriba: 0;
ancho: 100%;
altura: 80px;
fondo: # 2F5000;
desbordamiento: oculto;
alineación de texto: centro;
color: #FFF;
} #divFoot {
posición: relativa;
Limpia los dos;
margen superior: -60px;
altura: 60px;
ancho: 100%;
color de fondo: # 2F5000;
alineación de texto: centro;
color: #FFF;
}
.divContent {
ancho: 100%;
flotador izquierdo;
acolchado superior: 81px;
} El nombre que especificó para la hoja de estilo en el código HTML es style.css.
