Encabezado y pie de página en posición fija en CSS


En esta actividad vamos a ampliar el ejercicio realizado anteriormente que se resolvió en una entrada de este blog. Se exponían los ingredientes de la receta de un bizcocho, y ahora queremos añadir una serie de párrafos en los que se explique la preparación, de modo que el tamaño total del contenido obligue a hacer scroll vertical.

Además, vamos a disponer un elemento <div> como encabezado de la página, con un fondo azul oscuro y situado a modo de barra superior en la página. Se mantendrá en esa posición fija incluso cuando el usuario haga scroll.

También se tendrá que añadir otro elemento <div> que corresponda al pie de página, con un fondo de color verde oscuro y anclado en la parte inferior de la página.

Asimismo, para que no haya espacio entre los elementos, se eliminará el margen, estableciéndolo en 0 píxeles.

Finalmente, se tendrá que establecer un margen interior para el contenido, con el objetivo de que no quede tapado por el encabezado o el pie de página.

El resultado final aparece en la imagen de abajo, así como el código HTML y CSS.

act9p83

htmlact9p83i

htmlact9p83ii

cssact9p83i

cssact9p83ii

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s