Foros del Web » Creando para Internet » CSS »

div sobre imagen

Estas en el tema de div sobre imagen en el foro de CSS en Foros del Web. buenas, estoy intentando poner un div sobre una imagen. no lo estoy logrando. Código HTML: <div id= "contenedor" > <div id= "capa" > </div> <img ...
  #1 (permalink)  
Antiguo 26/04/2009, 10:03
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
div sobre imagen

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;
}

Última edición por Newbie001; 26/04/2009 a las 12:45
  #2 (permalink)  
Antiguo 26/04/2009, 10:56
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: div sobre imagen

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.
  #3 (permalink)  
Antiguo 26/04/2009, 11:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: div sobre imagen

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

me podrias explicar?
  #4 (permalink)  
Antiguo 26/04/2009, 11:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div sobre imagen

Este selector no hace absolutamente nada, porque se refiere a un elemento cuyo ID sea "img", que no tienes:
Cita:
#img {
border:#444 solid 1px;
float:right;
width:585px;
height:409px;
position:relative;
z-index:1;
}
Seguramente lo que quieres hacer es:
Cita:
#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"
  #5 (permalink)  
Antiguo 26/04/2009, 12:45
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: div sobre imagen

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"
  #6 (permalink)  
Antiguo 26/04/2009, 12:51
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: div sobre imagen

Pon la imagen de fondo y listo


Bye
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #7 (permalink)  
Antiguo 26/04/2009, 12:53
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: div sobre imagen

Cita:
Iniciado por pitufoweb Ver Mensaje
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
  #8 (permalink)  
Antiguo 26/04/2009, 13:11
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: div sobre imagen

Cita:
Iniciado por Newbie001 Ver Mensaje
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.
  #9 (permalink)  
Antiguo 26/04/2009, 14:06
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: div sobre imagen

Cita:
Iniciado por matados2k Ver Mensaje
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!
  #10 (permalink)  
Antiguo 26/04/2009, 14:48
 
Fecha de Ingreso: abril-2009
Mensajes: 37
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: div sobre imagen

Cita:
Iniciado por Newbie001 Ver Mensaje
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.
  #11 (permalink)  
Antiguo 26/04/2009, 17:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div sobre imagen

Cita:
Iniciado por Newbie001 Ver Mensaje
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.
  #12 (permalink)  
Antiguo 27/04/2009, 15:57
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: div sobre imagen

aja :) pido perdon de nuevo. y gracias nuevamente a matados2k
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 04:46.