Dt et background

Bonjour à tous,

J'ai un petit soucis avec le menu de mon site.

Le menu ce présente sous cette forme (j'ai simplifié pour pas surchargé le message) :

  <dl id="menu2">
    <dt><a href="#" target="name_iframe2" title="">1</a></dt>
    <dt><a href="#" target="name_iframe2" title="">2</a></dt>
    <dt><a href="#" target="name_iframe2" title="">3</a></dt>
    <dt><a href="#" target="name_iframe2" title="">4</a></dt>
    <dt><a href="#" target="name_iframe2" title="">5</a></dt>
  </dl>

Et la feuiile de style comme ceci :

#menu2 dt {
 cursor: pointer;
 width:100%
 line-height: 20px;
 margin: 2px 0;
 border: 1px dotted #99cc99;
 text-align:left;
 font-familly:arial;
 font-size:13px;
}

#menu2 dt a {
 text-decoration:none;
 font-familly:arial;
 font-size:11px;
 color:#0000ff;
}

#menu2 dt a:visited {
 text-decoration:none; 
 font-familly:arial;
 font-size:11px;
 color: #ff0000;
}

#menu2 dt a:hover {
 font-familly:arial;
 font-size:11px;
 text-decoration:underline;
 background:#3B5393;
}

L'ennui c'est que la couleur de fond ne colore que le texte des liens et non "la cellule" en entier. Comment colorer toute la cellule ?

Un exemple sur ce site pour être plus clair.

http://www.formaguide.com

Ils ont choisi d'utiliser une image pour colorer la cellule au pasage de la souris. Mais moi je n'aurai pas toujours la même hauteur pour chaque cellule. Le texte étant un peu long.

Merci pour votre aide

diabolo

Bonsoir Diabolo,
Pour commencer tu as du code superflu qui alourdit ton code css
le code allégé et commenté

#menu2 dt {
 cursor: pointer;
 width:100% /*par utile en principe puisque que cet élément de type block doit prendre toute la largeur disponible, mais peut corriger certain bug...*/
 line-height: 20px;
 margin: 2px 0;
 border: 1px dotted #99cc99;
 text-align:left;
 font-familly:arial, sans-serif; /*manquait la police generique*/
 font-size:13px;
}
#menu2 dt a {
 text-decoration:none;
 font-familly:arial;
 font-size:11px;
 color:#0000ff;
}

#menu2 dt a:visited {
 text-decoration:none; 
 color: #ff0000;
}

#menu2 dt a:hover {
 text-decoration:underline;
 background:#3B5393;
}

Tu n'a pas besoin de répéter les propriété de police puisque les pseudo-classes (hover..) héritent du <a>

a écrit :
L'ennui c'est que la couleur de fond ne colore que le texte des liens et non "la cellule" en entier. Comment colorer toute la cellule ?

Les lien sont des élément de type inline, c-a-d que cela génère
une boîte en-ligne qui s'adapte à son contenu dépendant de la valeur du line-height donc le background ne s'affiche que à travers cette bôite.
Pour que tes lien prennent toute la largeur de leur conteneur,
tu dois leur appliquer un display:block.
Quant à la hauteur il faut parfois ajouter des padding verticaux aux liens.