[Résolu] Miniature en float left qui reste à droite

Salut à tous,

Je dois pour un ami peintre réaliser une galerie de tableaux. Pour cela, j'ai créé une première page qui regroupe tous les tableaux d'une galerie sous forme de miniatures (il y a en tout 3 galeries différentes).
Vous pouvez voir un exemple à cette adresse.

Voila la partie css qui conserne la galerie :

ol#miniatures li {
  position: relative;
  float: left;
  padding-left: 1.2%;
  padding-bottom: 2%;
  padding-top: 2%;
}

ol#miniatures li a:link, ol#miniatures li a:visited {
  display: block;
  white-space: nowrap;
  border: 1px solid #BBB;
}

ol#miniatures li a:hover {
  border: 1px solid black;
  background-color: #cfcfcf;
}

ol#miniatures li a img {
  border: 0;
  display: block;
  padding: 5px;
}

Comme vous pouvez le voir sur l'exemple, la 7ieme miniature se trouve toujours à droite alors qu'elle est en float:left;. Ce petit problème survient autant sur Firefox, Opera que sur IE.

Je fait donc appel à vous pour savoir si l'un de vous aurait le feux sacré pour m'aider à résoudre mon problème.

Merci d'avance à tous
Modifié par ymhotepa (27 Nov 2005 - 16:07)

Bonjour,

Le float left flotte bien à gauche, en dépit des apparences Mais il se trouve simplement que la 5e image étant plus haute que les deux autres de la même ligne, elle "bloque" la 7e à la place restant libre à sa droite, et l'empêche de "glisser" jusqu'au bord gauche du conteneur. La 7e image ainsi placée repousse à son tour les deux dernières images à la "ligne" suivante.

Pour corriger, donner simplement une hauteur fixe aux élément <li> flottants,égale ou supérieure à celle de l'image la plus haute.
Modifié par Laurent Denis (26 Nov 2005 - 18:48)

Merci beaucoup à toi laurent pour ton aide. Il faudra que tu me donnes ton secret pour voir ces si petits détails. Je pense que la force est avec toi.

à moins que le secret soit dans les brocolis?

Bonsoir,

Ce petit problème est simplement assez fréquent et donc aisément repérable.