Ayuda con colocacion de imagenes con CSS

nico3d · #1 (**permalink**) 26/02/2006, 19:19

Hola. les pido ayuda porque no logro encontrar respuesta al siguiente problema. Actualmente estoy diseñanado los sitios con photoshop y saco el resultado final en imageready con CSS. El problema es que saca todas las imagenes con posiciones absolutas, con un contenedor general sobre la izquierda. Generalmente las webs las hago centradas, por lo que quiero organizar las imagenes de esta forma. Lo que hago es agregar estas lineas en la hoja CSS adjunta:

BODY {
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : auto;
text-align:center;
}

#Tabla_01{
left:0px;
top:0px;
width:600px;
height:390px;
text-align: left;
}

#id0067413B-01_ {
left:0px;
top:0px;
width:301px;
height:167px;
}

#id0067413B-02_ {
left:301px;
top:0px;
width:299px;
height:186px;

Como resultado obtengo las imagenes centradas en la pagina final pero una debajo de la otra, cuando tendrian que estas distribuidas dos arriba y dos abajo para formar una imagen. Esta es una prueba que estoy haciendo dividiendo una imagen en 4 sectores para reagruparlas de la forma en que antes les comente. Espero que alguien me de la punta de como puedo hacer que funcione. GRacias!!!

El codigo de la pagina html es el siguiente:

<link href="css_hielo.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="Tabla_01">
<div id="id0067413B-01_">
<img id="id0067413B_01" src="Images/0067413B_01.jpg" width="301" height="167" alt="" /> </div>
<div id="id0067413B-02_">
<img id="id0067413B_02" src="Images/0067413B_02.jpg" width="299" height="186" alt="" /> </div>
<div id="id0067413B-03_">
<img id="id0067413B_03" src="Images/0067413B_03.jpg" width="301" height="223" alt="" /> </div>
<div id="id0067413B-04_">
<img id="id0067413B_04" src="Images/0067413B_04.jpg" width="299" height="204" alt="" /> </div>
</div>

</body>
</html>

nico3d · #2 (**permalink**) 26/02/2006, 19:32

aca va el codigo de la hoja css. el contendedor con posicion relativa y las imagenes con absoluta.

BODY {
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : auto;
text-align:center;
}

#Tabla_01{
left:0px;
top:0px;
width:600px;
height:390px;
text-align: left;
position:relative;
}

#id0067413B-01_ {
position:absolute;
left:0px;
top:0px;
width:301px;
height:167px;
}

#id0067413B-02_ {
position:absolute;
left:301px;
top:0px;
width:299px;
height:186px;
}