El bloque horizontal más inferior de un diseño de página a menudo se denomina "pie de página". En él, como en otros bloques de la página, se colocan elementos de diseño, pero a diferencia de otros, suelen surgir problemas específicos con el posicionamiento de este bloque en particular. Están relacionados con el hecho de que los diferentes navegadores entienden los estándares del lenguaje CSS de manera diferente y puede ser bastante difícil lograr que el pie de página esté en el borde inferior de la ventana del navegador. A continuación se muestra el código de una de las soluciones a este problema.
Necesario
Conocimientos básicos de CSS y HTML
Instrucciones
Paso 1
En la primera línea del código fuente de la página, coloque una referencia a la especificación de transición XHTML 1.0:
Paso 2
Coloque los bloques principales de la estructura de la página dentro del cuerpo del documento (entre las etiquetas y). El bloque en el que se colocará el contenido principal debe constar de dos capas anidadas. Por ejemplo, deje que el exterior tenga el identificador OuterDiv, y el interior - InnerDiv:
Aquí es donde estará el contenido principal de la página.
Detrás de ellos coloque un bloque de pie de página con un identificador, por ejemplo, FooterDiv:
Pie de página de la página.
Paso 3
Coloque en la parte principal del código HTML (entre las etiquetas y) un enlace a un archivo externo con una descripción de los estilos CSS:
@import "footerStyle.css";
Paso 4
Guarde el código completo de la página maestra en un archivo con la extensión html. Podría verse así:
Pie de página presionado
@import "footerStyle.css";
Aquí es donde estará el contenido principal de la página.
Pie de página de la página.
Paso 5
Cree un archivo de hoja de estilo: un archivo de texto sin formato que debe guardarse con la extensión css y el nombre que especificó en el código HTML (footerStyle.css). Escriba en este archivo las siguientes descripciones de estilo para los bloques utilizados en la página:
* {margen: 0; relleno: 0}
html, cuerpo {altura: 100%;}
cuerpo {
posición: relativa;
color: # 222222;
}
#OuterDiv {
margen: 0;
altura mínima: 100%;
fondo: #aaaaaa;
color: # 222222;
}
* html #OuterDiv {altura: 100%;}
#FooterDiv {
posición: relativa;
Limpia los dos;
margen superior: -60px;
altura: 60px;
ancho: 100%;
color de fondo: Azul oscuro;
alineación de texto: centro;
color: #eeeeff;
}
. InnerDiv {
ancho: 100%;
flotador izquierdo;
}
