Foros del Web » Creando para Internet » CSS »

Espacios en blanco tras poisicionamiento relativo

Estas en el tema de Espacios en blanco tras poisicionamiento relativo en el foro de CSS en Foros del Web. Hola, Tengo el siguiente problema: Creo tres divs diferentes y los posiciona de forma relativa (div uno, div dos, div tres). El div dos lo ...
  #1 (permalink)  
Antiguo 17/11/2011, 04:02
 
Fecha de Ingreso: noviembre-2003
Mensajes: 41
Antigüedad: 20 años, 4 meses
Puntos: 0
Espacios en blanco tras poisicionamiento relativo

Hola,

Tengo el siguiente problema:

Creo tres divs diferentes y los posiciona de forma relativa (div uno, div dos, div tres). El div dos lo coloco superpuesto al div uno, unos 200px creo. Al hacer esto, en la parte inferior de la web me aparece un espacio en blanco con el mismo tamaño que el espacio superpuesto.
Si superpongo más divs me sigue sumando al espacio en blanco la cantidad superpuesta.

Me queda como en la imagen:



Uploaded with ImageShack.us

Mi código html es:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>


<link rel=stylesheet href="style.css" type="text/css">


</head>

<body>


<div id="uno">
uno
</div>

<div id="dos">
dos
</div>

<div id="tres">
tres
</div>


</body>
</html>

Y este mi CSS:

Código:
#uno{

color: white;
height: 275px; 
padding-left: 10px;
padding-top:0px;
text-align:  center; 
background:black; 
border: 1px solid black;
clear:both;
display:block;

}


#dos{

color: white;
width: 600px; 
height: 800px;
padding-left: 10px;
padding-top:0px;
text-align:  center; 
background:red; 
border: 1px solid black;

position: relative;
bottom:200px;


}

#tres{

color: white;
height: 200px;
padding-left: 10px;
padding-top:0px;
text-align:  center; 
background:yellow; 
border: 1px solid black;

position: relative;
top:-200px;


}
  #2 (permalink)  
Antiguo 17/11/2011, 05:07
 
Fecha de Ingreso: noviembre-2011
Ubicación: Ciudad Real
Mensajes: 8
Antigüedad: 12 años, 5 meses
Puntos: 1
Respuesta: Espacios en blanco tras poisicionamiento relativo

No utilices position:relative para la estructura de web, si no sabes usarlo bien es muuuuuy cutre. De todos modos si insistes en el error, puedes parchearlo fácilmente si utilizas la técnica de márgenes negativos.
  #3 (permalink)  
Antiguo 17/11/2011, 05:09
 
Fecha de Ingreso: noviembre-2011
Ubicación: Ciudad Real
Mensajes: 8
Antigüedad: 12 años, 5 meses
Puntos: 1
Respuesta: Espacios en blanco tras poisicionamiento relativo

Venga, va... Te lo doy masticadito:
solo tienes que eliminar:
top:-200px;
y añadir:
margin-top:-200px;
  #4 (permalink)  
Antiguo 17/11/2011, 05:19
 
Fecha de Ingreso: noviembre-2003
Mensajes: 41
Antigüedad: 20 años, 4 meses
Puntos: 0
Respuesta: Espacios en blanco tras poisicionamiento relativo

Muchas gracias sergio..funciona perfectamente.

Una pregunta, ¿por que es un error usar el relative?? Perdona por la pregunta, quizá es un poco tonta, es la primera vez que toco css y no soy programador web... encima estoy modificando una tema de wordpress y ando que pierdo en algunas cosas.

Reincido en las gracias. Un saludo,

José Manuel

Etiquetas: blanco, espacios, html, relativo, tamaño, tras, fondo
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 01:08.