Duda teórica sobre posicionamiento

[jamm1993x]

Hola, tenía una duda que aunque he conseguido solucionar no sé muy bien a qué se debe.

Tengo una serie de cajas



Todo programado lo más simple del mundo, es una serie de divs con su anchura, altura y tal, y algunos de ellos como inline-block, absolutamente nada más.

La cuestión es que se marca una diferencia si pongo los <p> que hay en todos los divs como float o como position:absolute, y no entiendo muy bien por qué pasa esto ya que en teoría creo que no debería afectar. En concreto si no pongo ninguna de estas propiedades lo que muestra es esto:



¿Alguien puede explicarme por qué sin poner esas propiedades se muestra mal?

La estructura viene a ser la que sigue


<div id="superior">
<div id="uno">
<p> Logo1 </p>
</div>
<div id="dostres">
<div id="dos">
<p> Logo2 </p>
</div>
<div id="tres">
<p> Logo3 </p>
</div>
</div>
</div>
<div id="inferior">
<div id="cuatro">
<p> Logo4 </p>
</div>
<div id="cinco">
<p> Logo5 </p>
</div>
<div id="seisieteocho">
<div id="seis">
<p> Logo6 </p>
</div>
<div id="sieteocho">
<div id="siete">
<p> Logo7 </p>
</div>
<div id="ocho">
<p> Logo8 </p>
</div>
</div>
</div>

[GemliosG]

Puedes poner el códgio css para verlo?

[GemliosG]

porque pones el div sieteocho si anteriormente habías puesto div seisieteocho

[NueveReinas]

Iniciado por GemliosG

porque pones el div sieteocho si anteriormente habías puesto div seisieteocho

Creo que es por esto:

Código:

<div id="seisieteocho">
    <div id="seis">
    <p> Logo6 </p>
    </div>

        <div id="sieteocho">
            <div id="siete">
                <p> Logo7 </p>
            </div>

            <div id="ocho">
                <p> Logo8 </p>
            </div>
        </div>

</div>

[GemliosG]

Si pero no entiendo entonces la figura de arriba, por que si fuese así, creo yo, fuera un recuadro dentro de otro

[jamm1993x]

seisieteocho engloba al cuadro seis, al siete y al ocho, y sieteocho solo engloba al 7 y al 8

Añado que si pongo sólo los divs (sin p), muestra las cajas como en la primera imagen, es sólo cuando pongo un p que no es absolute cuando me las desordena (si lo pongo como absolute o float no pasa nada, lo que no entiendo es por qué si en teoría creo que esa propiedad afecta al elemento dentro de su contenedor)


El código CSS es el siguiente:

body{
width: 1000px;
margin: 8 auto;
}

div{
font-size:0;
}

p {
font-size:14px;
position: absolute;
}

#superior{
width: 1000px;
height: 200px;
}

#inferior{
width: 1000px;
height: 500px;
}

#uno{
width: 490px;
height: 190px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#dostres{
width: 500px;
height: 200px;
display: inline-block;
}

#dos{
width: 490px;
height: 90px;
margin: 4px;
border: 1px solid black;

}

#tres{
width: 490px;
height: 90px;
margin: 4px;
margin-top: 8px;
border: 1px solid black;
}

#cuatro{
width: 290px;
height: 490px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#cinco{
width: 290px;
height: 490px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#seisieteocho{
width: 400px;
height: 500px;
display: inline-block;
}

#seis{
width: 390px;
height: 190px;
margin: 4px;
border: 1px solid black;

}

#sieteocho{
width: 400px;
height: 300px;

}

#siete{
width: 190px;
height: 290px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

#ocho{
width: 190px;
height: 290px;
display: inline-block;
margin: 4px;
border: 1px solid black;
}

[pzin]

Estoy con la tableta así que no puedo hacer pruebas.

Seguramente sea una cuestión de colapsamiento CSS y que estás usando inline-block para maquetar. A mi hacer eso me parece un error, por lo márgenes que genera y por el valor por defecto de vertical-align.

Yo optaría por flotar los elementos. Suele ser más robusto.

[C2am]

La cuestión es que el inline-block, al actuar como un elemento de linea te lo alinea verticalmente con valor por defecto : baseline

Ref: http://librosweb.es/libro/css/capitulo_6/texto_2.html

Entonces ese corrimiento hacia abajo es simplemente que el elemento queda alineado en su linea base.
Para ubicarlo arriba debes cambiar el valor de vertical-align a "top".

Código CSS:

#uno{
width: 490px;
height: 190px;
display: inline-block;
margin: 4px;
border: 1px solid black;
 
vertical-align: top;
 
}
 

Y lo mismo debes hacer con #cuatro y #cinco y todos aquellos que creas conveniente y que tengan su display como inline-block.

Ahora, cuando le agregas el position:absolute a p, posiciona en párrafo en las coordenadas (0,0) dado que no le has indicado otras coordenadas. Además, y de esto no estoy seguro, pero creo que al declararle un display a su padre toma el origen en el vértice superior izquierdo del mismo y por eso ya no le hace caso al baseline, que es lo que sucedería sí el contenedor padre tuviera definido su position distinto al stactic.

Ref: http://librosweb.es/libro/css/capitu..._absoluto.html

Como recomendación, no utilices el position:absolute a menos que sea absolutamente necesario posicionar con mucha exactitud algún elemento.

No coincido con pzin en cuanto a que float sea más robusto que display inline block, ya que float ha sido creado para ubicar imágenes a las que las rodea un texto, emulando las ilustraciones de un libro impreso. Pero también es cierto que display inline block también tiene sus cosas.

Pero como todo en CSS, se utilizan las herramientas que tenemos a mano para lograr lo que necesitamos. Antes se maquetaba con tablas, luego con float, hoy hay muchas otras maneras, aunque se debe revisar constantemente el soporte que le dan los navegadores y las necesidades de los proyectos.

Te dejo un link donde podrás informarte y aprender sobre css y como maquetar:
http://ksesocss.blogspot.com/2012/11...te-futuro.html

[pzin]

Iniciado por C2am

No coincido con pzin en cuanto a que float sea más robusto que display inline block, ya que float ha sido creado para ubicar imágenes a las que las rodea un texto, emulando las ilustraciones de un libro impreso

Que haya sido pensado para otra cosa no lo hace menos robusto. Lo que lo hace más robusto es precisamente el asunto del alineamiento vertical y que no se renderizan los espacios o saltos de linea del HTML, algo que me parece grotesco pero que es natural es elementos en linea —ya que es como texto.

Pero bueno, yo siempre digo que todas las técnicas valen, pero siempre hay una que encaja mejor según la estructura.

[jamm1993x]

Muchas gracias, justo esto era lo que necesitaba, ya que me chirriaba un poco tener que poner el position:absolute para solucionarlo