Volver al índiceComentarios al ejercicio Revistas de informática

Etiquetas utilizadas

Al quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1>, <h2>, <ul>, <li> y <p>.

Al poner el estilo se puede observar que la información sobre cada revista forma una ficha, por tanto hay divisiones agrupando cada revista. También se puede observar que todas las revistas 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 las revistas.

La lista se muestra en una posición determinada. Para ello se puede crear una división conteniendo la lista.

Clases utilizadas

Hay dos tipos de <h1>, a los que se pueden dar dos id distintos.

Para posicionar la lista es necesario dar un id a la división que contiene la lista.

Las divisiones de las revistas son destinos de los enlaces situados en la lista, así que hay que dar un id distinto a cada división de revistas.

Para posicionar las revistas es necesario dar un id a la división que engloba todas las divisiones de revistas.

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

Otros

Los <h1> tienen posicionamiento absoluto. Si se indica la posición pero no la altura(con top y left o top y right), el tamaño viene determinado por el contenido, por lo que el color de fondo se puede dar al <h1>, sin tener que añadir un <span>.

Para conseguir el efecto de sombra de la lista, se puede dar posicionamiento relativo y color de fondo blanco al enlace <a> y color de fonde gris al <li>. Pero para ello hay que dar display: block al enlace <a>, para que el enlace se trate como un bloque en vez de un elemento en línea.

La división que engloba todas las revistas 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 %.

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.

Última modificación de esta página: 20 de enero de 2009

Licencia de Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).