Technique du sprite css et référencement

danzo66 · 14 Octobre 2012

Salut à tous,

Je travaille actuellement sur la réalisation d'un menu principal pour mon site.
J'aimerais que chaque élément du menu soit sous forme d'image cliquable et que la couleur de l'image (en autres) change au survol de la souris. J'ai pris connaissance de la technique du "sprite css" qui me semble facile à appliquer et qui permet de s'affranchir du code Java.
Mais voila, c'est au niveau du référencement que je me pose des questions. En effet, je vais créer une liste de <li> vides auxquels je vais juste affecter une taille et un background. Le fait de créer un menu vide (au niveau sémantique du moins) me paraît pas être idéal pour un bon référencement

Pensez-vous que je risque d'être lourdement pénalisé? Y a t-il un moyen de contourner ce problème et de conserver un bon référencement (peut-être mettre du texte dans les <li> mais les cacher) ?

Merci d'avance

spout · 14 Octobre 2012

Tu dois pas faire de <li> vides, mais plutôt avec un lien classique:

PHP:

<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">ul</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">li</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">a&nbsp;href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://example.com/lien1.html"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Lien&nbsp;1</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">a</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">li</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">li</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">a&nbsp;href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://example.com/lien2.html"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Lien&nbsp;2</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">a</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">li</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">li</span><span class="syntaxkeyword">><</span><span class="syntaxdefault">a&nbsp;href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://example.com/lien3.html"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Lien&nbsp;3</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">a</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">li</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">ul</span><span class="syntaxkeyword">><br />&nbsp;</span><span class="syntaxdefault"></span>

Et en CSS, text-indent: -10000px; pr éviter l'affichage du texte (pas de problème pr GG si c'est pas en vue de faire du spam, bcp de menus utilisent la technique text-indent et/ou display: none).

danzo66 · 14 Octobre 2012

Merci beaucoup spout, je ne connaissais pas cette technique du text-indent