Foros del Web » Creando para Internet » CSS »

Ayuda Acomodando divs

Estas en el tema de Ayuda Acomodando divs en el foro de CSS en Foros del Web. Saludos. Bueno yo de nuevo aqui batallando con la posición de los div. Me esfuerzo para no usar la posición absoluta pero como cuesta. En ...
  #1 (permalink)  
Antiguo 14/04/2009, 11:50
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Ayuda Acomodando divs

Saludos.

Bueno yo de nuevo aqui batallando con la posición de los div. Me esfuerzo para no usar la posición absoluta pero como cuesta.

En esta página http:///vtx-cr, como verán trato de acomodar las cajas con las imagenes y texto de forma que me queden de 4 en 4 por linea. pero no he logrado mi objetivo.

el css de el contenedor de todo el centro es este:
Código CSS:
Ver original
  1. #centro_gallery{ /*este contiene todo lo de adentro*/
  2.     position:relative;
  3.     top:0px;
  4.     width:780px;
  5.     height:100%;
  6. }
  7. #categorias_txt{  /* este contiene el texto de las categorias*/
  8.     position:relative;
  9.     width:168px;
  10.     height:100%;
  11.     top:26px;
  12.     left:26px;
  13.     float:left;
  14. }
  15. #templates_container{  este contiene las cajas con los templates*/
  16.     position:relative;
  17.     width:545px;
  18.     height:100%;
  19.     top:26px;
  20.     left:35px;
  21.     marging-right:15px;
  22. }

Ahora los div que contienen las imagenes y el texto que se ve, sus 4 primeros div estan así:
Código CSS:
Ver original
  1. #box1{
  2.     height:218px;
  3.     width:117px;
  4.     float:left;
  5. }
  6.  
  7. #box2{
  8.     height:218px;
  9.     width:117px;
  10.     left:10px;
  11.     float:left;
  12. }
  13. #box3{
  14.     height:218px;
  15.     width:117px;
  16.     left:10px;
  17.     float:left;
  18. }
  19. #box4{
  20.     height:218px;
  21.     width:117px;
  22.     left:10px;
  23.     float:right;
  24. }
  25. #clear{ clear:both;}
y ahi ven el resultado, nada que ver.
Curiosamente abajo se acomodan mejor que arriba y no se porque. Los de abajo estan así:
Código Css:
Ver original
  1. #box5{
  2.     position:relative;
  3.     height:218px;
  4.     width:117px;
  5.     margin:10px 10px 10px 0px;
  6.     float:left;
  7. }
  8. #box6{
  9.     position:relative;
  10.     height:218px;
  11.     width:117px;
  12.     margin:10px 10px 10px 0px;
  13.     float:left;
  14. }
  15. #box7{
  16.     position:relative;
  17.     height:218px;
  18.     width:117px;
  19.     margin:10px 10px 10px 0px;
  20.     float:left;
  21. }
  22. #box8{
  23.     position:relative;
  24.     height:218px;
  25.     width:117px;
  26.     margin:10px 10px 10px 0px;
  27.     float:right;
  28. }
arriba les quite el position :relative porque me habian dicho por aqui que el float y el relative no se llevan muy bien.

El otro punto es que no entiendo muy bien lo de que el div valla creciendo segun el contenido, yo les puse height:100% a los contenedores grandes, pero parece que no estan trabajando.

Bueno espero haber sido claro , este brete me tiene cansado
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #2 (permalink)  
Antiguo 14/04/2009, 12:15
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

Bueno acabo de ver tambien que me esta reconociendo solo como un 70% del ancho del

#templates_container{ este contiene las cajas con los templates*/
position:relative;
width:545px;


no esta usando el ancho indicado, de ahi que tire uno de los div box para abajo
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 14/04/2009, 12:17
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

Perdona gVenom,
pero no se solucionaría todo con un sólo código para todas las cajas:

.box{
height:218px;
width:117px;
margin:10px 10px 10px 0px;
}

Si haces esto, todas las cajas deberían ir una al lado de la otra y saltar de línea cuando topa con algo en el flujo del documento.
Si lo tienes medido para cuatro, así debería funcionar.
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #4 (permalink)  
Antiguo 14/04/2009, 12:28
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

Cita:
Iniciado por Aresillo Ver Mensaje
Perdona gVenom,
pero no se solucionaría todo con un sólo código para todas las cajas:

.box{
height:218px;
width:117px;
margin:10px 10px 10px 0px;
}

Si haces esto, todas las cajas deberían ir una al lado de la otra y saltar de línea cuando topa con algo en el flujo del documento.
Si lo tienes medido para cuatro, así debería funcionar.
jaja, pues no se, yo lo pense asi pero no supe como hacerlo. Pero si le pongo .box, tengo que ponerle al html <class="box"> cierto? y yo a algunos ya les tengo el style algo, no afecta?
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 14/04/2009, 12:35
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

pues haz un estilo para las cajas que englobe el que tenías y las nuevas especificaciones...

No sé si se pueden poner dos clases...

Lo que seguro que puedes hacer es pillarlo mediante selectores.
Por ejemplo, yo las cajas las metería en una lista de cuatro. y después otra y así...
entonces sería fácil poner:
#nombredivgrande ul li {*/y las especificaciones que te decía.../*}

Sino a ver si te lo puedo mirar...sino, se lo digo a willy!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #6 (permalink)  
Antiguo 14/04/2009, 12:38
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

oye tenias razon con eso, ya las cajas se acomodanbien, ahora queda el detalle de que el div que contiene esos box no reconoce el ancho que le puse, solo un 70 % mas o menos.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 14/04/2009, 12:43
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

no puedo mirarlo el la web porque la música me pone de los nervios!!

Te refieres a la galería central?
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #8 (permalink)  
Antiguo 14/04/2009, 12:50
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

A este div, añadele esto:

#templates_container {
/*lo que ya tienes*/
float:left;
}

Y a este, esto:
#bottom {
/*lo que tenías*/
clear:both;
}

Y te explico, en el primer caso lo que tenías es un ancho predeterminado en el div de la izda, al ponerle el float:left entonces, el documentos sigue su flujo. Primero la columna de la izda, después la de la dcha.

El segundo cambio, es porque al realizar el anterior el pie o bottom como lo tienes tu, se subía. Al ponerle clear:both, salta de línea porque quiere decir que se queda libre por ambos lados ese div.
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #9 (permalink)  
Antiguo 14/04/2009, 12:51
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: Ayuda Acomodando divs

Cual música? la de mi flash? jaja, si tengo que cambiarla y ponerle un stop por ahi, pero eso es facil. Ok aqui en esta parte:

Código Css:
Ver original
  1. #centro_gallery{
  2.     position:relative;
  3.     top:0px;
  4.     width:780px;
  5.     height:100%;
  6. }
  7. #categorias_txt{
  8.     position:relative;
  9.     width:168px;
  10.     height:100%;
  11.     top:26px;
  12.     left:26px;
  13.     float:left;
  14. }
  15. #templates_container{
  16.     position:relative;
  17.     width:557px;
  18.     height:100%;
  19.     top:26px;
  20.     left:45px;
  21.     right:10px;
  22. }

centro_gallery contiene a los dos que estan abajo, categorias es el div con el texto y las categorias de diseño, y esta a la iz de templates container que es el que contiene los box, el ancho queda apenas con la página, pero en la web no lo reconoce, y no caben los box a lo ancho, solo deja 2. Miralo en la página , te voy a quitar el flash mientras jeje
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #10 (permalink)  
Antiguo 14/04/2009, 12:52
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

no te preocupes, lee el mensaje anterior que ya te lo solucionaba.
Y lo de las música te lo he bloqueado
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #11 (permalink)  
Antiguo 14/04/2009, 13:00
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

Oye excelente, justo como lo dices. Gracias Aresillo, ahi vamos aprendiendo poco a poco.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #12 (permalink)  
Antiguo 14/04/2009, 13:25
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Ayuda Acomodando divs

De nada, un placer
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
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 21:11.