dentro de la capa zona contenidos, tendremos otras 2 capas a la izquierda el segundo menú y a la derecha donde iran los productos.
Código HTML:
<div id="zonacontenidos_izq">
<div id="menuizq">
<div id="separacioniz"></div>
<div id="navizq">
<ul>
<li><a href="index.php">Protección Cabeza</a></li>
<li><a href="index.php">Protección Tronco</a></li>
<li><a href="index.php">Protección Extremidades</a></li>
<li><a href="index.php">Protección Auxiliar</a></li>
<li><a href="index.php">Protección Entorno</a></li>
</ul>
</div>
</div>
<div id="separacioniz"></div>
<div id="buscador">buscador</div>
</div>
<div id="zonacontenidos_der"></div>
y el css
Código HTML:
#zonacontenidos_izq {
height: 435px;
width: 185px;
float:left;
}
#zonacontenidos_der {
float:right;
width: 542px;
background-color: #FFFF00;
text-align:center;
background-position:center;
}
/* ------------------------------------------------------------
Menu izquierda
------------------------------------------------------------ */
#separacioniz {
height:25px;
width: 185px;
}
#menuizq {
background-color: #fafafa;
text-align: left;
}
#navizq {
color: #fafafa;
font-size: 10px;
}
#navizq ul {
margin: 0 auto;
list-style: none;
padding: 0px;
}
#navizq li {
text-indent: 15px;
line-height: 2.55;
border-bottom: 1px solid #cbc9c6;
font-size: 10px;
}