Unidad 8. Ejercicio paso a paso: El menú del ejemplo

Objetivo

Vamos a definir los estilos para el menú de nuestra página de ejemplo. La idea es que el menú simule pestañas, que estén en contacto con el div que contiene el texto. Y que aparezca en la misma línea que el título, pero desplazado a la derecha.

Los elementos del menú, que serán de 90x40 px, cambiarán de estilo al pasar el cursor sobre él. También habrá un estilo distinto para el elemento que lleve a la página actual, pero éste no cambiara al pasar el cursor sobre él.

Vamos a explicar los pasos a seguir, utilizando KompoZer.

Ejercicio

1. En KompoZer, pulsa el botón CaScadeS de la parte superior para acceder al editor CSS.
2. Pulsa en el icono de la paleta (arriba a la izquierda) para definir una nueva regla.
3. Escribe #menu como selector y pulsa Crear regla de estilo.
4. Al selector #menu, quítale el margen exterior (margin: 0;) e interior (padding: 0;), las viñetas de la lista (list-style-type: none;) y aumenta un poco el tamaño de la letra (font-size: 105%;). Para que se desplace a la derecha del todo, lo pondremos flotante hacia allí (float: right;).
5. Pulsa Aceptar para cerrar la ventana.
6. Haz clic en uno de los elementos del menú. En la barra de estado, haz clic derecho sobre ul, y selecciona ID → menu.
7. Define una nueva regla de estilo para los elementos, con el selector #menu li.
8. Al selector #menu li, dale un flotante a la izquierda (float: left;) para que se muestren en la misma línea, y para que no queden pegados, un pequeño margen a izquierda y derecha (margin: 0 2px;). Dales también un ancho fijo de 90px (width: 90px) y una alto fijo de 40px (height: 40px;). Para que queden centrados, céntralos verticalmente dándole un alto de línea igual que el alto del elemento (line-height: 40px;) y céntralos en horizontal (text-align: center;). También hay que darles un color de relleno de nuestra paleta (background-color: #AA876F;) y un borde, excepto abajo (border-style: solid; border-color: #f0d7b5; border-width: 3px 2px 0 2px;).
9. Para cambiar el color del texto, declaramos el selector #menu a, ya que todo son enlaces, le damos el mismo color que el fondo del div.contenido (color: #f5e4cc;), y le quitamos el subrayado (text-decoration: none;).
10. Al pasar el ratón vamos a cambiar el color del texto y del borde, utilizando la pseudoclase :hover. Declara los estilos #menu li:hover {border-color: #FF7600;} y #menu li:hover a {color: #FF7600;}.
11. Vamos a crear una clase para la pestaña activa, a la que llamaremos activa. Declara el selector #menu li.activa. Vamos a quitar el borde de la pestaña, pero para no alterar el tamaño, le damos el color que pondremos al fondo y cambia el color de borde por el de fondo (border-color: #f5e4cc;) y el color del fondo por el mismo que el div.contenido (background-color: #f5e4cc;).
12. Cambia el color del texto de la pestaña activa, declarando el estilo #menu li.activa a {color: #5F4232}.
13. Asígnale la clase activa al elemento que lleve a la página en la que estás trabajando.
14. Para que el menú quede en la misma línea que el título, podemos poner el título también flotante, pero a la izquierda. Edita el selector del título (h1), añádele posicionamiento flotante a la izquierda (float: left;).
15. Si ahora lo pruebas, verás que todo se amontona con el div del texto (div.contenido). Para evitarlo, editamos el selector div.contenido, y le añadimos la propiedad clear: both; para romper el flotante.
16. Si ahora pruebas la página en Firefox verás que el menú ya queda pegado al div que tiene el texto. En cambio en IE7 no. Esto se debe a que interpretan de distinta forma el margen del h1 y del div.contenido y la propiedad clear. Para solucionarlo, edita el estilo del h1, y quítale todos los márgenes, dejando a solo 40px a la izquierda (margin: 0 0 0 40px;). Edita también el selector div.contenido, y quítale el margen superior (margin: 0 20px 20px;).
17. Para que no quede tan pegada a la derecha la lista del menú, dale un margen derecho de 40px (margin: 0 40px 0 0;), editando el selector #menu.
18. Una vez acabado, a cada una de las páginas creadas, asígnale el id="menu" a la lista del menu y la class="activa" al elemento que enlaza con esa página.