Practicando posicionamiento

Caquilla23 · #1 (**permalink**) 25/08/2010, 10:27

Hola a todos. Estoy practicando posicionamiento de cajas y me he encontrado con la siguiente situación.

Utilizando el código que marco a continuación, creo dos cajas padre (Una dentro de otra). En cajapadre1 creo una pequeña caja (caja1) y la posiciono con float: left. Dentro de cajapadre2 colo otras dos cajas (caja2 y caja3) y también las posiciono con float:left. La cosa es que caja2 y caja 3 se posicionan dejando un espacio en blanco a su izquierda. ¿Podéis explicame porqué?

Código:

<html>
<head> <title> Prueba posicionamiento con cajas</title>

<style type = "text/css">

.cajapadre{width: 300px; height: 300px; border: 2px solid black;}
.cajapadre2{width: 200px; height: 200px; border: 2px solid black; position: relative; top:100px;}
.caja1{width: 50 px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja2{width: 50 px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja3{width: 50 px; height: 50px; border: 2px solid pink; margin: 5px;  float: left;}

</style>
</head>

<body>

<div class = cajapadre>
	<div class = caja1>Caja 1</div>
	<div class = cajapadre2>	
			<div class = caja2>Caja 2</div>
			<div class = caja3>Caja 3</div>
	</div>
</div>

</body>

</html>

Gracias y un saludo.

ArturoGallegos · #2 (**permalink**) 25/08/2010, 11:07

podrías empezar por crear un código valido, repasa las reglas css y html

tu codigo deberia ser

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Prueba posicionamiento con cajas</title>
 
<style type = "text/css">
 
.cajapadre{width: 300px; height: 300px; border: 2px solid black;}
.cajapadre2{width: 200px; height: 200px; border: 2px solid black; position: absolute; top:100px;}
.caja1{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja2{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja3{width:50px; height: 50px; border: 2px solid pink; margin: 5px;  float: left;}
 
</style>
</head>
 
<body>
 
<div class="cajapadre">
    <div class="caja1">Caja 1</div>
    <div class="cajapadre2">
            <div class="caja2">Caja 2</div>
            <div class="caja3">Caja 3</div>
    </div>
</div>
 
</body>
</html>

nota: tu problema es por
.cajapadre2{width: 200px; height: 200px; border: 2px solid black; position: relative; top:100px;}

debe ser absolute

Caquilla23 · #3 (**permalink**) 25/08/2010, 11:30

Muchas gracias por indicarme donde está el problema, pero pordrías indicarme la razón de que la propiedad position del elemento padre afecte al float de las cajas?

Perdón por las molestias.

Gracias y un saludo.

Caquilla23 · #4 (**permalink**) 25/08/2010, 11:50

Vale, ya he caído de la burra.

Al utilizar un position:relative la cajapadre2 se desplaza verticalmente la altura indicada pero manteniendo la relación existente con las demás cajas, igual que si no existiera el posicionamiento, y por lo tanto las cajas2 y 3 mantienen su relación con la caja 1.

Al utilizar position: absolute se corta la relación de cajapadre2 con cajapadre1 y caja1 y el float posiciona las cajas2 y 3 como quiero (sin tener en cuenta caja1).

Creí que al estar caja2 y 3 dentro de otro elemento, caja1 ya no sería tenido en cuenta directamente.

Gracias.

ArturoGallegos · #5 (**permalink**) 25/08/2010, 12:17

mas o menos es la idea, aunque me veo obligado a mencionarte la contra del position:absolute;, este al utilizar el atributo top:100px; se toma en relación a la ventana de tu explorador y no de tu cajapadre1... si deseas que sea en relación a cajapadre1 debes utilizar margin-top:100px;

ahora bien si lo que buscabas era solo que cajapadre2 se colocara por debajo de caja1, basta con aplicar un clear:left; en lugar de position:absolute; top:100px;

el clear se utiliza para indicar que termina el efecto float.

para lo cual:

clear:left es porque anterior mente usaste el float:left,
float:right deberias usar clear:right
float:left y float:right debe usarse clear:both

¡si estoy mal que alguien me corrija por favor!

kseso? · #6 (**permalink**) 25/08/2010, 12:29

Cita:

La cosa es que caja2 y caja 3 se posicionan dejando un espacio en blanco a su izquierda. ¿Podéis explicame porqué?

Sin entrar en otras cuestiones de su código, pues sólo está probando, apostaría que el espacio que dejan entre sí es de 10px, y el de caja 2 con el borde de su ancestro es de 5px, ni uno más ni uno menos.

Y no, no soy adivino, es lo que le dice que deben hacer en su código ;)

Cita:

.caja2{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
.caja3{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}

Caquilla23 · #7 (**permalink**) 25/08/2010, 13:30

Cita:

Iniciado por kseso?

Sin entrar en otras cuestiones de su código, pues sólo está probando, apostaría que el espacio que dejan entre sí es de 10px, y el de caja 2 con el borde de su ancestro es de 5px, ni uno más ni uno menos.

Y no, no soy adivino, es lo que le dice que deben hacer en su código ;)

En realidad me refería a que caja 2 y 3, estando dentro de cajapadre2 y posicionados con float: left dejan un espacio a su izquierda equivalente a caja1 aunque estén posicionadas 100px más abajo.

Un saludo.

Caquilla23 · #8 (**permalink**) 25/08/2010, 13:32

Cita:

Iniciado por Ag666

mas o menos es la idea, aunque me veo obligado a mencionarte la contra del position:absolute;, este al utilizar el atributo top:100px; se toma en relación a la ventana de tu explorador y no de tu cajapadre1... si deseas que sea en relación a cajapadre1 debes utilizar margin-top:100px;

ahora bien si lo que buscabas era solo que cajapadre2 se colocara por debajo de caja1, basta con aplicar un clear:left; en lugar de position:absolute; top:100px;

el clear se utiliza para indicar que termina el efecto float.

para lo cual:

clear:left es porque anterior mente usaste el float:left,
float:right deberias usar clear:right
float:left y float:right debe usarse clear:both

¡si estoy mal que alguien me corrija por favor!

Otra opción para que cajapadre2 tenga como referencia para desplazarse la cajapadre1 utilizando position:absolute sería aplicando position:relative a cajapadre1, puesto que position:absolute toma como refencia de coordenadas el primer elemento padre que esté posicionado

Clear:left ->es para que no se pueda posicionar ningún elemento a la izquierda del elemento con dicha propiedad.
Clear: right ->...
Clear: both -> utilizado para que ningún elemento se pueda posicionar horizontalmente respecto al elemento con dicha propiedad.

Creo...

Un saludo.

kseso? · #9 (**permalink**) 25/08/2010, 14:09

Échenle un vistazo a esta guía
http://www.araudi.net/migracion/migr...sin_dolor.html
Creo que la encontrarán clarificadora.
Lo relativo a los diferentes valores para /position/ sus propiedades y características están al final de la misma.
Créditos: Mikmoro

Caquilla23 · #10 (**permalink**) 25/08/2010, 14:32

Gracias por el enlace. Está muy bien.

Yo estoy siguiendo la guía de www.librosweb.es

Un saludo y gracias por todo.