Unidad 7. Ejercicio paso a paso: Maquetar con posicionamiento absoluto (I)

Objetivo:

A partir del archivo ej_maquetacion_absoluto.htm, que puedes encontrar en la carpeta de ejercicios del curso, se nos pide que maquetemos la página para que tenga el siguiente aspecto:

Habrá un encabezado, con el título (h1), que ocupará todo el ancho de la página, comenzando arriba del todo, y con un alto de 50px.
El resto de la página, estará limitado a un ancho fijo de 900px.
En esos 900px, reservaremos una columna a la izquierda en la que irá la lista con los enlaces.
El resto se mostrará en una columna a la derecha.
Al final de la página habrá un pie, con un alto de 40px y ancho que ocupe los 900px.
Habrá una única barra de desplazamiento, que nos permita recorrer el texto. El encabezado, menú y pie siempre aparecerá visible.

Para que se vea mejor la estructura de las capas, le daremos a cada una un color de fondo distinto.

Ejercicio

Para este ejercicio, te recomendamos que edites directamente el código fuente de la página, ya que el texto ya está escrito.

Primero, vamos a identificar los distintos elementos, y crear las cajas que los contengan. A todas las cajas le daremos un id distintivo.

El título estará en una caja formando la cabecera. Por lo tanto, encierra la etiqueta <h1></h1> en una caja, y asígnale el id cabecera (<div id="cabecera">).
Como todo lo demás va a ir en una columna con ancho fijo, lo más cómodo es crear una caja que contenga al resto de elementos, a la que le daremos el ancho que queramos.
Crea otra caja, que comience donde acababa la anterior, y vaya hasta el final del body. Asígnale el id pagina.
Vamos a subdividir el div pagina en las distintas columnas:
Como la lista formará otra columna, crea otra caja que la contenga. Asígnale el id menú.
El texto va a aparecer en otra columna central. Así que crea otra caja que contenga a todo el texto, desde el <h2> hasta el cierre del penúltimo párrafo (el último es para el pie). Asígnale el id texto.
Encierra el último párrafo en otra caja, y asígnale el id pie.

La estructura general de la página te habrá quedado:

<body>
<div id="cabecera">
	<h1>...</h1>
</div> → cierre de "cabecera"
<div id="pagina">
 <div id="menu">
  <ul>...</ul>
 </div> → cierre de "menu"
 <div id="texto">
  <h2>...</h2>
  <h3>...</h3>
  ...
  <p>...</p>
 </div> → cierre de "texto"
 <div id="pie">
  <p>...</p>
 </div>  → cierre de "pie"
</div> → cierre de "pagina"
</body>

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies