Cuadricula de Contenido Dinámica (DIV+CSS) //ayuda

[abbo]

Buen foro este, mi primer post.

Estoy desarrollando una parrilla, cuadricula, "grid", de contenido donde se muestran unos datos que serán introducidos manualmente, los largos de los bloques varian. La ventaja de hacerlo como lo tengo pensado, esque los bloques se acomodan unos arriba de otros si el wrapper se hace mas peque o mas grande, prueben redimencionando el navegador en los sitios que les adjunto.

Mi problema en este momento es que no logro hacer que los bloques div, se acomoden unos encima de otros, como en el siguiente sitio:

http://www.leidsfilmfestival.nl/nl/
http://www.cheetos.com/

En lugar... quedan espacios en blanco (vacios) porque no logran acomodarse:

http://www.bsntor.com.mx/testgrid/test.html


Este es el codigo que tengo para el contenedor de cada bloque.

.diplomados-quad{
float:left;
width:200px;
margin-right:5px;
margin-left:5px;
margin-bottom: 20px;
padding:10px;
background-color:#585858;

border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius: 5px;
}

Espero alguno pueda ayudarme, saludos!

[exxqizofrenicoo]

hola el tema de porque no funciona el tuyo y el de cheetos si es que el lo tiene pensado de otra forma, si lo miras con el firebug te das cuenta ya que ellos no generan un div con contenido ellos generan un div con id block creo que mide siempre vamos a ponerle 500px de alto, pero adentro de este div block tienen otros div que son los que ves en pantalla entonces que pasa estos de adentro no son los que hacen el efecto sino los block entonces como todos miden lo mismo 500px cuando no entran en pantalla bajan y no se traban con alguno que sea mas alto ya que todos miden lo mismo.

medio complicado de explicarlo pero si lo ves con firebug esta clarisimo como es el funcionamiento que le buscaron. todos los div block miden lo mismo entonces ninguno traba a otro al bajar de renglon.

yo lo que haria en tu casa seria un div block de una medida justa y despues variar los div de adentro con la altura que quieras.
por ejemplo tener 2 div de 100px de altura luego uno solo de 300px y luego 2 mas de 100 px completando los 500px.

nose si me explique bien ya que es medio complicado de explicar.

[exxqizofrenicoo]

mira te dejo unas vistas del firebug de la pagina para que veas como funciona

http://img843.imageshack.us/i/picture1s.jpg/

http://img832.imageshack.us/i/picture2e.jpg/

http://img844.imageshack.us/i/picture3.jpg/

lo que tiene borde serian los div de class block que tienen el float left y fijate son todos iguales de altura el tema es que tienen hijos diferentes entonces no tiene problema cuando bajan de fila

[abbo]

Muchas gracias Exxqi

Como se me pudo pasar, que tonto..., ya entiendo el punto en el caso de chetos, ahora veo claramente que todos esos bloques están del mismo alto, esta muy bueno el tip, para organizar info de diferentes tipos, gracias una vez mas.


Lo que quiero hacer es mas bien como el otro sitio, que tienen altos muy variables, por el hecho que el contenido que se pondría no siempre tiene altos definidos, pero si ancho.

Otro ejemplo mas parecido a lo que quiero lograr (en cuestion del acomodo), este es un sitio que solia ver (tiene mucho caido) aqui te paso el link de abril del bendito cache de google:


http://webcache.googleusercontent.com/search?q=cache:eJehPmiWIy4J:www.creativedepart.com/+creativedepart&cd=1&hl=en&ct=clnk


Estuve viendo el codigo de este con firebug, y parece ser que esta mas parecido al mio, en global.css viene .eachpost creo es el bloque, y viene solo position: absolute; haha, intente agregarlo en el mio, pero se junta todo arriba a la izquierda. Que estare haciendo mal?

Estarán usando un script especial en js?

[exxqizofrenicoo]

si ese efecto es con javascript ya que si probas desactivar tu javascript en el navegador ni te carga la pagina, mira estube mirando un poco el codigo fuente y es este archivo el que hace la magia.

grid-a-licious.js

despues segui buscando y creo que de aca te lo podes bajar.

http://cargocollective.com/suprb#17924

despues como usarlo no te digo porque nunca lo use.

Saludos

[abbo]

Perfecto, estuve viendo el contenido, y es un tema de wordpress, creo que es en el que se basaron para hacer este de "creative depart" por eso el nombre del script, esta muy muy bueno, muchas gracias, muy util la información.

Hice un poco de busqueda de este tipo de script y encontre esto:

http://desandro.com/resources/jquery-masonry/

Creo que con esto cualquiera que quiera hacer algo parecido aquí encontrara una manera documentada para implementarlo, incluso hasta animacion y filtros trae! :).

Ahora si a echarse un clavado en los docs para ver si puedo implementarlo en drupal (notese que no tengo ni idea de programacion :S), bueno haber como me sale, cualquier sugerencia en como implementar scripts en drupal es bienvenida.

Kudos !!