Colocar la franja gris superior
Profesor: Javier López
Volver
Propuesta de la actividad
Colocación de una franja gris debajo del <header>
Resultado final

Colocación de una franja gris debajo del <header>
En nuestro ejemplo podemos ver como el logo y el nombre de la empresa (en el <header>) están encima de una franja horizontal gris que cruza todo el ancho del navegador.

En este caso vamos a hacer dos cosas:

  1. Ubicar el contenido del <header> algo más centrado.
  2. Colocar una franja gris debajo de donde se encuentra el <header>, pero sin formar parte del <header>.
estilos.css
header{
   width:1000px;
   margin:0 auto;
   position:relative;
   font-family:alegreya-light;
   font-size:24px;
   color:white;
}
Este selector fue creado en el tema 12: Tipografías y ahora vamos a añadirle tres líneas de código CSS:

Con width:1000px; definimos la anchura total del <header>.
Con margin:0 auto; centramos horizontalmente los 1000 píxeles en la anchura de la ventana del navegador.
Con position:relative; conseguiremos que, después de colocar la franja gris debajo, el <header> esté por encima de la misma (y no por debajo como sería lo normal).


Para colocar la franja gris tenemos que crear otro <div> vacio, que colocaremos al principio y que posteriormente con CSS le daremos las propiedades de aspecto y de posicionamiento absoluto.

estilos.css
#franja{
   width:100%;
   position:absolute;
   top:0;
   left:0;
   height:60px;
   background-color:#313B44;
   border-bottom: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 top:0; y left:0; ubicamos de manera precisa la franja gris en la esquina superior izquierda de la ventana del navegador.
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-bottom:6px black solid; coloca un borde inferior 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>
 	      <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>

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

Lo único que nos falta hacer es crear este div inicial, llamado id="franja", que está vacío y que está ubicado justamente antes del contenido del <header>.




En el próximo tema vamos a colocar la franja gris inferior que se encuentra bajo el <footer>.

Aunque se podría pensar que se sigue el mismo proceso que acabamos de seguir con la franja inicial, lo cierto es que es necesario algo más de código por el mero hecho de estar al final, y no al principio.


En la siguiente actividad de este tema: