div sobre imagen

[Newbie001]

buenas, estoy intentando poner un div sobre una imagen. no lo estoy logrando.

Código HTML:

<div id="contenedor">
	<div id="capa">
	</div>
	<img src="http://www.forosdelweb.com/f53/div-sobre-imagen-693312/f53/div-sobre-imagen-693312/f53/div-sobre-imagen-693312/..." />
</div> 

Código:

#contenedor{
	width:587px;
	float:right;
	margin-right:5px;
}
img {
	border:#444 solid 1px;
	float:right;
	width:585px;
	height:409px;
	position:relative;
	z-index:1;
}
#capa {
	position:relative;
	width:585px;
	height:409px;
	float:right;
	z-index:2;
}

[matados2k]

Código:

<div id="contenedor">
       <img src="la imagen" />
	<div id="capa">
	</div>	
</div>

Código:

#contenedor{
	width:587px;
	float:right;
	margin-right:5px;
}
#img {
	border:#444 solid 1px;
	float:right;
	width:585px;
	height:409px;
}
#capa {
	width:585px;
	height:409px;
	float:right;
       margin-top:-409px; /*este puede que no sea necesario*/
       margn-right: -585px;
}

No se si saldra bien pues nunca lo he hecho con elementos flotados a la derecha, el truco es simplemente flotar y jugar con margenes negativos.

[Newbie001]

no lo probe todavia pero la verdad que no entiendo que tienen que ver los margenes negativos

me podrias explicar?

[Mikmoro]

Este selector no hace absolutamente nada, porque se refiere a un elemento cuyo ID sea "img", que no tienes:

#img {
border:#444 solid 1px;
float:right;
width:585px;
height:409px;
position:relative;
z-index:1;
}

Seguramente lo que quieres hacer es:

#contenedor img {
border:#444 solid 1px;
float:right;
width:585px;
height:409px;
position:relative;
z-index:1;
}

es decir, la imagen dentro del div con ID "contenedor"

[Newbie001]

disculpa mikmoro, el CSS esta asi como decis vos. lo que paso es que lo quise simplificar para escribirlo aca y quedo mal. pero el verdadero esta correcto en cuanto al "img"

[pitufoweb]

Pon la imagen de fondo y listo


Bye

[Newbie001]

Iniciado por pitufoweb

Pon la imagen de fondo y listo


Bye

no es tan facil por q la imagen se genera a partir de un codigo javascript. es una alternativa pero no la mejor ya que no soy gran conocedor de JS. gracias por el consejo

[matados2k]

Iniciado por Newbie001

no lo probe todavia pero la verdad que no entiendo que tienen que ver los margenes negativos

me podrias explicar?

Facil, si tu a algo le das margin-top: 10px se baja 10px , si le das -10px entonces se subira 10.

Como estan flotados, al usar los negativos estas poniendo una sobre otra.

[Newbie001]

Iniciado por matados2k

Facil, si tu a algo le das margin-top: 10px se baja 10px , si le das -10px entonces se subira 10.

Como estan flotados, al usar los negativos estas poniendo una sobre otra.

por alguna extraña razon no me parece que esta solucion sea muy correcta.

sin embargo funciono perfectamente en FF y IE, muchas gracias!

[matados2k]

Iniciado por Newbie001

por alguna extraña razon no me parece que esta solucion sea muy correcta.

sin embargo funciono perfectamente en FF y IE, muchas gracias!

Pues sin usar position:absolute (con relative no va) es la única forma. Y va en todos los navegadores.

[Mikmoro]

Iniciado por Newbie001

disculpa mikmoro, el CSS esta asi como decis vos. lo que paso es que lo quise simplificar para escribirlo aca y quedo mal. pero el verdadero esta correcto en cuanto al "img"

AH, muy bien. Al ver ese error no hice ni mirar el problema, pero ahora veo que ya está solucinado. Entenderás que cuando de código se habla (de cualqueir tipo), es importante transcribir correctamente, o no haces más que perder el tiempo.

[Newbie001]

aja :) pido perdon de nuevo. y gracias nuevamente a matados2k