Foros del Web » Creando para Internet » CSS »

Superponer div con imgs

Estas en el tema de Superponer div con imgs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/11/2009, 08:16
 
Fecha de Ingreso: julio-2008
Mensajes: 5
Antigüedad: 16 años, 3 meses
Puntos: 0
Superponer div con imgs

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

Última edición por verogclp; 18/11/2009 a las 08:25
  #2 (permalink)  
Antiguo 18/11/2009, 08:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Superponer div con imgs

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
  1. <td rowspan="3" align="center" class="mws_boxcenter_module">
  2.     <a href="#">
  3.         <div class="imag">
  4.           <img clas="zzz" src="x.jpg" alt="#" />
  5.         </div>
  6.     </a>
  7.     <div class="xv">
  8.       <img src="images/transpa.png" >
  9.     </div>
  10. </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
  1. <td rowspan="3" align="center" class="mws_boxcenter_module">
  2.     <a  class="zzz" href="#"><img src="z.jpg" alt="**" /></a>
  3.     <img class="xy" src="transpa.png" alt="#@" />
  4. </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 original
  1. td.mws_boxcenter_module {
  2.  overflow: hidden;/*para que no rebasen sus contenidos*/
  3.  position: relative; /*para que sea el punto 00 de la imagen ".xy"*/
  4. }
  5. td.mws_boxcenter_module a.zzz {
  6.   position: absolute;
  7.   left: 50px;
  8.   top: 50px; /*ajustar a tu gusto según tus necesidades*/
  9.  }
  10. td.mws_boxcenter_module img.xy {
  11.   position: relative;
  12.   }
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 18/11/2009 a las 09:21
  #3 (permalink)  
Antiguo 18/11/2009, 09:04
 
Fecha de Ingreso: julio-2008
Mensajes: 5
Antigüedad: 16 años, 3 meses
Puntos: 0
Respuesta: Superponer div con imgs

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??
  #4 (permalink)  
Antiguo 18/11/2009, 09:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Superponer div con imgs

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>kseso? jugando con css</title>
  5. <style type="text/css">
  6. * {margin: 0; padding: 0; border: 0; position: relative;}
  7. * html, * body { height: 100%; overflow:auto;}
  8. html, body {
  9. background-color: #cdcdcd;
  10. }
  11. #container {
  12. margin:10px auto;
  13. width:480px;
  14. }
  15. #container img.principal {
  16. left:0;
  17. position:relative;
  18. top:0;
  19. }
  20. .play {
  21. position:absolute;
  22. left:50%;
  23. top:50%;
  24. margin-left: -22px;
  25. margin-top: -22px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="container">
  31. <img class="principal" src="http://share.skype.com/sites/es/skype/skype32ready.jpg" alt="una imagen" />
  32. <a  class="play" href="#"><img src="http://www.aulaclic.es/articulos/graficos/play.gif" alt="#" /></a>
  33. </div>
  34. </body>
  35. </html>

P.D.: corrijo el código del #2. La clase tiene que ir en el enlace, no la imagen del enlace.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 18/11/2009, 09:33
 
Fecha de Ingreso: julio-2008
Mensajes: 5
Antigüedad: 16 años, 3 meses
Puntos: 0
Respuesta: Superponer div con imgs

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?

Última edición por verogclp; 18/11/2009 a las 10:40
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:15.