Galería de imágenes

Vamos a crear un presentación de una mini galería de Tux (mascota de Linux). Estos son los protagonistas:

 

 

Haz click derecho con el ratón sobre cada imagen y eliges “Guardar imagen como..” y ponlo dentro del directorio donde estará este ejemplo.

Empezamos creando la plantilla HTML que llamaremos index.html con el código HTML que necesitaremos, guardarlo en una carpeta que llamaremos galeria.

Ahora supongamos que tenemos más de una categoría de miniaturas que queremos mostrar en la página, y queremos agruparlas visualmente, con un mismo fondo y/o borde. Simplemente, enciérralos en un contenedor para las imágenes:

Creamos un div que contendrá la imagen:

Seguimos con los div’s para las imágenes restantes:

De momento nuestro navegador debería mostrar las imágenes así:

Ahora vamos a escribir las reglas para configurar las imágenes. Usando CSS necesitamos colocarlos en div’s separados. Para que se alineen horizontalmente a través de la ventana utilizamos CSS para hacer que cada uno de estos div’s floten (FLOAT) a la izquierda y centrando los textos.

El navegador mostrará:

Ahora supongamos que tenemos más de una categoría de miniaturas que queremos mostrar en la página, y queremos agruparlas visualmente, con un mismo fondo y/o borde. Simplemente, enciérralos en un div contenedor:

Veamos el resultado:

Sin embargo, al hacerlo nos topamos con un problema. Cuando flotamos un elemento con CSS, ya no consume ningún “espacio” y el fondo y el borde se muestran sobre las imágenes en lugar de rodearlas. Necesitamos poner algo de contenido además de los div’s flotantes dentro del contenedor div. Algo como un div que haga de espaciador:

Esta regla la colocaremos justo debajo de la etiqueta

, y repetiremos la misma regla al final de la regla del contenedor

.

  • Haz pruebas con otras imágenes de tu galería y ajusta los tamaños y la forma de verlo tu navegador.