Foros del Web » Creando para Internet » CSS »

<Div> sobre <img>

Estas en el tema de <Div> sobre <img> en el foro de CSS en Foros del Web. Hola chicos, necestio poner un div sobre un elemento img (una imagen) He buscado en el foro y todo lo que he encontrado es poner ...
  #1 (permalink)  
Antiguo 30/01/2008, 11:34
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 10 meses
Puntos: 0
<Div> sobre <img>

Hola chicos, necestio poner un div sobre un elemento img (una imagen)

He buscado en el foro y todo lo que he encontrado es poner la imagen como fondo del div = eso no me sirve
Otros me hablan sobre postion: absulte y especificar el top y el left = tampoco me sirve

Sin entrar en detalles de por qué esas dos soluciones no me sirven ¿conoceis otra?
¿Se podría hacer algo con los atributos position: relative? No domino esos atributos. Supongo que con el float no es.

Sería algo así como escribir encima de una imagen, y punto. Nada de.. "cuando pase por encima..." ni nada de eso. Un texto sobre una imagen.

¿Qué se os ocurre?

Gracias
  #2 (permalink)  
Antiguo 30/01/2008, 12:30
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: <Div> sobre <img>

Pues:
Código HTML:
<div style="width: 350px; height: 500px; background: url('imagen.jpg');">
Tu texto</div> 
Saludos

PD: Se me olvidaba, pon en width los píxeles de ancho de tu imagen y en el height los píxeles de alto.
  #3 (permalink)  
Antiguo 30/01/2008, 12:51
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: <Div> sobre <img>

Se te ha pasado un pequeño detalle

Cita:
He buscado en el foro y todo lo que he encontrado es poner la imagen como fondo del div = eso no me sirve
Otros me hablan sobre postion: absulte y especificar el top y el left = tampoco me sirve
  #4 (permalink)  
Antiguo 30/01/2008, 12:53
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: <Div> sobre <img>

Lo siento... no sé más soluciones...
  #5 (permalink)  
Antiguo 30/01/2008, 13:06
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: <Div> sobre <img>

Yo he encontrado esta:

Código HTML:
<div id="cont"><img src="fotos/sinfoto.jpg" width="200" height="168" />
	<span id="ref">REF. 0330</span>
</div> 

Si a cont le ponemos position:relative; width:200px;
y a ref le ponemos position:absolute; top:0px; left:0px; ref (que es el texto) se pondrá sobre la imgen (que es cont). Podemos ajustar la posicion del texto con respecto a la imagen jugando con los valores top y left de ref

OJO: La posicion absolute aquí no se calcula respecto a la pagina, sino respecto a su elemnto padre (cont), por lo que si cambiamos de sitio a cont, ref irá con él.

Mola
  #6 (permalink)  
Antiguo 30/01/2008, 14:07
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: <Div> sobre <img>

Siempre se aprende algo .
  #7 (permalink)  
Antiguo 30/01/2008, 14:35
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: <Div> sobre <img>

Cita:
Iniciado por TomasCrespo
Otros me hablan sobre postion: absulte y especificar el top y el left = tampoco me sirve
Cita:
Iniciado por TomasCrespo Ver Mensaje
Si a cont le ponemos position:relative; width:200px;
y a ref le ponemos position:absolute; top:0px; left:0px; ref (que es el texto) se pondrá sobre la imgen (que es cont). Podemos ajustar la posicion del texto con respecto a la imagen jugando con los valores top y left de ref

OJO: La posicion absolute aquí no se calcula respecto a la pagina, sino respecto a su elemnto padre (cont), por lo que si cambiamos de sitio a cont, ref irá con él.

Mola
  #8 (permalink)  
Antiguo 30/01/2008, 20:06
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: <Div> sobre <img>

dependiendo del caso yo uso posicionamiento absoluto o margin negativo. en tu caso no se ya que no has puesto tu html/css
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #9 (permalink)  
Antiguo 31/01/2008, 02:47
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: <Div> sobre <img>

El tema del posicionamiento absoluto, siempre o casi siempre que se comenta, se hace de acuerdo a la etiqueta body, es decir posicionamiento absoluto global. A mi este tipo de posicionamiento no me gusta porque en cuanto cambias algo en la pagina se te va todo al garete. Sin embargo desconocía que existía un posicionamiento absoluto con relación al elemento padre. Esto ya es otra cosa, porque si muevo el elemento padre, también se mueve el hijo.

Muchas gracias por vuestra cooperación chicos

Saludos
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 13:30.