Maquetar el contenido

Profesores:JAB y Ester Torres
Maquetar el contenido
En vez de configurar nuestro body{ añadiéndole con CSS una anchura (width) y un margen horizontal centrado, vamos a dejarlo en blanco y vamos a configurar una caja (div/section/article...) que va a contener todo el contenido que queremos centrar en la página.

<!doctype html>
<html>

  <head>
    <meta charset="utf-8"/>
    <title>Quiénes somos</title>
    <link rel=stylesheet href="css/estilos.css" type="text/css"/>

    <style type="text/css">
    </style>
  </head>

  <body>
     <header>
 	<img src="img/logo.png" align="center">
 	 Aprende jugando, S.L.
     </header>

     <nav>
        <ul>
          <li><img src="img/icono1.png" align="top"><p>
              Quiénes somos</li>
          <li><img src="img/icono2.png" align="top"><p>
              <a href="servicios.html">Servicios</a></li>
          <li><img src="img/icono3.png" align="top"><p>
              <a href="contacto.html">Contacto/a></li>
        </ul>
     </nav>

 <section id="contenido">
     <div>
 	<h2>Quiénes somos</h2>
     </div>

     <article>
 	<div>
 	    <img src="img/imagen1.png">
 	</div>
 	    <h3>Con vocación educativa</h3>
 	Somos una empresa compuesta por <b>maestros, pedagogos,
 	guionistas y especialistas en las nuevas tecnologías</b>
 	aplicadas a la educación para ofrecerle los mejores
 	servicios.
 	<p>
 	Anteponemos la educación a la tecnología.
     </article>

     <article>
 	<div>
 	    <img src="img/imagen2.png">
 	</div>
 	    <h3>Con larga experiencia</h3>
 	Llevamos <b>desde 1998</b> ofreciendo propuestas
 	diferentes y acciones educativas concretas a escenarios
 	diversos.
 	<p>
 	Diseñamos una solución educativa creativa a su problema
 	cotidiano.
     </article>

     <article>
 	<div>
 	    <img src="img/imagen3.png">
 	</div>
 	    <h3>Con entusiasmo y motivación</h3>
 	La <b>motivación</b> y el <b>entusiasmo personal</b>
 	mueve montañas y es lo que nos hace diferentes. El
 	disfrutar por lo que hacemos nos distingue.
 	<p>
 	Pruébenos una vez y se convencerá para siempre.
     </article>
 </section>

     <footer>
 	<h5>
 	  &copy;2015. Aprende jugando, S.L.<br>
 	  c/ del Álamo rojo, 1, local. Barcelona.
 	</h5>
     </footer>
 </body>
</html>

En nuestro ejemplo esta gran caja contenedora es un <section> que tenemos entre el </nav> y el <footer>, por lo que lo único que tenemos que hacer es ponerle como nombre (de id) contenido.


Como puedes ver, el <section...> se abre justo después de cerrar el </nav> (que es justamente donde empieza el contenido propio de la página)...

...y se cierra </section> (casi al final de la página), justo antes de abrir el <footer>, osea cuando acaba el contenido.



Ahora que la caja ya existe, tenemos que maquetar esta gran caja para que tenga una anchura determinada y se centre horizontalmente en la anchura de la página. Para ello añadiremos este selector CSS, en el fichero externo estilos.css.
estilos.css
#contenido{
   width:1000px;
   margin:0 auto;
}



En los temas siguientes que hablan sobre..

..ubicaremos correctamente las cajas que no han sido afectadas <header>, <nav> y <footer>.