Ayuda ejercicios unidad 7: Maquetación web

Solución al ejercicio

Abre el archivo estilo.css del sitio parquenatural y realiza los siguientes cambios:

La página tendrá un ancho fijo de 900px.

Al selector body, le damos un ancho fijo, y para que quede centrada, margenes auto a los lados. Añade el siguiente código:

body {
  font-family:  'Lucida Sans Unicode', sans-serif;
  font-size: 14px;
  background-color: #FFFFFF;
  border: #d3d3d3 1px solid;
  text-align: justify;
  margin: 10px auto;
  width: 900px;
}

Ahora, para que el menú quede a la izquierda lo hecemos flotante. Además, para que no quede encima del contenido, dejamos un margen a la izquierda. Añade el siguiente código:

div.contenido {
  border: #d3d3d3 1px solid;
  margin: 20px 20px 10px 140px;
  padding: 10px 15px;
}
#menu {   
  float: left;
  width: 100px; 
}

Como selector para la lista hemos utilizado el id menu. Hemos de asignarle ese id al elemento. Añade el siguiente código:

...
  <body>
    <h1>Parque Natural <span>Sierra Bicuerca</span></h1>
    <ul id="menu">
     <li><a href="index.html">Inicio</a></li>
     <li><a href="especies.html">Especies</a></li>
     <li><a href="#">Reservas</a></li>
     <li><a href="#">Galer&iacute;a</a></li>
   </ul>
   <div class="contenido"> 
...

Guarda todos los cambios.

Cursos Informática Gratuitos

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