Foros del Web » Creando para Internet » CSS »

Practicando posicionamiento

Estas en el tema de Practicando posicionamiento en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/08/2010, 10:27
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 15 años, 7 meses
Puntos: 0
Practicando posicionamiento

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.
  #2 (permalink)  
Antiguo 25/08/2010, 11:07
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Practicando posicionamiento

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

tu codigo deberia ser
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <title> Prueba posicionamiento con cajas</title>
  4.  
  5. <style type = "text/css">
  6.  
  7. .cajapadre{width: 300px; height: 300px; border: 2px solid black;}
  8. .cajapadre2{width: 200px; height: 200px; border: 2px solid black; position: absolute; top:100px;}
  9. .caja1{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
  10. .caja2{width:50px; height: 50px; border: 2px solid pink; margin: 5px; float: left;}
  11. .caja3{width:50px; height: 50px; border: 2px solid pink; margin: 5px;  float: left;}
  12.  
  13. </head>
  14.  
  15.  
  16. <div class="cajapadre">
  17.     <div class="caja1">Caja 1</div>
  18.     <div class="cajapadre2">
  19.             <div class="caja2">Caja 2</div>
  20.             <div class="caja3">Caja 3</div>
  21.     </div>
  22. </div>
  23.  
  24. </body>
  25. </html>

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

debe ser absolute
  #3 (permalink)  
Antiguo 25/08/2010, 11:30
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Practicando posicionamiento

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.
  #4 (permalink)  
Antiguo 25/08/2010, 11:50
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Practicando posicionamiento

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.
  #5 (permalink)  
Antiguo 25/08/2010, 12:17
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Practicando posicionamiento

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!

Última edición por ArturoGallegos; 25/08/2010 a las 12:24
  #6 (permalink)  
Antiguo 25/08/2010, 12:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Practicando posicionamiento

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;}
  #7 (permalink)  
Antiguo 25/08/2010, 13:30
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Practicando posicionamiento

Cita:
Iniciado por kseso? Ver Mensaje
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.
  #8 (permalink)  
Antiguo 25/08/2010, 13:32
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Practicando posicionamiento

Cita:
Iniciado por Ag666 Ver Mensaje
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.
  #9 (permalink)  
Antiguo 25/08/2010, 14:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Practicando posicionamiento

É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
  #10 (permalink)  
Antiguo 25/08/2010, 14:32
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Practicando posicionamiento

Gracias por el enlace. Está muy bien.

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

Un saludo y gracias por todo.

Etiquetas: posicionamiento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:35.