no puedo superponer imagenes y ponerlas una al lado de la otra

mktalternativa · #1 (**permalink**) 26/06/2012, 16:27

uso este codigo para superponer dos imagenes,, va de maravilla pero con el position: absolute no puedo lograr repetir el div "ii" uno al lado del otro . me lo pone como si hubiese solo uno

si le saco el absolute ahi si me muestra dos "ii" pero sin la superposicion interna

Gracias

codigo

Código:

#superposicion{
	z-index:1;
	position: absolute;
}
		
		
#superposicion2{ position: absolute; z-index:0; } 

#ii{ float: left; }

Código:

<div id="ii">


   <div id="superposicion">

    <img src="rojo.png" width="50" height="50"> </div>
    <div id="superposicion2">
   <img src="imagenes/hector%20sottosanto.jpg" width="113" height="113"> 
    </div>

</div>
<div id="ii">


   <div id="superposicion">

    <img src="rojo.png" width="50" height="50"> </div>
    <div id="superposicion2">
   <img src="imagenes/hector%20sottosanto.jpg" width="113" height="113"> 
    </div>

</div>

JhormanHkr · #2 (**permalink**) 26/06/2012, 22:59

Hola,
mira a ver si esto es lo que buscas hacer... te dejo el codigo. Puedes usar el formato de listas para hacer tal cosa...

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul li{
    position:relative;  
    width:150px;
    height:150px;
    background-image:url(http://static.photaki.com/Paisaje-Utah--293707.jpg);
    list-style:none;
    display:inline-block;
}
#contenedor-derecha{
}
</style>
</head>
<body>
<ul>
<li><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRfn3U7x97TTVLuuFPy3Yfhu57xGdfInB_0v34DPbK5eMbOmM07XAepbw" /></li>
<li><img src="http://cdn.holidaywatchdog.com/ta/photo-t/02/37/42/40/paisaje.jpg" /></li>
<li><img src="http://www.decorazongallery.com/gallery/artist/mariajose/thumbs/paisaje_final_1.jpg" /></li>
</ul>
</body>
</html>