Foros del Web » Creando para Internet » CSS »

Problema con DIV

Estas en el tema de Problema con DIV en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/08/2010, 19:58
 
Fecha de Ingreso: junio-2006
Mensajes: 9
Antigüedad: 11 años, 5 meses
Puntos: 0
Problema con DIV

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.
  #2 (permalink)  
Antiguo 05/08/2010, 00:58
 
Fecha de Ingreso: enero-2010
Mensajes: 113
Antigüedad: 7 años, 10 meses
Puntos: 2
Respuesta: Problema con DIV

coloca tu css asi:

Código CSS:
Ver original
  1. .noticia_principal  {
  2.                 text-align: center;
  3.                 margin: 0 auto;
  4.                 width: 700px;
  5.                 height: 410px;
  6.                 overflow: hidden;
  7.                 }
  8.         .op {
  9.                 background-color: black;
  10.                 height: 303px;
  11.                 width: 335px;
  12.                 opacity: 0.6;   /* Opacidad para Firefox */
  13.                 filter: alpha(opacity=50);  /* Opacidad para IE */
  14.                 position: relative;
  15.                 left: 40px;
  16.                 bottom: 303px;
  17.                 }
  18.         .foto   {
  19.                 position: relative;
  20.                 top: 0px;
  21.                 left: 0px;
  22.                 }

esta parte es la que hace todo:

Código CSS:
Ver original
  1. overflow: hidden;

Chao espero te sirva.

Etiquetas: Ninguno
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 18:01.