Unidad 7. Ejercicio paso a paso: Organizar elementos flotantes

Objetivo

A partir del archivo citas_celebres.htm que encontrarás en la carpeta de ejercicios, vamos a reorganizar los elementos para que se muestren:

• El título se mostrará a la izquierda del todo, con las letras una debajo de la otra.
• Las citas, se mostrarán como cuadrados fijos de alto y ancho de 150px. Cuanto mayor sea la ventana, más citas se verán por línea.
• El último párrafo no compartirá el formato de las citas.
• Los elementos tendrán un borde y un color de fondo, distinto para los tres tipos diferenciados.

Ejercicio

1. Abre el archivo citas_celebres.htm con un editor web, en vista código.
2. Dentro del head, añade la etiqueta para colocar el estilo CSS: <style type="text/css"></style>.
3. Vamos a utilizar una fuente sin serifa. Añade el estilo body { font-family:Arial, sans-serif;}.
4. Comenzaremos por las citas. Podemos utilizar como selector el párrafo (p). Para que puedan aparecer varios en la misma línea, deben de ser flotantes (float: left;) con el ancho (width: 150px;) y el alto (height: 150px;) indicados. Como el tamaño es fijo, nos aseguraremos de que si el texto no cabe aparezcan las barras de desplazamiento (overflow: auto;). Además debe de tener un borde. Para que los párrafos no queden pegados unos de otros, dejaremos un margen (margin: 10px;), y para que el texto no quede muy pegado al borde, dejaremos un pequeño padding (padding: 3px;).
   Añade el estilo p {float: left; width: 150px; height: 150px; overflow: auto; border: #3366FF 3px solid; margin: 10px; padding: 3px; background-color: #C8DEF9;}.
5. Ahora vamos a poner el título en vertical. Existen varias formas de hacerlo, pero si puede ser, por mejorar el posicionamiento en los navegadores, hay que intentar que el texto no varíe, es decir, que si quitamos el estilo, se siga leyendo, sin espacios entre las letras o saltos de línea. Para hacerlo, vamos a hacer flotante cada letra (float: left;) utilizando <span>.
   Encierra cada letra en un span, de modo que el título quede
   <h1><span>C</span><span>i</span><span>t</span><span>a</span><span>s</span><span>&nbsp;</span><span>C</span><span>&eacute;</span><span>l</span><span>e</span><span>b</span><span>r</span><span>e</span><span>s</span></h1>
6. A los span de dentro del título (h1 span), le damos flotamiento (float: left;). Como las letras tienen distinto ancho, vamos a igualarlas todas para que no queden varias en una línea (width: 1em;), y de paso las centramos (text-align: center;).
   Añade el estilo h1 span {float: left; width:1em; text-align: center;}.
7. Si lo pruebas, verás que no ha cambiado mucho, porque las letras caben en una línea. Lo que tenemos que hacer es que el título (h1) tenga el mismo ancho que el span (width: 1em;), y que quede flotante como los párrafos (float: left;). Regulamos la altura de la línea (line-height: 0.9em;) para controlar la separación de las letras. Y para mejorar el diseño, le añadimos el mismo margen que a los párrafos, un margen interior y colores de borde y relleno.
   Añade el estilo h1 { width: 1em; float: left; margin: 10px; padding: 10px 3px; line-height: 0.9em; border: #FF9933 3px solid; background-color: #FFD3A8;}.
8. Como tenemos una línea horizontal (<hr />), la aprovechamos para romper el flotamiento (clear: both;).
   Añade el estilo hr {clear: both}.
9. El párrafo final es distinto, así que creamos una clase para definirlo (p.pie), le quitamos el flotamiento (float; none;), el ancho (width: auto;) y alto (height: auto;) fijos, y le cambiamos los colores.
   Añade el estilo p.pie {float: none; height:auto; width: auto; border-color: #26CF4D; background-color: #A4EFC3;}.
10. Al último párrafo, asígnale la clase pie. Cambia <p> por <p class="pie">.

Si tienes alguna duda, puedes encontrar el archivo citas_celebres_resuelto.htm, en la carpeta de ejercicios con este ejercicio resuelto.

 Cursos Informática Gratuitos