Des li avec des height différent

Bonjour,
j'ai un problème avec l'utilisation des ul li.
j'ai créé une liste comportant entre chaque <li></li> une images.
chaque Li à un float:left pour que mes images s'affiche horizontalement.
J'utilise une liste pour que lorsque je n'ai plus de place horizontalement ça aille automatiquement à la ligne. Mais j'ai un problème car mes images non pas toute la même taille. Ce qui fait que les images qui devrait se trouvé à gauche en dessous de la première ligne se retrouve en fait en dessous à gauche de l'image la plus haute.
Comme c'est pas très facile à expliqué je vais mettre une image .

Bonjour maniT4c

Je ne suis pas certain que la méthode que tu utilises soit très conforme... Une balise "ul" peut-elle contenir autre chose que des "li" ?

Pour le même cas de figure, j'ai utilisé des listes de définition et imposé la hauteur pour la balise "dl".

Peut-être que ça ne répond pas complètement à ta question, par exemple si tu ne connais pas la taille maxi de la plus grande image, mais ça peut être une bonne base
Modifié par dominique (10 Oct 2006 - 13:45)

je te rassurej e n'ai que des li dans mes ul (j'ai du mal m'exprimé ) mais je ne peux pas définir de hauteur fixe à mes <li> .

'lo,

Tu veux répartir ta liste sur deux lignes avec les images alignées sur leur bord supérieur ?

Mets-nous une capture d'écran du résultat escompté si tu veux bien (un ptit coup de logiciel de dessin type Photoshop).

Il faudrait que les <li> soient tous de la même taille...

J'aien effet opter pour l'option avec des LI de la même taille. Mais j'avoue que ce n'est pas la solution que je voulais réellement. L'idéal serait que la ligne suivante s'adapte correctement par rapport à la hauteur de la ligne précédente comme sur cette image. (désolé c très moche comme montage ).

Bonjour

Ben ! je ne comprend pas, en imposant une taille aux "li", tu devrais obtenir l'alignement que tu nous montres...

Autre solution, éventuellement, serait d'imposer un nombre d'images par ligne et les inclure dans une div qui prendra d'office la taille de la plus grande image... Mais on retombe toujours dans le même piège, tant que n'impose pas une taille maxi pour les images, tu ne saura pas non plus combien il peut y en avoir par ligne.

A un moment ou un autre, une donnée inconnue de trop ne permet pas une réalisation idéale

Editer : Après réflexion... C'est vrai que tu travailles sur une liste... Dans ce contexte, à la place de la div, il faudrait un "ul" par ligne... Mais ce n'est pas très génial...

Dernière solution, le tableau... Mais tu devras quand même fixer un nombre de colonnes, ce qui n'est pas évident si tu ne connais pas la taille maxi des images. Le tableau ne serait pas utilisé pour une mise en page, mais bien pour afficher des données textes liées à une donnée graphique
Modifié par dominique (12 Oct 2006 - 09:26)

si je fixe une hauteur à mes LI je vais mle retrouver dans certain cas avec un blanc entre la ligne du haut et celle du dessus (qui paraitra visuellement illogique).

Pour reprendre le screenshot que j'ai montré.
La première ligne à une hauteur de 220px qui correspond à la taille de l'image du pocket pc. La deuxieme ligne à une hauteur de 150px qui correspond à l'image du "spider".
Si je fixe une hauteur à mes LI je vais avoir une hauteur de 220px partout, donc la 3eme ligne (toujours dans mon exemple) ne sera pas collé à la ligne précédente.

Bonjour,

tu peux regarer le fil suivant: http://forum.alsacreations.com/topic-4-18461-1-Galerie-dimages-de-tailles-diffrentes--problme-.html, nous en avons discuté.

Le conclusion, c'est qu'il faut fixer la hauteur, sinon l'effet float:left fait que l'image est placée le plus haut possible.

Bon courage.