Comentarios al ejercicio Citas (reducido)

Etiquetas utilizadas

Al quitar el estilo se puede observar que la única etiqueta de bloque utilizada es <p>.

Al poner el estilo se puede observar que cada cita y su autor forman una ficha, por tanto hay divisiones agrupando cada cita y autor. También se puede observar que todas las citas se muestran en una posición determinada (sin barra de desplazamiento), por tanto hay una división agrupando todas las citas.

Clases utilizadas

Para posicionar las citas es conveniente dar un id a la división que engloba todas las citas.

Las citas son destinos de los enlaces situados en cada imagen, así que hay que dar un id distinto a cada división de cita.

No es necesario dar clase a las divisiones de citas para distinguirlas de la división que engloba a todos las citas. Se puede utilizar el selector de descendientes div div para establecer su estilo.

Las citas y los autores tienen estilos distintos, por lo que se pueden utilizar dos clases (o una sola).

Para posicionar las imágenes es conveniente dar un id a cada imagen.

Otros

Las imágenes están insertadas en el primer párrafo en orden alfabético (gato.png, dinero.png, periodico.png, tele.png) y enlazan con las citas en orden (primera imagen con primera cita, etc). Los dibujos tienen relación con el tema de la cita.

La división que engloba todas las citas debe tener posicionamiento absoluto. Al modificar el ancho de la ventana se puede observar que la posición y tamaño de esa división están definidos en porcentaje %.

Cada imagen debe tener posicionamiento absoluto. Al modificar el ancho de la ventana se puede observar que la posición y tamaño de cada imagen están definidos en porcentaje %.

Solución del ejercicio

El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú Ver > Código fuente de la página en Firefox o Ver > Código fuente en Internet Explorer.

La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio.

Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.