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.

Le principe

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 styles telles qu'elles sont implémentées dans les navigateurs.

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;
}

Explications

Code standard

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

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

Compatibilité avec Internet Explorer

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;

Démonstration

Comment réaliser un blog.
Des sites web originaux.
Anatomie du moteur de recherche de Google.

Les brevets aux USA, un système à la dérive.
Second Life. Connaître les acteurs du Web, leurs produits.
Entrer dans un monde fractal, une démonstration graphique.

Voir aussi

Alignement vertical d'images.
Text-shadow. Une ombre sous les caractères.