De manière assez classique, l'utilisation de la balise <a></a> permet de rendre une portion de texte cliquable afin de pouvoir atteindre un autre document sur le site ou sur le web. Exemple : MaxiMoi200 : Cartes de voeux.

Voici l'objectif recherché dans ce billet : rendre une zone entière cliquable, et pas seulement le texte qu'elle contient.

Dans l'exemple 1, une zone DIV contient un lien hypertexte. Seul le texte est cliquable.
Dans l'exemple 2, une zone DIV contient un lien, mais toute la zone est cliquable.

exemple 1 :

<div style="width:100px;height:50px;border:1px solid #999999;text-align:center;">
<a href="http://www.maximoi200.com">MaxiMoi200 </a>
</div>

exemple 2 :

<div style="width:100px;height:50px;border:1px solid #999999;text-align:center;">
<a href="http://www.maximoi200.com" style="display:block;width:100%;height:100%;">MaxiMoi200 </a>
</div>

A quoi tient la différence entre les deux ? Nativement, en HTML, il existe deux principales familles de balises. Les balises de mise en forme de texte "en-ligne", et celles de mise en page du contenu "bloc". Pour plus d'explications sur la différence entre les deux je vous conseille le lien suivant sur alsacreations : Comprendre la structure des balises bloc et en-ligne. Il est nécessaire de maîtriser ces notions pour aller plus loin en CSS.

La balise hyperlien A est de type "en-ligne". En effet, elle a pour but d'enrichier le contenu du texte. Comme toutes les balises "en-ligne", elle n'a pas de dimension et ses propriétés sont dictées par le texte dans lequel elle est insérée. C'est pour cela que dans l'exemple 1, seul le texte lui même est cliquable: la zone "colle au texte".

Pour rendre une surface entière cliquable, au-delà du texte, il est donc nécessaire que son affichage soit de type "bloc". En effet, les éléments de type "bloc" ont une surface active contrôlable : hauteur et largeur notemment (c'est le cas des balises DIV, P etc...).

En CSS, il est possible de forcer le type d'affichage des éléments. Ainsi, afin de profiter de l'aspect cliquable de la balise A mais aussi de l'effet de surface d'un élément de type "bloc", nous allons utiliser la propriété CSS "display". <a href="http://..." style="diplay:block;width:100%;height:100%;">

"display:block" indique au navigateur que même si la balise A est de type "en-ligne", il faut l'afficher comme si elle était "bloc". Il est alors nécessaire d'en spécifier la hauteur et la largeur. Ici, on décide d'étendre la balise à toute la surface du conteneur.

Voilà comment on peut rendre une zone cliquable, avec toutes les applications que l'on peut trouver.