<hier>WEBLOG</hier>

Jeudi 19 Février 2004 | link |

Y'a un truc...

Un très récent courrier m'interrogeait sur la méthode que j'emploie pour faire apparaître des » lors du survol du lien dans le menu de navigation, et uniquement dans ce menu.

Rien de sorcier là-dedans, il faut utiliser les caractéristiques de la fonction display et les incorporer dans un bloc (<div></div>) à l'aide de l'attribut id ou class.

Code (x)html :

<div id="navigation">
<p>
<a href=""><span>»</span> menu 1</a>
<a href=""><span>»</span> menu 2</a>
<a href=""><span>»</span> menu 3</a>
</p>
</div>

Vous aurez remarqué que les fameux » sont encadrés par les balises <span></span> : c'est ce qui va permettre de leur appliquer un style particulier, en l'occurence de ne les faire apparaître que lors du survol de la souris (a:hover).

Code CSS

#navigation a {
display:block;	
}
#navigation a:hover { 
color:red;
}
#navigation a:link span {
display:none
}
#navigation a:visited span {
display:none
}
#navigation a:hover span {
display:inline
}
  1. display:block : ainsi inséré dans les propriétés de liens a, il permet d'avoir un retour de ligne automatique après chaque lien.
  2. display:none : masque les caractères de l'écran.
  3. display:inline : affiche les caractères à l'écran.

Résultat :

Précautions et compléments

Attention à l'emploi de id : cet attribut ne peut s'utiliser que de façon unique dans la page. Si cette mise en forme doit se reproduire à différents endroits de la page, il faudra utiliser l'attribut class (div class="navigation"). Dans le code CSS, les #navigation seront alors à remplacer par .navigation.

En savoir plus sur la propriété display (par Laurent Denis) :

Commentaires

Merci pour le truc du "block" ; ça m'évitera pas mal de <br />. Et aussi de l'explication claire de la différence entre id et class et #truc et .truc
Je passe à la pratique dès que j'ai le temps...
Bonne continuation !

LN - 19/02/03 - 09:23

Et quand les navigateurs seront un peu plus costauds (fonctionne déjà avec Gecko et Opera) :

css :

#navigation a {
display:block;	
}
#navigation a:hover { color:red;
}
#navigation a:hover:before {
content: "» ";
}

(x)html :

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

:o)

Darken - 19/02/04 - 12:15

Il y a une méthode "plus propre" dans le sens où il n'y a besoin de modifier que les feuilles de styles et pas le code html :

pour résumer, dans la pseudo class hover, il faut mettre une image de fond et augmenter le padding et le tour est joué.

Mr Peer - 20/02/04 - 15:12

Darken : oui, bien sûr, mais MSIE ne comprendra cela que dans... x n années ;-) ( Je parle de cette astuce d'ailleurs ici ).

Mr Peer : Il doit manquer quelque chose dans ton message, car j'ai du mal à en comprendre le sens.
Est-ce la même astuce que Darken que tu voulais donner ?

Pascale - 20/02/04 - 16:27

hop, vite fait : http://mr.peer.tribalix.com/mammouthland/

aprés, il faut jouer un peu avec la taille de l'image ou le positionnement du background pour que ça passe à peu prés de la meme maniere dans ie, moz & cie

Mr Peer - 24/02/04 - 10:40

Ok, c'est plus clair ;-). c'est effectivement une méthode interessante lorsqu'on a un joulie image à faire apparaître.
Cela dit, pour des simples », ou autre caractère alphanumérique, je crois que ma méthode suffit. En plus, ça ne pose pas de problème de positionnement à étudier de près :-p

Pascale - 24/02/04 - 12:18

Je crois que Mr. Peer voudrait plutôt que les guillemets fermant soit des images au lieu d'être du texte. Ça éviterait d'avoir des guillemets fermants non sémantique dans le code.

be-rewt - 24/02/04 - 15:10

J'ai oublié de préciser cela : bien entendu il ne faut pas mettre des » comme ça, mais &raquo; ! ;-) (voir le source).

Mais ce n'est pas ça l'idée, c'est d'avoir des guillemets fermants sans guillemets ouvrants... Oui, c'est vrai sémantiquement parlant...

Pascale - 24/02/04 - 17:22

Deux énormités :

  1. les guillemets en question n'ont rien, mais alors rien du rab de tout, de sémantique. C'est le marqueur <q> ou autre qui est sémantique. Pas le caractère littéral » qui ne sera jamais interprété par un parseur ou une machine : c'est une bête chaîne littérale à restituer tel que.
  2. le contenu généré issu de CSS n'est généré que dans des medias spécifiques (@screen, @print...), et se trouve donc totalement ignoré par les machines sémantiques. Si on s'amusait à générer du pseudo-HTMl (content: "<h1>Autre titre de la page</h1>), ça n'aurait aucun effet. Exactement comme le contenu des sections C-DATA dans les fils RSS : les agrégateurs ne les interprètent pas. C'est pourquoi le contenu généré en CSS n'est pas interprété par le moteur de rendu du navigateur.

Bref, il ne faut pas voir de la sémantique partout, et certainement pas dans le contenu généré via CSS (les &raquo; ne SONT PAS dans le code, puisqu'ils sont en contenu généré qui ne sera pas réinterprété...).

C'était mon coup de gueule du samedi, Groumf

Laurent - 07/03/04 - 16:45

Laurent: je crois que tu as mal lu la solution de Pascale: le » est justement dans le code HTML et non généré par le CSS, c'est bien ça le problème. C'est pas un gros problème mais on se retrouve bien avec du contenu qui ne devrait pas être dans le code HTML.

be-rewt - 10/03/04 - 13:50

| Index | Avant | Archives |