Foros del Web - Ver Mensaje Individual

KoswiDigital · #7 (**permalink**) 18/09/2011, 11:05

Ok, veamos. Como te había dicho hay errores de maquetación html/css. Primero te cuento por encima y luego mira tú mismo el código.

Tienes 3 capas (#contCategorias , #central y #otros). Ese es el orden en el que deben ser mostradas. En cambio, en tu html primero vemos la capa #otros, luego #central y por último #contCategorías.

En tu css, la capa #contCategorias no tenía float, y las otras 2 lo tenían a la derecha. Lo ordenado sería flotar las 3 capas a la izquierda.

Entonces, los cambios más significativos:

1) En el html, cambiamos de lugar la capa #otros pasándola a donde está #contCategorias, y ésta al lugar de #otros.

2) En el CSS, flotamos las 3 capas a la izquierda, respetando los márgenes y, en la primera (#contCategorias), dándole un margin-left para que no quede totalmente pegada a la izquierda del div contenedor.

3) Las medidas no están bien repartidas, por lo que en IE la última capa se desplazará a la siguiente línea. Para evitar esto habría que hacer los cálculos pertinentes (eso te lo dejo a ti) o, un apaño chapucero, aumentar el ancho del div contenedor unos 20px más.

Referente a la tabla, no he mirado como está hecha, pero lo dejamos para más tarde si es que aún necesitas ayuda.

Ahora el código que tienes que modificar:

Código HTML:

Ver original<body>
<div id="contenedor">
<div id="logo" align="left">
<table>
<tr>
<td rowspan="2" width="450"><a href="index.php">IMG</a></td>
<td width="250">IMG</td>
<td rowspan="2">
FORMULARIO
</td>
</tr>
<tr>
<td>IMG</td>
</tr>
</table>
</div>
<div id="contCategorias">
<div id="categoriasImg">
<img src="./imgp/categorias.png">
</div>
<div id="categorias">
<form name="frmMenuNavegacion" action="./util/actMenu.php" method="post">
<input type="hidden" name="idIndex" id="idIndex">
<table border="0">
<td>
<a href="#" onClick="ver(<?=$id;?>)">
<img src="./imgCats/<?=$id;?>.jpg" WIDTH="100" height="100" alt="" border="0" >
</a>
</td>
</table>
</form>
</div>
</div>
 
<div id="central">
<div id="navegacionBar">
BARRA DE NAVEGACION
</div>
<div id="navegacionDiv">
<div id="navegacionCarro">
<form name="frmConfirmarPedido" method="post" action="./util/actAddLineaPedido.php" enctype="multipart/form-data">
<table width="100%">
<tr>
<th><?=$nombre?></th>
<th>Cantidad:</th>
<td><input type="text" name="txtCantidadProducto" size="2" class="textBox"/></td>
</tr>
<tr>
<th>Frente</th><td colspan="2" align="left"><input type="file" name="imgFrenteProducto" id="imgFrenteProducto" class="textBox"/></td>
</tr>
<tr>
<th>Reves</th><td colspan="2" align="left"><input type="file" name="imgRevesProducto" id="imgRevesProducto" class="textBox"/> </td>
</tr>
</table>
Datos de env&iacute;o<br>
<table width="100%">
<tr>
<th>Direccion</th>
<td><input type="text" name="txtDireccionConfirmarPedido" value="" class="textBox"/></td>
</tr>
<tr>
<th>Poblacion</th>
<td align="left"><input type="text" name="txtPoblacionConfirmarPedido" value="" class="textBox"/></td>
</tr>
<tr>
<th>Provincia</th>
<td><input type="text" name="txtProvinciaConfirmarPedido" value="" class="textBox"/></td>
</tr>
<tr>
<th>C&oacute;digo postal</th>
<td><input type="text" name="txtCPConfirmarPedido" value="" class="textBox"/></td>
</tr>
</table>
<a href="#" onClick="comprobarFrmPedido()" onMouseOver="imgAnhadir.src='./imgp/anhadir2.gif';" onMouseOut="imgAnhadir.src='./imgp/anhadir.gif'">
<img name="imgAnhadir" src="./imgp/anhadir.gif" border="0">
</a>
</form>
</div>
<?php
}?>
</div>
</div>
<div id="otros">
<form name="frmProductos" action="./util/actProductoActivo.php" method="post">
<div id="otrosImg">
 
</div>
<div id="otrosElemento">
 
</div>
</form>
</div>
 
</div>
</body>
</html>

Y los cambios en el CSS:

Código CSS:

Ver original#contenedor {
width:1022px;
text-align:center;
margin:auto;
overflow:hidden;
background:#BEEBDD;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}
 
#contCategorias {
float: left;
margin-top:10px;
margin-left:8px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:200px;
background:#FFFFFF;
overflow:hidden;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}
 
#central {
float:left;
margin-top:10px;
margin-left:0px;
margin-right:5px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:555px;
background:#FFFFFF;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}
 
#otros {
float:left;
margin-top:10px;
margin-left:12px;
margin-right:8px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:200px;
background:#FFFFFF;
box-shadow: 2px 2px 5px #999;
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#A ABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AA BBCC,direction=125,strength=5);
}

Te recomiendo intentar siempre estructurar lo mejor posible el código y cuanta más semántica, mejor. Lo mismo con el CSS. Un código bien ordenado es más fácil de leer, de modificar y de comprender. Y también será más tenido en cuenta por los robots de los buscadores.

Un saludo.

pd: He quitado el código php para poder visualizarlo correctamente en mi navegador.