Galerie d'images: contrôler l'alignement

Pour contrôler l'alignement des images et commentaires dans une galerie en plusieurs colonnes et rangées, il faut utiliser des astuces afin de conserver la compatibilité avec tous les navigateurs, et notamment les anciennes versions d'Internet Explorer.

Les images sont placées dans une liste avec les balises <li> et la propriété CSS display:inline-block fait qu'elles sont juxtaposées et non plus alignée verticalement sous forme de liste.

Mais pour éviter les débordements, et la remise en cause de la structure quand les images ou le texte ont besoin d'un espace supplémentaire, il faut puiser dans les ressources des feuilles de style...

Le code HTML:

<ul class="gallery">
  <li><img ...><br>texte</li>
  <li>...
</ul> 

Une nouvelle liste est créée pour chaque rangée de la galerie.

Le code CSS:

.gallery li
{
display:inline-block; width: 158px;
min-height: 170px;
vertical-align:top; text-align:center;
padding:4px;
zoom:1;
*display: inline;
_height: 170px; border:none;
}

Démonstration

Explications

Le code suivant définit un cadre pour chaque image avec son texte, avec l'option inline-block, qui fait partie de la spécification CSS 2:

display:inline-block;
width:158px;
min-height:170px;
vertical-align:top;
text-align:center;
padding:4px;

Les autres options sont pour la compatibilité avec les anciens navigateurs.

Pour remplacer inline-block qui n'est pas supportée par Internet Explorer (avant la version 9), on utilise deux propriétés:

zoom:1;
*display:inline;

Placer un astérisque devant display assure que la propriété sera reconnue par Internet Explorer 7 seulement. La propriété zoom qui est ignorée par les autres navigateurs indique que l'image doit être affichée entièrement et a des effets corollaires sur l'alignement.

Et pour la compatibilité avec IE6:

_height: 170px;

Le code de soulignement n'est reconnu que par ce navigateur et la propriété donc ne compte que pour IE6, elle remplace min-weight qui n'est pas encore implémentée dans cette version.

Ajouter un cadre

On peut modifier la propriété border qui permet en option de créer un cadre, avec par exemple:

 border:1px solid gray; 

Voir aussi