Ahora dentro de la capa centro añadimos 2 capas más, una arriba, en donde pondremos 3 capas más y la otra debajo suyo.
Código HTML:
<div id="cabecera">
<div id="cabecera_foto"></div>
<div id="nav">
<div id="navInner">
<ul>
<li><a href="index.php">La empresa</a></li>
<li><a href="index.php">Servicios</a></li>
<li><a href="index.php">Productos</a></li>
<li><a href="index.php">Documentación</a></li>
<li><a href="index.php">Contacto</a></li>
</ul>
</div>
</div>
<div id="zonagris"></Div>
</div>
<div id="zonacontenidos"></div>
y el codigo css
Código HTML:
cabecera {
width: 729px;
height: 190px;
}
#cabecera_foto {
width: 729px;
height: 166px;
background-image: url(../img/cabecera.png);
}
/* ------------------------------------------------------------
Menu Cabecera
------------------------------------------------------------ */
a:link, a:visited {color: #125DA1; text-decoration: none;}
a:hover {color: #002F5E;}
#nav {
width: 100%;
overflow: hidden;
height: 14px;
/*_height: 1%;*/
margin: 0 auto;
background: #FFF;
}
#nav a {
color: #015484;
font-family: "Trebuchet MS", serif;
font-size: 82%;
}
#nav a:hover {
color: #015484;
text-decoration: underline;
}
#navInner {
text-align: center;
color: #847740;
font-size: 82%;
margin: 0 auto;
}
#navInner ul {
list-style: none;
margin: 0 auto;
text-align: center;
padding: 0px;
}
#navInner li {
display: inline;
margin: 10px 0 10px 8px;
padding-right: 10px;
}
#navInner .noBorder {
display: inline;
margin: 10px 0 10px 8px;
padding-right: 0;
border-right: none;
}
#zonagris {
background-color: #d9d9d9;
padding: 5px;
}
/* ------------------------------------------------------------
Zona contenidos
------------------------------------------------------------ */
#zonacontenidos {
height: 435px;
width: 729px;
}
Aqui ya tenemos la zona de arriba de banner mas uno de los menús y la zona donde iran los contenidos.