Casse-tête CSS !

[Sim le pirate]

Je rencontre un petit casse-tête css pour la réalisation d'un site pour un photographe.
On retrouve sur pas mal de pages une gallerie de thumbnails avec effet lightbox.

Je cherche à obtenir cela :

Mais n'obtiens que ceci :

Des idées ??
merci d'avance

 

[Benjamin D.C.]

J'imagine que le nombre de miniatures est variable?

 

[Sim le pirate]

J'imagine que le nombre de miniatures est variable?

Salut Benjamin !

Oui, çà aurait été trop facile !!

 

[grumff]

5 div en float:left pour faire les colonnes, et quelques empilements d'autres div dans les colonnes en question pour faire les lignes, rien de bien sorcier non ? Ou alors un bon vieux tableau. =)

 

[Sim le pirate]

5 div en float:left pour faire les colonnes, et quelques empilements d'autres div dans les colonnes en question pour faire les lignes, rien de bien sorcier non ? Ou alors un bon vieux tableau. =)

C'est très simple pour du contenu statique... mais il y a un cms derrière (Drupal) et donc un client qui peut charger 6 comme 45 images...

 

[dmo95]

Et bien il faut que tes classes CSS s'ajoute dynamiquement au code avec PHP... Si tu arrives à le faire de manière statique, ce ne sera pas très compliqué de le rendre dynamique avec PHP... La complexité pourrait venir de l'analyse du code du plugin si tu en utilises un ?!

 

[Anonyme]

Peut-être en jouant avec inline-block? (pas testé)

 

[Benjamin D.C.]

Le résultat attendu n'est pas concevable en CSS pur. Le plus simple est de travailler par colonnes et, pourquoi pas, d'écrire un script qui équilibrerait au maximum la hauteur des colonnes en fonction de la taille des images.
Ceci dit, je trouve ça complexe à mettre en place si on veut bien faire les choses. Personnellement, j'opterais pour une solution plus simple telle que présentée sur ta deuxième capture d'écran…

 

[Sim le pirate]

Le résultat attendu n'est pas concevable en CSS pur. Le plus simple est de travailler par colonnes et, pourquoi pas, d'écrire un script qui équilibrerait au maximum la hauteur des colonnes en fonction de la taille des images.
Ceci dit, je trouve ça complexe à mettre en place si on veut bien faire les choses. Personnellement, j'opterais pour une solution plus simple telle que présentée sur ta deuxième capture d'écran…

Oui je pense que je vais m'en tenir à cette solution.. je ne pense pas que le jeu en vaille
la chandelle !

 

[Niconemo]

En fait si on regarde l'image d'exemple en tournant la tête de 90° vers la droite, c'est le comportement par défaut d'objets inline…

Du coup la solution pourrait être d'afficher cette suite d'image à l'asiatique : de haut en bas (au lieu de gauche à droite). Et le pire c'est que ça existe en CSS : writing-mode:tb-rl

Mais… (il faut bien un mais) ce n'est implémenté que sur Internet Explorer.