Problème de placement d'images mosaïque CSS

Bonjour à tous,

J'ai un blog sommaire sous blogger, et j'aimerais créer une sorte de mosaïque d'images toutes de la même taille avec des liens. Rien de bien sorcier pensais-je, mais je suis confronté à ce problème qu'on voit sur l'image : les deux premières sont décalées à hauteur différentes...



Le HTML

<div class="mosaique">
<img src="http://2.bp.blogspot.com/-M2xQ7PBdVGc/VPpPbq2-SOI/AAAAAAAAFOY/bjURgBmvom4/s1600/1%2BMagnum%2BJong-un%2B%231.jpg" />

<a href="..."><img border="0" src="http://4.bp.blogspot.com/-hqOmixKklic/VPpQLn7-1GI/AAAAAAAAFOg/XqA6vU-SKE8/s1600/2%2Bjukebox%2B%232.jpg" /></a>

<a href="..." ><img border="0" src="http://1.bp.blogspot.com/-6V8U32_JMqw/VPpQTPY3OcI/AAAAAAAAFOo/ZF0D5k513c8/s1600/3%2BFap%2Bfap%2Bfap%2Bfap%2Bteam%2B-%2B%233.jpg" /></a>

Le CSS

.post .mosaique {
 width:560px
}
.post .mosaique img {
 display:block;
 width:180px;
 height:180px;
 float:left;
 padding:0px;
 margin-left:0px;
 margin-right:5px;
 margin-bottom:5px;
 margin-top:0px
}

J’ai testé avec ou sans lien, j’ai utilisé un id plutôt qu’un class (même si je ne pense pas que ça ait le moindre impact), j’ai checké dans le CSS de Blogger et il n’y a rien qui pourrait les faire se comporter ainsi, donc je ne comprends vraiment pas. C’est d’autant plus frustrant que les autres fonctionnent nickel…

Bon voilà j'ai des connaissances un peu moisies en HTML/CSS, et mon pb est assez mineur, donc j'apprécierais votre compréhension

En tout cas merci d'avance !
Modifié par Roul (07 Mar 2015 - 02:49)

Qu'est-ce qui se passe si tu enlèves les <a href="...>?

Comme tu peux le voir dans le HTML, je l'ai fait pour la première, ça ne change rien... Merci quand même pour l'idée !

Oui pardon j'ai oublié de préciser que j'ai essayé pour toutes les autres, notamment les 2 qui posent problème en effet. Pas d'amélioration.

6l20 a écrit :
Bonjour,

As-tu essayé d'autres types de positionnement (table, table-cell, inline-block) ?
Quelles sont les propriétés associées aux liens ?
Aurais-tu une page de test en ligne ?

> Je n'ai testé aucun autre type, j'avoue ne pas souvent utiliser autre chose que le float. Par contre il me semble que l'option "table" est pas géniale géniale, du peu de souvenirs que j'aie. Je vais tester inline-block.
> Je n'ai aucune propriété spéciale liée au lien (à part un color:green quoi) et de toute manière j'ai essayé sans aucun lien, le problème reste le même...
> C'est un brouillon pour le moment, mais je peux le mettre en ligne si ça peut apporter quelque chose.

[EDIT (piaf)] Voici le lien. Ca s'affiche bien m'ai j'ai triché avec des margin-top sur les images qui posent problème, autant dire que c'est pas très beau et que ça laisse un trou béant au-dessus de la mosaïque...

J'ai essayé sur un .html en local, les images s'affichent nickel, donc je pense que ça doit venir de ma feuille CSS du blog, mais j'ai beau avoir fouillé toutes les propriétés aucun moyen de trouver ce qui pourrait gêner...

Merci à vous en tout cas
Modifié par Roul (07 Mar 2015 - 15:44)

gc-nomade a écrit :
bonjour,
...
inline-block est la valeur par defaut de display pour les images.
Cdt,

+1
La valeur de rendu par defaut des images, c'est inline, non ?