Comentarios al ejercicio Citas de
Henry-Louis MenckenComentarios al ejercicio Citas de
Henry-Louis MenckenAl quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1>, <ul>, <li> y <p>.
Al poner el estilo se puede observar que cada grupo de citas forman una ficha, por tanto hay divisiones agrupando cada grupo de citas. También se puede observar que todos los grupos de citas se muestran en una posición determinada (con barra de desplazamiento, como se observa aumentando el tipo de letra), por tanto hay una división agrupando todas los grupos de citas.
La lista se muestra en una posición determinada. Para ello se puede crear una división conteniendo la lista.
Para posicionar la lista es necesario dar un id a la división que contiene la lista.
Los grupos de citas son destinos de los enlaces situados en la lista, así que hay que dar un id distinto a cada división de grupo de citas.
Para posicionar las citas es necesario dar un id a la división que engloba todos los grupos de citas.
No es necesario dar clase a las divisiones de los grupos de citas para distinguirlas de la división que engloba a todos los grupos de citas. Se puede utilizar el selector de descendientes div div para establecer su estilo.
Los párrafos vacíos que separan los grupos de citas se incluyen para que se vea más claro qué citas forman cada grupo. Una vez creadas las divisiones, esos párrafos deben borrarse pues no tienen ninguna utilidad.
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 %.
Los párrafos de las citas tiene posicionamiento flotante. Al modificar el tipo de letra se puede observar que el tamaño de cada párrafo está definido en em.
Para dar formato a la lista (y que funcione correctamente el efecto de :hover en los enlaces <a>, se puede dar tamaño en em a las etiquetas <ul> y <li> y dar las propiedades display: block; y width: 100%; a los enlaces <a>.
El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú en Firefox o 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.
Autor: Bartolomé Sintes Marco