ubiquitour.com

Cómo colocar un pie de página con CSS

Cómo colocar un pie de página con CSS

Diseñadores web implementan estilos de página y sitio web utilizando HTML y hojas de estilo en cascada. Todos los elementos de una página Web pueden ser de estilo usando CSS, incluyendo cabeceras, el contenido y pies de página. Con un diseño que incluye algunos de los mismos elementos en la misma posición en cada página, por ejemplo con pies de página, crea una apariencia consistente a través de un sitio y en última instancia hace más usable. Un pie de página con CSS de posicionamiento suele ser una actividad sencilla, incluso para principiantes.

Instrucciones

1 Crear la página HTML. Abra un nuevo archivo en un editor de texto e introduzca el siguiente código de marcado, que incluye un enlace a una hoja de estilos externa y algunos elementos HTML incluyendo el pie de página:

< html >

< head >

< link rel = "stylesheet" type = "text/css" href="sitestyle.css" / >

< /HEAD >

< cuerpo >

< div id = "contenedor" >

< div id = "cabecera" > encabezado < / div >

< div id = "contenido" > contenido de la Página principal < / div >

< div id = "footer" > pie de página < / div >

< / div >

< /body >

< / html >

Un diseño de página Web típica consiste en tener un área de encabezado a lo largo de la parte superior y un pie de página a lo largo de la parte inferior, con la página de contenido en el medio.

2 Crear el archivo de CSS. Abra un nuevo archivo en un editor de texto y guarde el "sitestyle.css" para que coincida con el enlace en la sección head del HTML. Para colocar el elemento de pie de página con eficacia, necesita primero estilo de su elemento primario, que es el contenedor "div".

Introduzca el siguiente código:

envase {} anchura: 80%;

margen: auto;

fondo color: #CCCCCC;}

Especifica el ancho de página total como el elemento "contenedor" tiene todo el contenido de la página. Su encabezado, contenido y pie de página se asignarán propiedades de estilo en relación con éste. El color de fondo se ha incluido exclusivamente para que usted puede ver los límites de cada elemento mientras que están desarrollando su página.

3 Agregar reglas de estilo para el elemento de pie de página. Introduzca el siguiente, definiendo la posición de su pie de página:

pie de página {} anchura: 90%;

margen: auto;

texto-alinee: Centro;

claro: ambos;

color de fondo: #FFFFCC;}

El pie de página se define como ocupando un porcentaje de su elemento primario, con la propiedad de margen declarando que debe mentir en el centro de los padres. También se centra en el pie de página el texto, que, a su vez, centrará otros elementos dentro del mismo como imágenes. El elemento se establece en claro ambos lados, lo que significa que no hay otros elementos aparecerán en la misma línea horizontal que se. Guardar los archivos y ver la página en un explorador Web.

4 Estilo el resto de los elementos de la página y asegúrese de que su pie es todavía de estilo la manera que tiene que ser. Al crear reglas CSS, a veces usted puede encontrar que tienen inesperado "" repercusiones, recalcado en estilo te creado previamente. El código de ejemplo siguiente dicta el estilo de las secciones de encabezado y contenido de la página:

cabecera, #content {} anchura: 90%;

margen: auto;

claro: ambos;

color de fondo: #FFCCFF;}

Guardar los cambios y ver tu página en un navegador.

5 Experimentar con las reglas CSS para lograr la posición deseada el pie de página que. Los navegadores pueden variar notoriamente cuando se trata de representación CSS de estilo contenido, por lo que idealmente debe probar su página en tantos navegadores como sea posible. Usted puede encontrar que usted necesita agregar o modificar las reglas CSS para aplicar su diseño a través de todos los navegadores, especialmente más viejas versiones de Internet Explorer.

Consejos y advertencias

  • Usar "auto" como la propiedad de margen en CSS puede solamente del centro de un elemento si su padre tiene un ancho especificado.
  • Nunca asuma que todos los usuarios podrán ver tus páginas la forma de que hacer, esto depende enteramente de qué navegador está utilizando.