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.

 

Anuncios

Transparencia en colores de fondo en CSS

Vamos a realizar un ejercicio en el que se superpongan tres cuadros de diferentes colores para apreciar las mezclas de los mismos. Para ello necesitamos utilizar la propiedad CSS background-color haciendo uso de rgba, en el que configuramos los valores para rojo, verde y azul y especificamos un valor para la transparencia del tono, que estará comprendido entre 0 y 1.

Para seleccionar un tono es recomendable visitar cualquiera de las diferentes webs que existen en la red para obtener la combinación rgb.

Así, para obtener una salida como la que se ve más abajo, se pueden apreciar a continuación los códigos HTML y CSS utilizados para ello.

Imágenes de fondo en CSS

Para incluir imágenes de fondo en CSS utilizaremos las propiedades background-image para indicar la ruta de la imagen, background-position para establecer la alineación vertical y horizontal de la imagen y background-repeat.

El uso de background-repeat se debe a que si la imagen es más pequeña que el elemento se repetirá por defecto, horizontal y verticalmente hasta ocupar todo el espacio disponible. Si queremos modificar este comportamiento, se puede hacer con los valores no-repeat (no se repite), repeat-x (se repite horizontalmente) y repeat-y (se repite verticalmente).

Asimismo, con la propiedad background-size especificaremos el tamaño de la imagen.

De esta forma hemos diseñado una web con imágenes de la Mezquita de Córdoba, creando tres bloques <div> de 200px de ancho y 200px de alto. Hemos asignado a cada uno de los bloques una imagen de fondo de 50×50 y un borde distinto. Además, se cumplen los siguientes requisitos:

• En el primer bloque la imagen de fondo no se repite y está centrada tanto vertical como horizontalmente.
• En el segundo bloque, la imagen se repetirá horizontalmente y estará situada en la parte inferior.
• En el tercer bloque, la imagen se repetirá verticalmente y se situará a la derecha.

El resultado es el que aparece en la imagen de abajo.

El código HTML y CSS para obtener este resultado se muestra a continuación.

Lista desordenada con diferentes bordes en CSS

En esta actividad queremos crear una lista desordenada en la que los elementos pares tengan un borde punteado rojo, y estén desplazados veinte píxeles hacia la derecha con respecto a los elementos impares. Estos últimos tendrán un borde continuo, pero con un color diferente para cada lado. Además, todos los elementos tendrán un margen interno con respecto al contenido de cinco píxeles.

Para afrontar esta actividad, vamos a utilizar dos clases par e impar en el documento HTML.

Así, los archivos HTML y CSS que solucionan este ejercicio se muestran abajo.

CSS: uso de position relative

Hemos realizado una práctica en la que queremos configurar una web con el aspecto que aparece abajo.

Para ello tenemos que hacer uso la propiedad CSS position:relative. Así, podemos desplazar a una posición relativa con respecto a los otros elementos añadiendo las propiedades top, bottom, left y right.

Asimismo, hemos hecho uso de la propiedad dipslay: inline-block, que hace que el elemento se establezca como un bloque, pero se comporte como un elemento en línea, respetando anchos y altos.

Además, se ha utilizado la propiedad CSS padding, configurando el margen interno entre un elemento y su contenido.

El archivo HTML y el CSS se pueden descargar en los enlaces de abajo:

Archivo HTML

Archivo CSS