Hola a todos, tengo un problema.
Tengo un DIV que quiero ubicar dentro de otro DIV y a la vez encima de una imagen (que también se encuentra en el div). Hasta ahí todo bien, logro ubicarlo, pero el tema es que abajo queda un espacio vacío que es donde iría en div en realidad. Paso a mostrarles con imágenes.
En esta foto pueden ver como me queda, se ve todo bien, pero más abajo queda espacio vacío (cerán que la barra de desplazamiento permite ir hacia abajo donde hay solo espacio vacio):
Si deshabilito en mi CSS el "bottom: 303px" verán que ahí descubro que ese espacio vacío es culpa del DIv, que en su posición original ocupa ese espacio:
¿Alguna solución para que este espacio desaparezca? Dejo aquí el código
HTML: Código HTML:
<div class="noticia_principal">
<img class="foto" src="1.jpg" width="700" height="410" />
<div class="op"></div>
</div>
CSS: Código HTML:
.noticia_principal {
text-align: center;
margin: 0 auto;
width: 700px;
height: 410px;
}
.op {
background-color: black;
height: 303px;
width: 335px;
opacity: 0.6; /* Opacidad para Firefox */
filter: alpha(opacity=50); /* Opacidad para IE */
position: relative;
left: 40px;
bottom: 303px;
}
.foto {
position: relative;
top: 0px;
left: 0px;
}
Desde ya muchas gracias.