28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens vers vous car je rencontre un petit soucis. Je réalise une galerie de visuel pour un site et, à la base, j'utilisais un script (la librairie Isotope avec masonry), mais le script m'empêchait de faire pas mal de choses importantes. C'était le script qui dirigeait le code et non moi.

J'ai donc décidé d'essayer de faire le portfolio sans les scripts. J'ai presque réussi à faire tout ce que je souhaitais sauf une chose. J'ai utilisé un flottement à gauche pour que les visuel soient les uns à côté des autres, mais tous n'ont pas le même format, ce qui donne ça :

http://img11.hostingpics.net/pics/455845probl.jpg

J'aurai voulu enlever le plus possible ces "trous". Pour ça, j'avais entendu parler d'un bout de code qui permettait de retirer ces espaces, mais j'au beau chercher, je ne le trouve plus. Peut être que ce bout de code, je l'ai halluciné Smiley lol je ne sais pas.

Si vous avez une idée ? Je suis preneur. Merci d'avance Smiley smile
Une solution radicale pour un alignement horizontal parfait, tu figes la "height" de tes img dans ta liste.
Chaque images de ta liste doit faire la même taille (en hauteur), plus de soucis d'espace blanc.

CSS :
img {height: ma taille en pixel ;}
Ah oui ! D'accord. Je ne peux pas faire ça. Il faut garder la taille originale des images. Ils veulent quelque chose de type non structuré donc pas de grille.

J'aurai utilisé cette méthode si mes collègues avaient choisi une structure en grille, mais malheureusement ce n'est pas ce qu'ils veulent.
Modifié par Terrhil (26 Feb 2015 - 15:51)
Administrateur
Bonjour,

c'est un peu le but de Masonry au départ que de réaliser une mise en page sans trou alors que ce n'est pas possible en CSS pur (dans le cas général, du moins).
Je sais et je l'avais utilisé pour ça, mais certains changements dans le css ne veulent pas être pris en compte par Masonry et/ou font buguer Masonry