Unidad 7. Ejercicio paso a paso: Simular páginas

Objetivo

Partiendo del diseño creado en el ejercicio anterior, vamos a hacer que sólo se muestre el contenido del apartado seleccionado, y podamos pasar de uno a otro con el menú, simulando páginas.

Ejercicio

1. Abre el archivo creado en el ejercicio anterior.
2. Dentro del div texto, encierra cada apartado (h3 y sus párrafos) en un nuevo div, quitando el atributo id del h3 y dándoselo al div.
3. Vamos a definir el estilo para los nuevos divs, los que están dentro del div texto (div#texto div). Deben de ocupar todo el alto del div texto (height: 100%;) y todo el ancho (width: 100%;). Cuando no quepa en el div contenedor, que muestre las barras de desplazamiento (overflow: auto;).
   Por tanto, añade el estilo div#texto div {height: 100%; width: 100%; overflow: auto;}.
4. Para que funcione, debemos de ocultar el resto de divs, ocultando el desbordamiento del div texto.
   Para el selector div#texto, cambia el valor de la propiedad overflow: auto; a overflow: hidden;.
   
   Si lo pruebas, ya funcionará, pero no en Internet Explorer. Esto se debe a que no interpreta correctamente la propiedad height cuando el alto del elemento contenedor está definido como top y bottom y no con height. Vamos a corregirlo, utilizando height.
5. En el selector div#pie, cambia la propiedad height: 40px; por height: 10%;.
6. En el selector div#menu, cambia la propiedad bottom: 40px; por height: 90%;.
7. En el selector div#texto, cambia la propiedad bottom: 40px; por height: 90%;.
8. Guárdalo y pruébalo.

Puedes encontrar este ejercicio resuelto en el archivo ej_maquetacion_absoluto_resuelto2.htm.