Position

Colocación de una franja gris debajo del <footer>

La diferencia básica entre ambas franjas grises es que mientras en la primera sabemos con total exactitud la coordenada donde se encuentra (left:0/top:0), en el segundo caso desconocemos su posición vertical exacta. Por ello en este caso vamos a hacer dos cosas:

Realizar casi el mismo proceso que hemos seguido con la franja inicial.
Definir la altura del <section> que contiene a los 3 <article>.

estilos.css

footer{
   width:1000px;
   margin:0 auto;
   position:relative;
   padding-top:12px;
   color:white;
   font-family:alegreya-light;
   font-size:24px;
}

Este selector fue creado en el tema 12: Tipografías y ampliado en el tema 13: Recolocar el <footer>, ahora vamos a añadirle dos líneas de código CSS y eliminar una:

Eliminamos clear:both; que había en la versión anterior.
Añadimos width:1000px; para que el <footer> no ocupe todo el ancho de la ventana, sino sólo 1000 píxeles.
Mientras que con margin:0 auto; se centra horizontalmente en la ventana del navegador.
También añadimos position:relativa; para que el contenido del <footer> se coloque delante de la (futura) franja gris final.
y padding-top:12px; para que deje un espacio de 12 píxeles vacio en la partes superior del <footer>.

Para colocar la franja gris final creamos otro <div> vacio, que colocaremos al principio del <footer>, y al que llamaremos id=franja_final.

estilos.css

#franja_final{
   width:100%;
   position:absolute;
   left:0;
   background-color:#313B44;
   height:60px;
   border-top:6px black solid;
}

Este selector es de nueva creación:

width:100%; especifica que la franja ocupe todo el ancho de la ventana del navegador.
position:absolute; permite ubicar este <div> en una posición concreta, al mismo tiempo que permite superponer diferentes divs en la misma coordenada.
Con left:0; ubicamos horizontalmente la franja gris en la esquina izquierda de la ventana del navegador (en este caso no especificamos la posición vertical top).
Con background-color:#313B44; especificamos el color gris (#313B44) de fondo.
height:60px; es imprescindible indicar la altura de la franja, ya que este <div> al no tener ningún contenido no se mostraría.
border-top:6px black solid; coloca un borde superior negro con un grosor de 6 píxeles.

<!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>
     <div id="franja"></div>
     <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 id="titulo">
 	      <h2>Quiénes somos</h2>
 	 </div>

 	 <article id="cuadro1" class="cuadros">
 	   <div id="imagen1">
 	      <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 id="cuadro2" class="cuadros">
 	    <div id="imagen2">
 	      <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 id="cuadro3" class="cuadros">
 	    <div id="imagen3">
 	      <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>

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

Como habrás supuesto, nos falta crear este div inicial, llamado id="franja_final", que está vacío y que está ubicado justamente antes del contenido del <footer>

(El código incluido está al final del código).
Haz clic aquí para desplazarte al punto en concreto.

Si has visto el resultado, habrás oído un Houston, tenemos un problema, ya que el <footer> ha subido a la estrosfera y hay que bajarlo a tierra, además de que el contenido está desaparecido en combate.

Esto ocurre ya que nuestro <section> no tiene volumen (ya que no tiene ningún contenido directo), por lo tanto para el navegador no existe.

Para solucionarlo tenemos que decirle al <section> que sí tiene contenido y que se adapte a él.

Para ello añadiremos dos líneas de código CSS en el selector section que creamos en el tema 9: Tipografías:

estilos.css

section{
   display:inline-block;
   margin-bottom:45px
   font-family:inder;
   font-size:12px;
}

Con display:inline-block; conseguimos que el <section> se adapte a su contenido.

Por su parte, margin-bottom:45px; lo único que hace es separar este <section> del <footer>.

En la siguienta actividad de este mismo tema añadiremos la imagen de una chincheta en unas coordenadas exactas (position:absolute) de nuestro <section>: