si, je, lo he puesto mal en el momento de ponerlo aqui, bueno eso ya he coregido, pero si tienes razón entre explorer y firefox, pues como que no queda igual , es un poco asco, coñe con tablas era mas facil.
si quereis ver el diseño es este:
http://club.telepolis.com/haven66/boceto.png
lo que llevo de montaje es esto:
Código HTML:
<div id="contenedor">
<div id="lateralizq"></div>
<div id="centro">
<!-- zona cabecera --->
<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>
<!-- fin zona cabecera --->
<!-- zona contenidos --->
<div id="zonacontenidos">
<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 id="contenidoder">
<div id="tituloproducto">
<a href="index.php">Titulo producto</a> </div>
<div id="descipproducto">
<div id="despizq"><img src="img/productos/grandes/casco1.png" width="260" height="162"></div>
<div id="despder"><p><h2>Casco FF EUROPEAN auténtico JSP</h2></p>
<p>Casco de Obra Gama Alta en Polietileno de Alta Densidad.<br />
Resistente a Rayos Ultravioleta (UV) y sustancias químicas.<br />
Arnés Textil de Nylon con 6 puntos de ajuste y 2 alturas.<br />
Cinta regulable por ruleta de precisión para adaptación.<br />
Posibilidad de acoplar gafas de protección y/o barboquejo con mentonera<br />
Aislamiento eléctrico de hasta 440 VAC<br />
Incluye bolsa de transporte.<br />
Incorpora cinta textil de desudoración recambiable.<br />
Casco con zona frontal amplia para serigrafía o pegar logotipo.<br />
</p>
</div>
</div>
</div>
<div id="catalogo">catalogo</div>
<div id="legal">
<ul>
<li><a href="index.php">Mapa web</a></li>
<li><a href="index.php">Legal</a></li>
<li><a href="index.php">Creditos</a></li>
</ul>
</div>
<div id="direccion">direccion
</div>
</div>
</div>
<!-- fin zona contenidos --->
</div>
<div id="lateralder"></div>
</div>
Y el css es este:
Código HTML:
/* ------------------------------------------------------------
Zona inicio
------------------------------------------------------------ */
body {
margin: 0px;
padding:0px;
font-family: verdana;
color:#333333;
text-align:center;
background-repeat:repeat;
background-position:center;
background-image: url(../img/fondounto.png);
}
#contenedor {
width: 820px;
height: 435px;
margin:0 auto 0 auto;
/*ponemos 720/2 y 410/2
position: absolute;*/
}
#lateralizq {
width: 29px;
height: 397px;
background-image: url(../img/lateralizq.png);
float:left;
}
#lateralder {
width: 62px;
height: 397px;
background-image: url(../img/lateralder.png);
float:left;
}
#centro {
width: 729px;
background-color:#FFFFFF;
float:left;
height: 435px;
}
/* ------------------------------------------------------------
Zona cabecera
------------------------------------------------------------ */
#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;
}
#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;
}
/* ------------------------------------------------------------
Catalogo producto
------------------------------------------------------------ */
#contenidoder {
float:right;
width:520px;
height:350px;
background-color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D9D9D9;
}
#tituloproducto {
text-align: left;
width:520px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-transform: uppercase;
color: #000000;
font-style: normal;
font-weight: bold;
background-color: #FFFFFF;
height: 49px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D9D9D9;
}
h1 {
font-size: 10px;
}
/* ------------------------------------------------------------
Descripcion producto
------------------------------------------------------------ */
#despizq {
background-color: #FFFFFF;
width: 288px;
float:left;
height: 150px;
text-align: center;
}
#despder {
background-color: #D9D9D9;
width: 230px;
float:right;
height: 250px;
text-align:left;
font-size:10px;
}
h2 {
font-size: 10px;
}
/* ------------------------------------------------------------
Catelogo
------------------------------------------------------------ */
#catalogo {
background-color: #ccffee;
width: 520px;
}
/* ------------------------------------------------------------
Legal
------------------------------------------------------------ */
#legal {
background-color: #5194E5;
color: #ffffff;
width: 542px;
}
/* ------------------------------------------------------------
Dirección
------------------------------------------------------------ */
#direccion {
width: 542px;
color: #5194E5;
font-size:11px;
background-color: #aaccdd;
}
Y la verdad se ve muy diferente en explorer y en firefox, alguien m epuede ayudar con esto?.
Un saludo
