CSS débutants

Celle que j'utilisais au début a fait débat. Au vu des différents commentaires, suggestions et critiques, on peut l'abandonner au profit de celles qui suivent.

Fonctionne avec :

• FireFox
• NS 6/7
• Mozilla 1.x
• Opéra 7
• MSIE 5+
• Safari

Attributs utilisés :

• background-image
• background-repeat
• background-position
• padding-left

Le guillemet est ici une image qui va être déclarée en image de fond (background-image) associé au a:hover (lien survolé) dans la feuille de style. Afin qu'elle n'apparaisse pas en mozaïque, on indiquera l'option no-repeat à l'attribut background-repeat. Reste à positionner correctement l'image par rapport au texte : à l'attribut background-position on indique les positions relatives à la ligne (horizontale - verticale). Le padding-left indique le retrait que prendra le texte lors du survol de la souris afin qu'il ne recouvre pas l'image.

<div id="menu">
  <p>
    <a href="#">menu 1</a><br />
    <a href="#">menu 2</a><br />
    <a href="#">menu 3</a>
  </p>
</div>

#menu a:hover 
{
  background-image:url(images/guill_rouge.png);
  background-repeat:no-repeat;
  background-position:1% 50%;
  padding-left:15px;
}

Résultat

Fonctionne avec :

• FireFox
• Mozilla 1.3+
• Opéra 7

Attributs utilisés :

• content
• background-image
• background-repeat

La méthode précédente interdit forcement une autre image de fond... Pour pouvoir combiner image de fond (ici gris_anim.gif) et guillemet, on peut utiliser l'attribut content et la pseudo-classe before.

Attention, MSIE 5.x et 6 n'implémentent pas ces propriétés, mozilla ne comprend la combinaison a:hover:before qu'à partir d'une version supérieure à 1.2.

#menu a:hover 
{ 
  background-image:url(images/gris_anim.gif);
  background-repeat:no-repeat;
}
 
#menu a:hover:before 
{ 
  content:" » ";
}

Résultat théorique en image :

Voir le résultat en ligne.