Steve Frécinaux

Bordures

Les bordures personnalisées autours des images, tout le monde en veut. C’est joli, c’est “mode”, mais ça a un petit inconvénient, c’est que ça nécessite souvent de “préparer” le balisage HTML d’une quelconque façon, comme par exemple en entourant la balise <img/> par une <div>, comme dans l’article CSS Drop Shadows sur A List Apart.

Cependant, dans certains cas, cette débauche de moyen n’est pas nécessaiere. C’est en particulier le cas quand les images auxquelles on veut appliquer une bordure a une taille connue à l’avance, comme c’est le cas sur de nombreuses galeries de photos, ou bien si la taillevde l’image fait partie d’une gamme limitée de tailles disponibles.

L’astuce consiste simplement à appliquer un arrière-plan sur l’élément image, via CSS, et d’ensuite jouer sur les paddings pour positionner correctement l’image par rapport au fond. C’est idiot, mais on n’y pense pas souvent, donc je vous le rappelle… :)

[Lampion]

Cette façon de faire, qui peut sembler peu orthodoxe au premier abord, est néanmoins comprise par tous les navigateurs récents (Mozilla, Safari, Konqueror, Opera), et même par Internet Explorer 6 pour Windows, mais en mode « Standard ». Néanmoins, l’absence de cette bordure n’est pas vraiment ce qu’il y a de plus contraignant pour le visiteur, et avec un simple petit hack, on peut lui substituer une bordure classique.

Pour l’exemple ci-dessus (sur lequel vous pouvez cliquer pour masquer le fond de l’image), voici le code associé à l’image :

<img src="lampion.jpg" alt="[Lampion]" class="bordure_250x220">

.bordure_250x220 {
   border: 0;
   padding: 1px 9px 9px 1px;
   width: 250px;
   height: 220px;
   background: transparent url(background.png) no-repeat 0 0;
}