10/09/2009, 15:37
|
| Colaborador | | Fecha de Ingreso: marzo-2009 Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses Puntos: 101 | |
Respuesta: Presentacion y ayudita No habia entendido que el recuadro de foto del mes era una foto en sí.
Para tener una foto encima de otra, hay que darle position:absolute. Con esto, la liberas del sistema de coordenadas (x,y), con lo cual la podes mover "volando" encima de otros objetos sin mover a estos de lugar.
Si le pones ese cualidad css a tu img, lo que va a pasar es que aparecerá en el punto (0,0), es decir arriba a la izq de la pantalla. Esto, porque el contenedor de un elemento con "position:absolute" es el body.... a menos que se declare un elemento menor como contenedor (que es lo que vamos a hacer).
Una vez dada una "position" a un elemento, podes moverlo con estos atributos:
top: 30 px // es decir, 30pixeles de espaciado arriba hacen que baje tu elemento.
right: 60px // es decir, posicionate a 60pixeles de distancia del borde derecho de la pantalla.
o tambien:
bottom: 20px y left: 15px
Si la foto estuviera encuadrada dentro de un contenedor con position: relative o position: absolute, entonces las coordenadas (0,0) para tu foto no serían las del borde del monitor, sino las del borde del contenedor. Y desde ahi, podría contar con los comandos : top - left, etc para mover con numeros positivos y negativos tu elemento "desde le punto (0,0)".
Vos tenes un tema que solucionar, y es justamente cual es el contenedor para la foto a la que vas a darle position:absolute . Si tuvieses ese fragmento de codigo envuelto en un div, sencillamente le darías position:relative a ese div, que significa "sigue ocupando tu espacio"... "pero responde a los atributos left - top - right -bottom ( se convierte en elemento movil, pero tambien en un contenedor de otros elementos con position asignada, es decir que su esquina superior izquierda será el punto (0,0) de los elementos que tenga dentro)
El problema que tendrías que resolver, es el de envolver tu foto:
<p><a href="Lo-mejor.html" target="_blank"><img src="Imagenes/Foto-mes.gif" width="170" height="212" align="left" /></a></p>
Y luego sumarle otra foto, con position : absolute. Algo así:
<div style="position=relative">
<p><a href="Lo-mejor.html" target="_blank"><img src="Imagenes/Foto-mes.gif" width="170" height="212" align="left" /></a></p>
<span style="position:absolute; top:20px"><img src="Imagenes/verdadera_foto_del_mes.gif" alt="" /> </span>
</div>
Aca le doy la position y 20px de margen a un contenedor span, que va a tomar el tamaño de la foto que contenga. (los 20px son para no superponer el titulo. Podes darle un padding de 2px tambien para respetar los bordes laterales. |