Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: divs relativos y/o absolutos

  1. #1
    Me va gustando esto... Habitante Avatar de ocbarrio
    Fecha de Ingreso
    12 sep, 11
    Mensajes
    199
    Poder de Reputación
    15

    divs relativos y/o absolutos

    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
    Fotografía y Vídeo Profesional
    www.fotografiaolivier.com

    Productora de Video en Valencia
    www.voorfilms.es/galeria/galeria.html

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,046
    Poder de Reputación
    26
    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 :).
    Última edición por skaparate; 13/09/2012 a las 02:09

  3. #3
    Me va gustando esto... Habitante Avatar de ocbarrio
    Fecha de Ingreso
    12 sep, 11
    Mensajes
    199
    Poder de Reputación
    15
    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&Iacute;A Y V&Iacute;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:info@fotografiaolivier.com"><img src="objetos/mailme.gif" onmouseover="this.src='objetos/mailme-hover.gif';" onmouseout="this.src='objetos/mailme.gif';" width="36" height="36" alt="M&aacute;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><!--container-->
    <img id="bottom" src="/formulario/images/bottom.png" width="400px" alt="" />
    </div>

    <div id="info-contacto">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p class="tel">TELEFONO:</p>
    <p class="numtel">656429265</p>
    <p>&nbsp;</p>
    <p class="tel">E-MAIL:</p>
    <p>infopp@prophotografy.com</p>
    </div>

    <div id="privacidad">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</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&oacute;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;
    }
    Fotografía y Vídeo Profesional
    www.fotografiaolivier.com

    Productora de Video en Valencia
    www.voorfilms.es/galeria/galeria.html

Temas Similares

  1. Divs entre otros Divs
    Por feniz_18 en el foro Foro General
    Respuestas: 2
    Último Mensaje: 28/04/2012, 17:55
  2. divs dentro de divs
    Por albertopc en el foro Foro General
    Respuestas: 2
    Último Mensaje: 08/07/2011, 22:09
  3. DIVs dentro de Divs
    Por experimentator en el foro Webs con Capas o DIVS
    Respuestas: 6
    Último Mensaje: 02/04/2007, 16:00

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •