Posicionamiento de mis divs...

rakol · #1 (**permalink**) 03/04/2013, 02:56

Hola aver si alguien me puede explicar un poco lo que me ocurre, me he dado cuenta que posicionando las capas con position:absolute; no va la cosa por buen puerto, porque en el momento en que el navegador se encoge todo se jode... por tanto ahora utilizo position: relative; que os parece para utilizarlo a la hora de colocar las divs donde quiero? mirar os pego mi codigo html y css para consultar una duda:

Cita:

...
<body>
<div id="contenedor_principal">
<header>
<div id="titulo">
<img src="index_files/titulo3.png"/> </div>
<div id="idiomas">
<ul>
<li><img src="index_files/espana.jpg"/></li>
<li><img src="index_files/ingles.jpg"/></li>
</ul>
</div>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Obras</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>

<article id="galeria-inicio">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/1.jpg">
<p class="flex-caption">ejemplo1</p>
</li>
<li>
<img src="img/4.jpg"/>
<p class="flex-caption">aquiponloquequieresquedigatuimagen</p>
</li>
<li>
<img src="img/2.jpg"/>
<p class="flex-caption">ejemplo2</p>
</li>
<li>
<img src="img/3.jpg" />
<p class="flex-caption">ejemplo3</p>
</li>
</ul>
</div>
</article>
</section>

<article>
<div id="contenido_descripccion">
<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1><br>
<p1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx
<br><br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxx</p1>
</div>
<div id="cuadro1">
</div>
<div id="cuadro2">
</div>
</article>

</div>
</body>
</html>

Cita:

#cuadro1 {
width: 250px;
height: 250px;
background-color: #dfdfdf;
position: relative;
top: -20px;
left: 80px;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 2px 2px #b0b1b1;
}

#cuadro2 {
width: 250px;
height: 250px;
background-color: #dfdfdf;
position: relative;
top: -280px;
left: 400px;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 2px 2px #b0b1b1;
}

Mi duda esta en que porque para colocar dos divs a la misma altura como es en el caso de estos dos cuadros he tenido que utilizar distinto top, pensaba que utilizando el mismo top estos se colocarian a la misma altura, ayuda please..

Kamae · #2 (**permalink**) 03/04/2013, 04:17

Hola de nuevo rakol

Contesté en tu hilo de los position:absolute; aconsejándote el uso de float. Para tu ejemplo, prueba esto:

Código PHP:

  // Me he cargado los TOP y he añadido los float:left 
 
    #cuadro1 { 
        float:left; 
        width: 250px; 
        height: 250px; 
        background-color: #dfdfdf; 
        position: relative; 
        left: 80px; 
        border: 5px solid #eeeeee; 
        box-shadow: 0px 1px 2px 2px #b0b1b1;  
    } 
 
    #cuadro2 { 
        float:left; 
        width: 250px; 
        height: 250px; 
        background-color: #dfdfdf; 
        position: relative; 
        left: 400px; 
        border: 5px solid #eeeeee; 
        box-shadow: 0px 1px 2px 2px #b0b1b1;  
    }

Verás que sí que se alinean. El problema es que al no decirle nada, ellos se colocan allá donde pueden. Por culpa del texto que molestaba solo a uno de los 2 DIV, uno se colocaba más arriba que el otro. Si tú le dices que flote, él respeta el espacio de los otros elementos y se coloca justo al lado (izquierdo o derecho) cuando acaba el elemento que le precede. Ahora ambos se colocan cuando acaba el texto, y por lo tanto están alineados. La idea es que todos los elementos floten, sólo en contadas excepciones un DIV no flota (por ejemplo cuando es un position:absolute )

Espero que te sirva, saludos!

rakol · #3 (**permalink**) 03/04/2013, 07:37

Kamae antes de nada muchas gracias por contestar, bien, he realizado lo que me comentas es cierto que al colocar el float este se posiciona al lado en la misma altura, ahora me ocurre otra cosa que no se como resolver... he colocado los 3 cuadros como yo queria pero estos estan fuera de la capa que contiene todo, es decir de la capa contenedora, pego codigo:

Cita:

...
<body>
<div id="contenedor_principal">
<header>
<div id="titulo">
<img src="index_files/titulo3.png"/> </div>
<div id="idiomas">
<ul>
<li><img src="index_files/espana.jpg"/></li>
<li><img src="index_files/ingles.jpg"/></li>
</ul>
</div>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Obras</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>

<article id="galeria-inicio">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/1.jpg">
<p class="flex-caption">ejemplo1</p>
</li>
<li>
<img src="img/4.jpg"/>
<p class="flex-caption">aquiponloquequieresquedigatuimagen</p>
</li>
<li>
<img src="img/2.jpg"/>
<p class="flex-caption">ejemplo2</p>
</li>
<li>
<img src="img/3.jpg" />
<p class="flex-caption">ejemplo3</p>
</li>
</ul>
</div>
</article>
</section>

<article>
<div id="contenido_descripccion">
<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1><br>
<p1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br>xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx
<br><br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxx</p1>
</div>
<div id="cuadro1">
</div>
<div id="cuadro2">
</div>
</article>

</div>
</body>
</html>

Cita:

#cuadro1 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
position: relative;
float: left;
left: 55px;
margin-top: -20px;
}

#cuadro2 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
position: relative;
float: left;
left: 155px;
margin-top: -20px;
}

#cuadro3 {
width: 220px;
height: 220px;
background-color: #dfdfdf;
border: 5px solid #eeeeee;
box-shadow: 0px 1px 1px 1px #b0b1b1;
position: relative;
float: left;
left: 255px;
margin-top: -20px;
}

Kamae · #4 (**permalink**) 03/04/2013, 08:22

Hola rakol

En el CSS tienes #cuadro3 pero ese ID no está presente en ningún elemento del HTML. Supongo que querías decir contenido_descripccion (que por cierto, ojo que has puesto descripCCion, q no ocurre nada siempre q lo llames siempre así). También al tabular he visto que tienes un </section> encima de  pero no tiene su correspondiente <section> de apertura, elimínalo o crea el <section> más arriba.

Por otra parte, lo que comentas que está "fuera" del contenedor principal, piensa que éste también tiene que flotar y no le has aplicado ningún CSS. Básicamente tiene que flotar todo lo que esté dentro del <body>.

Mira, prueba este código CSS y ponle y quítale el float:left a #contenedor_principal y verás más claramente la diferencia entre que un elemento flote y no.

Código PHP:

      #cuadro1 {
        width: 220px;
        height: 220px;
        background-color: #dfdfdf;
        border: 5px solid #eeeeee;
        box-shadow: 0px 1px 1px 1px #b0b1b1; 
        float: left;
        left: 55px;
        margin-top: -20px;
    }

    #cuadro2 {
        width: 220px;
        height: 220px;
        background-color: #dfdfdf;
        border: 5px solid #eeeeee;
        box-shadow: 0px 1px 1px 1px #b0b1b1;
        float: left;
        left: 155px;
        margin-top: -20px;
    }

    #contenido_descripccion {
        height: 220px;
        background-color: #dfdfdf;
        border: 5px solid #eeeeee;
        box-shadow: 0px 1px 1px 1px #b0b1b1;
        float: left;
        left: 255px;
        margin-top: -20px;
    }

    #contenedor_principal {
        float:left; // Comenta y descomenta este float
        background-color:#00FF00;
        border:1px solid;
    }

Cuando flota, no hay nada de dentro que sobresalga, son como muñecas rusas todo está dentro de otro. Cuando le quitas el float, actúa de forma independiente al resto, con lo cuál hace más difícil cuadrar bien toda la web para todos los navegadores.

rakol · #5 (**permalink**) 03/04/2013, 08:39

Kamae perdon, no pegue el css de contenido principal era este:

Cita:

#contenedor_principal {
margin-top: -10px;
margin: 0 auto;
border-left: 1px solid #d3d8dd;
border-right: 1px solid #d3d8dd;
border-bottom: 1px solid #d3d8dd;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top: 15px solid #30aac4;
width: 1000px;
height: auto;
background-color: #f4f5f6;
box-shadow: 0px 2px 5px 5px #d3d8dd;

}

Al aplicar a esta capa float:left; ocurre lo que buscaba que los cuadros1,2 y 3 se coloquen dentro del principal pero ahora el margin: 0 auto; que me centraba la capa principal no hace su efecto, tendria que usar de otra manera el margin para lograr centrarlo?? muchas gracias

Kamae · #6 (**permalink**) 03/04/2013, 09:56

En efecto, el float:left anula el margin:0 auto

Yo lo que suelo hacer es usar el DIV de centrado debajo del <body>, un simple margin:Xpx auto; (dónde X equivale al margin-top que quieras, lo digo pq antes tenías margin-top:-10px y margin:0 auto, lo cuál sería en realidad margin:10px auto;). Inmediatamente después del centrado, pongo un DIV que contiene toda la web, que éste sí que flota ya, y a partir de este todos flotan dentro.

Te pego el código referente a los cambios:

Código PHP:

      #contenedor_principal { 
        float:left; 
        width:100%; 
        border-left: 1px solid #d3d8dd; 
        border-right: 1px solid #d3d8dd; 
        border-bottom: 1px solid #d3d8dd; 
        border-bottom-right-radius: 10px; 
        border-bottom-left-radius: 10px; 
        border-top: 15px solid #30aac4; 
        background-color: #f4f5f6; 
        box-shadow: 0px 2px 5px 5px #d3d8dd; 
    } 
     
    #centrado { 
        margin: 10px auto; 
        width: 1000px; 
    }

Código PHP:

  <body> 
    <div id="centrado"> 
        <div id="contenedor_principal"> 
 
            /////////////////////////////////////////////// 
            // Aquí toda la web tal como tenías // 
            /////////////////////////////////////////////// 
 
        </div> 
    </div> 
</body>

Creo que ahora sí no?

Por cierto, nuevamente por si te ayuda a comprenderlo todo aun más, prueba a poner estos CSS y observa lo que ocurre:

Código PHP:

      #contenedor_principal { 
        float:left; 
        width:100%; 
    } 
     
    #centrado { 
        margin: 10px auto; 
        width: 1000px; 
        border-left: 1px solid #d3d8dd; 
        border-right: 1px solid #d3d8dd; 
        border-bottom: 1px solid #d3d8dd; 
        border-bottom-right-radius: 10px; 
        border-bottom-left-radius: 10px; 
        border-top: 15px solid #30aac4; 
        background-color: #f4f5f6; 
        box-shadow: 0px 2px 5px 5px #d3d8dd; 
    }

Como el DIV centrado no flota y tiene el height automático, no puede saber qué ni cuánto ocupa lo que tenga dentro, por lo tanto la altura sale mal. En consecuencia el fondo, bordeado, y todo, se ve mal. Pero si le metes el DIV flotante dentro, ese sí que sabe cuánto ocupa todo lo de dentro (porque también flota), y por lo tanto es el indicado para tener el color de fondo, bordes, etc.

rakol · #7 (**permalink**) 03/04/2013, 10:43

Muchas gracias, eres un crack! ahora parece que todo va bien, es mi primera pagina (sin editor html) y la verdad esque las divs me llevan loco, ahora entiendo algo mejor las div, demomento no tengo ningun problemilla mas, gracias de nuevo.