ubiquitour.com

Cómo usar CSS para hacer filas de fotos

Una tabla HTML y algunos Javascript solían ser necesario para crear una galería de fotos de miniaturas e imágenes más grandes que aparecieron cuando se hace clic en una miniatura en. Ahora, usted puede lograr esto con CSS. No requiere ningún Javascript y puede ser reformado cambiando el CSS sin tener que reconstruir una tabla HTML complejo.

Instrucciones

El código HTML

1 Hacer un contenedor DIV en su archivo HTML.

2 Hacer una lista desordenada de hasta 10 elementos por página. Cada "& lt; LI & gt;"etiqueta (o elemento de la lista) contiene una fotografía y cualquier información que desee incluir, como su título y nombre del fotógrafo.

Por ejemplo:< UL >< LI >< /LI >< /UL >

3 Inserte el código fuente de la imagen y la información fotográfica en los elementos de lista. Asegúrese de utilizar sólo una foto por elemento de la lista.

Por ejemplo: < LI >< img src="/images/photo1.jpg" >< /LI >

4 Poner un salto de línea después de la fuente de la imagen y escriba un título para la fotografía.

Por ejemplo: < LI >< img src="/images/photo1.jpg" >< br > título < /LI >. Si desea incluir el nombre del fotógrafo, poner un segundo salto de línea y escriba el nombre del fotógrafo después de él.

5 Por encima de la "& lt; HTML & gt;"de la etiqueta en la parte superior del archivo, defina el tipo de documento XHTML 1.1. Esto asegura que la Galería funciona correctamente en los navegadores más populares.

Por ejemplo: <! HTML de DOCTYPE público "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd & quot; > 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd & quot; & amp; gt;

6 Agregar una etiqueta de ancla en blanco alrededor de cada elemento de la lista. Esto permite a IE a usar el ": hover" clase de pseudo pop las imágenes más grandes. Dar cada link un nombre de clase distintas pero relacionadas (slidea, slideb, slidec y así sucesivamente), esto le permitirá trabajar con imágenes específicas en el CSS. La "foto" antes "slidea" se utilizará para definir el estilo general de las miniaturas.

< LI >< una clase = "foto slidea" href = "#no" >< span >< img src="/images/photo1.jpg" >< br > título aquí < /span >< /a >< /LI >.

La CSS

7 Crear el diseño del cuerpo de la página web de galería. Esto establece el estilo para el texto de la página. Escoger una fuente alrededor de 12 px de tamaño y céntrela.

Por ejemplo: cuerpo {font-family: Times; font-size 12px; texto-alinee: Centro; espacio entre letras: .05em;}

8 Establezca la etiqueta DIV de contenedor no más ancha que 770px y no más alto que 396px para permitir la Galería representar muy bien en 800 x 600 resolución. Si usted está construyendo para una resolución de pantalla más grande, toma dimensiones más grandes.

Por ejemplo: #container {posición: pariente, ancho: 770px; altura: 396px; auto de auto 0 de margen 20px;}

9 Quitar las balas de los elementos de lista.

Por ejemplo: #container ul {lista-estilo-tipo: ninguno; margen: 0; padding: 0;}

10 Hacer invisible las imágenes grandes por lo que puede cargar previamente.

Por ejemplo: #container a.photo span {posición: absoluto, anchura 1px 1px de altura; top: 5px; desbordamiento: oculto;}

11 Crear el estilo de las miniaturas que incluirá cómo deben cuidar la imagen completa se ha visto.

Ejemplo: #container a.photo, #container a.photo:visited {Mostrar: bloquear; alinear texto: izquierda; border: 1px solid: #CCC};

Si desea que las imágenes en miniatura para ver diferentes después de la versión completa es vista, crear dos estilos y cambiar el color del borde.

12 Crear un estilo independiente de cada miniatura. El estilo será donde se llama la imagen en miniatura. Utilice los estilos llamados en cada una de las entradas de elemento de lista en la página HTML.

Por ejemplo: #container a.slidea {fondo: URL (/ images/thumb_01.jpg); altura: altura de 90px: 60px;}

13 Definir el final de cada fila. Para un trazado de 800 x 600, cada cuarto imagen será el final de su fila y se iniciará una nueva fila con la quinta imagen.

Por ejemplo: html #container a.slided {width: 90 px; w\idth:92 px;}

14 Definir las dimensiones de su diseño de la Galería dando dimensiones específicas para la anchura y la altura a la etiqueta de lista desordenada. Se suman los anchos de sus miniaturas de una sola fila y las alturas de una sola columna de miniaturas. Utilizar los totales de la dimensión en la hoja de estilo.

Por ejemplo: #container ul {width: 240px; altura: 180px}

15 Incluyen que manera desea que las imágenes que flotan (izquierda o derecha) y un pequeño margen:

Por ejemplo: #container ul {width: 240px; altura: 180px; flotador: derecho; margen: 4px;}

16 Ajuste el flotador para las imágenes individuales.

Por ejemplo: #container li {float: left;}

17 Que la imagen aparezca cuando se mueve el ratón sobre la miniatura.

Por ejemplo: #container a.photo:hover img {flotante: izquierda; margen derecha: 4px}

Consejos y advertencias

  • Utilizar miniaturas cuadradas para facilitar el diseño.
  • Si desea que la galería para trabajar sin desplazamiento en resolución de 800 x 600, tomar sus completos imágenes no mayores de 372px 240px.