Unidad 7. Ejercicio paso a paso: Maquetar con posicionamiento flotante (I)
Objetivo
A partir del archivo ej_maquetacion_flotante.htm, que puedes encontrar en la carpeta de ejercicios del curso, se nos pide que enmaquetemos la página con distintos diseños.
Ejercicio 1
El primer diseño que debemos de hacer, será:
- Habrá un encabezado, que contendrá el título de la página y el menú, con todos los elementos de la lista en la misma línea.
- El cuerpo de la página se dividirá en dos columnas. Una con el texto, y otra con la publicidad.
- El último párrafo formará un pie.
- El ancho total, ocupará toda la ventana del navegador.
- Abre el archivo con un editor web, en al vista de código fuente.
- Vamos a comenzar por crear las capas que separan los distintos elementos de la página.
Crea un div, con el id encabezado, que contenga los elementos del encabezado: el título <h1></h1> y la lista de enlaces <ul></ul>.
- Crea otro div, con el id texto, que contenga todo el texto de la página, sin incluir la imagen ni el último párrafo.
- Crea otro div, con el id publicidad que contenga la publicidad de aulaClic (
<a><img /></a>).
- Crea otro div, con el id pie, que contenga el último párrafo.
- La estructura de la página habrá quedado:
<body>
<div id="encabezado">
<h1>...</h1>
<ul>..<ul>
</div>
<div id="texto">
<h2>...</h2>
<h3>...</h3>
<p>...</p>.
...
</div>
<div id="publicidad">
<a><img /></a>
</div>
<div id="pie">
<p>...</p>
</div>
</body>
Ahora, vamos a definir los estilos para conseguir el diseño que queremos. Como siempre, le daremos a la capas un color de fondo sólo para que se vean mejor.
- El div#encabezado. Realmente a este solo habría que cambiarle el color de fondo, porque el ancho por defecto de un div es del 100%. Pero como para evitar que se pueda ver mal en IE7, en vez del 100% como total, utilizaremos el 99.5% (
width:99.5%), así que lo ajustaremos a ese ancho para que todas las capas queden alineadas.
En el head de la página, en la etiqueta <style>, añade el estilo div#encabezado {
width:99.5%;
background-color:#CCCCFF;
}.
- ¿Cómo hacemos que los elementos de la lista queden en la misma línea? Lo podemos hacer igual que lo haríamos con cajas, dándole a todos los elementos (
li) flotamiento a la izquierda (float: left). Y para que no queden muy pegados, le daremos también margen a la izquierda (margin-left: 20px).
Añade el estilo li {
float: left;
margin-left:20px;
}.
- Guarda la página y pruébala en el navegador.
- Aunque en este caso IE7 sí lo tiene en cuenta, no normal es el alto de los elementos de la lista no se tengan en cuenta para el alto del div#encabezado, y salgan fuera, como ocurre en otros navegadores. Para que se vea en todos igual vamos a solucionarlo añadiendo un elemento, por ejemplo un párrafo en blanco (
<p></p>) que no se muestra en el navegador, que debe de romper el flotamiento (clear: both;).
Añade, dentro del div#encabezado, pero después de la lista (</ul>) un párrafo en blanco (<p></p>).
Añade el estilo div#encabezado p {clear: both;}.
- Ahora vamos con las columnas. La duda viene al decidir su ancho, ya que lo ideal sería tener una de 100px (el ancho de la publicidad) y otra con el resto, pero tenemos que expresarlo en %, y no es equivalente. Lo que hemos hecho es imaginar la ventana más pequeña para la que queremos que se vea la publicidad completa, por ejemplo 500px. Por lo tanto, necesitaremos un 20% de la ventana para la publicidad. Las dos columnas tendrán flotamiento a la izquierda (
float: left;). La publicidad la centraremos en su columna (text-align: center;).
Añade el estilo div#texto {
float:left;
width:80%;
background-color: LightYellow;
}.
- Añade el estilo
div#publicidad {
float:left;
width:19.5%;
text-align: center; background-color: #BFD6FF;
}.
- El div pie funciona como el encabezado, excepto porque hemos de romper el flotamiento de las columnas.
Añade el estilo div#pie {
clear:both;
background-color: #E9CCFF;
width:99.5%;
}.
En la carpeta de ejercicios puedes encontrar este ejercicio resuelto en el archivo ej_maquetacion_flotante_resuelto1.htm.
En la siguiente página tienes más ejercicios.
Cursos Informática Gratuitos
