divs relativos y/o absolutos

ocbarrio · 12 Sep 2012, 23:43 · Solicitar retirada

buenas!
Tengo una duda, a la hora de crear un div relativo, y moverlo hacia arriba con "top", guarda la distancia que deberia tener sin esa propiedad, con lo que todo lo que vas añadiendo queda mas abajo. ¿Como se hace para eliminar dicho espacio manteniendo el div como relativo?
Gracias

skaparate · 13 Sep 2012, 04:05 · Solicitar retirada

Hola:

No entendí XD. Especialmente esta frase:

guarda la distancia que deberia tener sin esa propiedad

En realidad, espero haber entendido bien :P:

Lo que pasa es que al especificar top: NNNpx; le estas diciendo que mueva NNN pixeles desde la esquina superior izquierda hacia abajo, o sea, añades pixeles entre el div relativo y el elemento padre (o contenedor), entonces claro, todo queda más abajo.

La diferencia entre relative y absolute, es que este último se posicionará en donde tu le digas sin importar el padding que haya entre el elemento absolute y el elemento contenedor. Más aún, si no le das position: relative al elemento contenedor, el elemento absolute se saldrá del elemento contenedor y se posicionará según las propiedades top, bottom, left y right. Por defecto se posicionará en la esquina superior izquierda del navegador (top: 0px; left: 0px;).

Si tuvieras un ejemplo de lo que quieres lograr y lo que tienes actualmente sería bueno :D (aunque quizás llega otro usuario menos mongo y te entiende :P).

Saludos :).

ocbarrio · 13 Sep 2012, 12:40 · Solicitar retirada

Si, eso que me explicas es lo que estoy diciendo, si hay alguna propiedad que haga que esa separacion desaparezca.

Aqui esta la pagina que me da problemas (si miras el resto de htmls veras como espero que quede)
http://www.fotografiaolivier.com/contacto.html

Codigo html

<div id="global">

<div id="cabecera">
<a href="index.html"><img src="/objetos/cabecera.jpg" width="960" height="103" alt="Logotipo" title="Página principal"/></a>

<div id="cabecera-texto">
<p>FOTOGRAFÍA Y VÍDEO PROFESIONAL</p>
</div>
<div id="navegacion">
<a href="productos.html"><img src="objetos/productos.jpg" onmouseover="this.src='objetos/productos-hover.jpg';" onmouseout="this.src='objetos/productos.jpg';" alt="Nuestros productos" height="46" title="Nuestros productos"/></a><a href="precios.html"><img src="objetos/precios.jpg" onmouseover="this.src='objetos/precios-hover.jpg';" onmouseout="this.src='objetos/precios.jpg';" alt="Precios" height="46" title="Consulta nuestros precios"/></a><a href="galeria.html"><img src="objetos/galeria.jpg" onmouseover="this.src='objetos/galeria-hover.jpg';" onmouseout="this.src='objetos/galeria.jpg';" alt="Sección Fotografía" height="46" title="Galería fotográfica"/></a><a href="video.html"><img src="objetos/video.jpg" onmouseover="this.src='objetos/video-hover.jpg';" onmouseout="this.src='objetos/video.jpg';" alt="Sección Vídeo" height="46" title="Galería Vídeo"/></a><a href="contacto.html"><img src="objetos/contacto-active.jpg" alt="Contacta con nosotros" height="46" title="Contacta con nosotros"/></a>
</div>

<div id="info">

<div id="info-1">
<p>LA CALIDAD SI TIENE PRECIO</p>
</div>

<div id="info-2">
<a href="mailto:[correo eliminado]"><img src="objetos/mailme.gif" onmouseover="this.src='objetos/mailme-hover.gif';" onmouseout="this.src='objetos/mailme.gif';" width="36" height="36" alt="Mándame un email" title="Mándame un email"/></a></div>

<div id="info-3">
<a href="http://www.facebook.com/profile.php?id=100002859625246" target="_blank"><img src="objetos/facebook.gif" onmouseover="this.src='objetos/facebook-hover.gif';" onmouseout="this.src='objetos/facebook.gif';" width="36" height="36" alt="Envíame un mensaje" title="Mándame un mensaje"/></a></div>

</div>
</div>

<div id="contenido">

<div id="fondo-contenido">

<img src="objetos/panoramica2.jpg" width="920" height="130" />
<div id="public">

<div id="container">

<form id="form1" class="wufoo" action="../enviar.php" method="post">

<div class="info">
<h2>Contacto</h2>
</div>

<ul>

<li>
<label class="desc" > Nombre:<span class="req">*</span></label>
<div>
<input class="field text large" name="nombre" type="text" id="nombre" maxlength="255" />
</div>
</li>

<li>
<label class="desc">E-mail:<span class="req">*</span></label>
<div>
<input class="field text large" name="email" id="email" type="text" maxlength="255"/>
</div>
</li>

<li>
<label class="desc">Asunto:<span class="req">*</span></label>
<div>
<input class="field text large" name="asunto" id="asunto" type="text" maxlength="255"/>
</div>
</li>

<li>
<label class="desc">Mensaje:<span class="req">*</span></label>
<div>
<textarea rows="10" cols="50" class="field textarea medium" name="mensaje" id="mensaje"></textarea>
</div>
</li>

<li class="buttons">
<input name="button" type="submit" class="btTxt" id="saveForm" value="Enviar"/>
</li>
</ul>

</form>

</div>
<img id="bottom" src="/formulario/images/bottom.png" width="400px" alt="" />
</div>

<div id="info-contacto">
<p> </p>
<p> </p>
<p class="tel">TELEFONO:</p>
<p class="numtel">656429265</p>
<p> </p>
<p class="tel">E-MAIL:</p>
<p>[correo eliminado]</p>
</div>

<div id="privacidad">
<p> </p>
<p> </p>
<p> </p>
<p>Este sitio respeta la privacidad,</p>
<p>por lo que no se revelará ningun dato a terceros.</p>
<p>L.P.D. Ley de Protección de Datos.</p>
</div>

</div>

</div>

<div id="pie">

<div id="menu-pie">
<ul>
<li>
<a href="index.html">Página principal</a></li><li><a href="productos.html">Productos</a></li><li><a href="precios.html">Precios</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="sitemap.html">Sitemap</a></li>
</ul>
</div>

<div id="webdesign">
<p>Fotografia Olivier Web Design - diseño y asesoría web</p>
</div>
</div>

<div id="apDiv1"></div>

</div>

Código CSS

* {
margin: 0px;
padding: 0px;
border: 0px;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #858585;
text-align: center;
}

a {
color: #FFF;
}
#global {
position: relative;
width: 960px;
z-index: 1;
margin: 0px auto;
height: 1020px;
overflow: visible;
}
#cabecera {
position: relative;
width: 960px;
z-index: 1;
background-color: #5B5B5B;
}
#navegacion {
position: relative;
height: 46px;
z-index: 2;
top: -20px;
}
#info {
position: relative;
height: 40px;
z-index: 3;
background-color: #000;
top: -20px;
}
#cabecera-texto {
position: relative;
width: 300px;
z-index: 2;
text-align: right;
left: 648px;
top: -30px;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
}
#info-1 {
position: relative;
z-index: 4;
color: #FFF;
top: 11px;
left: 22px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
width: 250px;
}

#info-2 {
position: relative;
height: 38px;
z-index: 4;
left: 823px;
top: -18px;
width: 36px;
}
#info-3 {
position: relative;
height: 38px;
z-index: 4;
left: 889px;
top: -56px;
width: 36px;
}

#contenido {
position: relative;
width: 960px;
z-index: 4;
background-color: #5B5B5B;
top: -20px;
height: 690px;
}
#fondo-contenido {
position: relative;
width: 940px;
z-index: 5;
left: 10px;
top: 10px;
background-color: #CCC;
padding-top: 10px;
}
#public {
position: relative;
top: 10px;
width: 400px;
left: 410px;
font-family: Arial, Helvetica, sans-serif;
}
#privacidad {
position: absolute;
top: 500px;
left: 109px;
width: 250px;
height: 150px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
background-color: #999;
}
#info-contacto {
position: absolute;
z-index: 16;
left: 109px;
top: 250px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
background-color: #999;
width: 250px;
height: 150px;
}

#pie {
position: relative;
width: 960px;
height: 43px;
z-index: 15;
text-align: center;
margin: 0px auto;
background-image: url(../objetos/pie.jpg);
top: -20px;
}
#menu-pie {
position: relative;
width: 500px;
z-index: 14;
font-size: 14px;
float: left;
left: 16px;
top: 10px;
}
#menu-pie li {
float: left;
margin-top: 1px;
margin-right: 10px;
margin-bottom: 0.625em;
list-style-type: none;
margin-left: 16px;
}
#menu-pie li a:visited {
color:#CCC;
}
#menu-pie li a:link {
color: #FFF;
}
#menu-pie li a:hover {
color:#0FF;
}
#webdesign {
position: relative;
width: 400px;
z-index: 15;
float: right;
font-size: 15px;
top: 11px;
text-decoration: underline;
color: #FFF;
left: -10px;
}
#apDiv1 {
position: relative;
width: 960px;
height: 17px;
z-index: 16;
background-color: #858585;
top: -20px;
}