Superponer div con imgs

verogclp · #1 (**permalink**) 18/11/2009, 08:16

Buenas llevo dos dias buscando una solucion para esto que quiero hacer, he visto muchas personas que buscaban algo parecido y las respuestas les habian funcionado pero a mi no me funciona ninguna. Lo que trato de hacer es poner un TD y dentro de el dos <div> y que se superpongan una sobre otra con una imagen cada una y las imagenes son del mismo alto y ancho.

Actualmente lo tengo asi:

<td rowspan="3" align="center" class=mws_boxcenter_module><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '"><div class="imag">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</div></a><div class="xv"><img src="images/transpa.png" ></div>'; ?></td>

He probado a poner los divs en diferentes posiciones y muchas maneras pero no consigo que encaje una imagen justo sobre la otra.

div.xv {
float:left;
position:relative;
z-index:2;
width:120px;
}
div.imag {
width:120px;
}

Lo maximo que he conseguido es que funcione en firefox pero me falla en IE cambiando la position a absolute pero se sale del <td> y lo imprescindible es que quede dentro y tampoco puedo ubicarlo con px porque es el codigo para añadir 20 imagenes por pagina y no puedo posicionarlas a todas y por eso necesito que funcione con positicion relative, aunque lo cierto es que no conosco mucho de CSS y seguro que algo estoy haciendo mal. A ver si alguien puede echarme una mano con esto. Muchas gracias

kseso? · #2 (**permalink**) 18/11/2009, 08:56

Hola Verogclp.
Debes tener presente que el código que ayuda es el generado (el que el navegador recibe del servidor si usas programación de ese lado).
Tu código limpio de programación:

Código html:

Ver original<td rowspan="3" align="center" class="mws_boxcenter_module">
    <a href="#">
        <div class="imag">
          <img clas="zzz" src="x.jpg" alt="#" />
        </div>
    </a>
    <div class="xv">
      <img src="images/transpa.png" >
    </div>
</td>

Lo primero que tienes que tener presente es que un enlace (elemento de línea) no puede contener dentro un elemento de bloque como es un div.
Tampoco lo necesitas.
Veamos un código más semántico y libre de divitis:

Código html:

Ver original<td rowspan="3" align="center" class="mws_boxcenter_module">
    <a  class="zzz" href="#"><img src="z.jpg" alt="**" /></a>
    <img class="xy" src="transpa.png" alt="#@" />
</td>

Más límpio, ¿verdad?
Sin entrar en detalles de las propiedades de la tabla y de las celdas con clase "mws_boxcenter_module", para superponer una imagen sobre la otra, sólo tienes que sacar del flujo del documento a una de ellas mediante la propiedad "position":

Código css:

Ver originaltd.mws_boxcenter_module {
 overflow: hidden;/*para que no rebasen sus contenidos*/
 position: relative; /*para que sea el punto 00 de la imagen ".xy"*/
}
td.mws_boxcenter_module a.zzz {
  position: absolute;
  left: 50px;
  top: 50px; /*ajustar a tu gusto según tus necesidades*/
 }
td.mws_boxcenter_module img.xy {
  position: relative;
  }

Faltará código css relativo a la tabla, pero no sabemos nada de ella. También puedes definir el tamaño con el que se mostrarán las imágenes vía css y otras cosas más, pero eso es otra historia.

verogclp · #3 (**permalink**) 18/11/2009, 09:04

Gracias por tu respuesta te doy mas datos sobre el css pero solo dan formato a texto

Código:

.mws_boxcenter_module {
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
 }

Y la position absolute no me funciona con el IE por eso necesito usar la relative, aunque la pregunta seria: se puede posicionar un div sobre otro usando la position relative??

kseso? · #4 (**permalink**) 18/11/2009, 09:20

Cita:

Y la position absolute no me funciona con el IE

¿Estás seguro?i fíjate que ni pregunto si hablas de ie6 o ie7

Prueba lo siguiente:

Código hrml:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position: relative;}
* html, * body { height: 100%; overflow:auto;}
html, body {
background-color: #cdcdcd;
}
#container {
margin:10px auto;
width:480px;
}
#container img.principal {
left:0;
position:relative;
top:0;
}
.play {
position:absolute;
left:50%;
top:50%;
margin-left: -22px;
margin-top: -22px;
}
</style>
</head>
<body> 
<div id="container">
<img class="principal" src="http://share.skype.com/sites/es/skype/skype32ready.jpg" alt="una imagen" />
<a  class="play" href="#"><img src="http://www.aulaclic.es/articulos/graficos/play.gif" alt="#" /></a>
</div>
</body>
</html>

P.D.: corrijo el código del #2. La clase tiene que ir en el enlace, no la imagen del enlace.

verogclp · #5 (**permalink**) 18/11/2009, 09:33

Poniendo uno position relative y el otro position absolute he conseguido que se superpongan aunque no va bien para el IE6 si para el 7 y con eso por ahora me vale. Muchas gracias Kseso?