Foros del Web » Creando para Internet » CSS »

Capas: Mostrar imagen encima de otras imágenes

Estas en el tema de Capas: Mostrar imagen encima de otras imágenes en el foro de CSS en Foros del Web. Hola: en uno de los módulos de virtuemart (joomla) muestro productos de la tienda. PEro necesito mostrar una imagen (icono de "nuevo, "oferta", "hot", ...) ...
  #1 (permalink)  
Antiguo 08/08/2011, 12:24
Avatar de freegirl
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: Catalonia
Mensajes: 4.334
Antigüedad: 20 años, 6 meses
Puntos: 156
Pregunta Capas: Mostrar imagen encima de otras imágenes

Hola:

en uno de los módulos de virtuemart (joomla) muestro productos de la tienda. PEro necesito mostrar una imagen (icono de "nuevo, "oferta", "hot", ...) encima de otras imágenes (imágenes de productos) .

Sé que esto se puede hacer con capas, pero la verdad que no lo he conseguido sin que quede un churro.

¿alguna idea?

El código actual del módulo es este:

Código PHP:
<div class="fprod_con clearfix">
     <?php
            
if ( $featured["product_thumb"] ) { ?>
     <a class="fimage" title="<?php echo $featured["product_name"?>" href="<?php $sess->purl(URL."index.php?option=com_virtuemart&amp;page=shop.product_details&amp;flypage=".$featured["flypage"]."&amp;product_id=".$featured["product_id"]) ?>">
     <?php echo ps_product::image_tag$featured["product_thumb"], "class=\"browseProductImage\" border=\"0\" alt=\"".$featured["product_name"]."\"");
                
?></a>
     <?php
            
}?>
     <a title="<?php echo $featured["product_name"?>" href="<?php $sess->purl(URL."index.php?option=com_virtuemart&amp;page=shop.product_details&amp;flypage=".$featured["flypage"]."&amp;product_id=".$featured["product_id"]) ?>">
     <h4><?php echo $featured["product_name"?></h4>
     </a>
     <?php echo $featured['product_price'?>
     <?php echo $featured['product_s_desc'?>
     <p><?php echo $featured['form_addtocart'?> </p>
</div>
__________________
Saludos
  #2 (permalink)  
Antiguo 09/08/2011, 00:50
 
Fecha de Ingreso: abril-2010
Mensajes: 122
Antigüedad: 14 años
Puntos: 18
Respuesta: Capas: Mostrar imagen encima de otras imágenes

pues.. por lo q te entiendo q queres hacer.. es mostrar una imagen sobre otra.. entonces deberias hacer un div principal.. con position relative.. y dentro manejarlo normalmente.. y luego al objeto/tag q queres poner sobre como primario.. ponerle position absolute.. y va a tomar como marco de referencia el div principal del q tiene el position relative.. no se si me explico bien?

<div class="divPrincipal" style="position:relative">
<img src="/" class="imagenNormal" />
<img src="/" class="imagenMontada" style="position:absolute"/>
</div>
  #3 (permalink)  
Antiguo 09/08/2011, 03:27
Avatar de freegirl
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: Catalonia
Mensajes: 4.334
Antigüedad: 20 años, 6 meses
Puntos: 156
Respuesta: Capas: Mostrar imagen encima de otras imágenes

Hola:

Gracias.

el código de capas que tengo ahora es este.


<div class="container" style="position: relative">
<div style="z-index: 0; left: 125px; position: absolute; top: -120px">
<img alt="top image" src="/images/nuevo.png"></div>
Aquí va un texto bla bla bla
<br>
</div>


Me posiciona bien la imagen encima de la otra y en la posición que quiero. Peeeero....como por código se genera una tabla de 2 filas, sólo se ven las imágenes superpuestas en la primera fila.

con firebug veo que ese código está en la 2ª fila también, pero no muestra la imagen. Supongo que la solución no debe estar muy allá...


EDITO:

olvida. Solucionado. Se me fué la pinza con la medida. Código correcto

<div class="container" style="position: relative">
<div style="z-index: 0; left: 125px; position: absolute; top: 50px">
<img alt="top image" src="/images/nuevo.png"></div>
Aquí va un texto bla bla bla
<br>
</div>
__________________
Saludos

Última edición por freegirl; 09/08/2011 a las 03:37

Etiquetas: capas, encima
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 03:18.