a{display:block;}, mon ami

Par Talou le samedi, mai 22 2004, 09:00 - CSS - Lien permanent

S'il est une propriété utile tant pour un menu que pour le titre d'une page dont on voudrait que le lien prenne toute la largeur, c'est bien display: block; appliquée à une balise de lien (a) !

Petite illustration. Nous construisons une liste de la forme :

<ul>
    <li><a href="#">lien 1</a></li>
    <li><a href="#">lien 2</a></li>
</ul>

avec la feuille de style :

ul{
    list-style:none;
    width:300px;
    margin:0;
    padding:0;
    border:1px green solid;
}
li {
    list-style:none;
    text-align:center;
    padding:0;
}

Si le lien est stylé comme ceci :

a {
    border:1px blue solid;
    width:100%;
    padding:0;
}

cela donne pas un lien sur toute la largeur (100%) du bloc parent :

en revanche :

a {
    border:1px blue solid;
    width:100%;
    padding:0;
    display:block;
}

le fait :

Second exemple : le titre de page.

Voici le code html suivant :

<div id="pageHeader">
	<h2><a href="#">Mon titre</a></h2>
</div>

Et sa feuille de style :

#pageHeader h2 a{
    background:#36C;
    width:100%;
    height:110px;
}

Voici ce qu'on obtient :

Mon titre

si maintenant je corrige la feuille :

#pageHeader h2 a{
    background:#36C;
    width:100%;
    height:110px;
    display:block;
}

nous obtenons :

Mon titre

Et le lien est actif sur l'ensemble de la partie en bleu !

Edit : correction du titre (petite coquille...) Merci Sibélius pour l'avoir signalé !

Edit 2 : A noter les commentaires pertinents de notre éleveur de choucroute national, au bas de ce billet

Commentaires

1. Le samedi, mai 22 2004, 11:16 par Sibelius: Oui, on peut faire des choses étonnantes avec une simple balise <a> (des rollovers puissants, des image maps,...).

Par contre, si je peux me permettre, c'est "block" et non "bloc" : ton titre et le texte porte à confusion.
2. Le samedi, mai 22 2004, 11:18 par Sibelius: Oubli : attention à bien noter qu'en tranfsormant <a> en block, elle se comportera exactement comme toutes les balises en bloc, c'est à dire qu'elle ira à la ligne et occupera toute la largeur disponible par défaut.
Il faudra la positionner en flottant ou en absolu/relatif si on veut deux <a> l'une à côté de l'autre par exemple.
3. Le samedi, mai 22 2004, 11:56 par Talou: C'est en effet important de préciser la transformation parce que c'est exactement l'explication du comportement décrit ! Merci pour l'info. Je l'ignorais.

Itinéraire Libre