[Résolu] Intégration d'un menu Dur dur...

Salut,

Je cherche à faire ce genre de menu en évitant la balise <img> et un pauvre onmouseover... j'ai déjà essayé plein de combinaisons en css ms je m'en sort pas à cause de la flèche blanche...

http://www.celts.fr/2.jpg

évidement quant on passe la souris sur la ligne du lien, le background doit changer + la couleur du lien + la fleche doit apparaitre.

Pouvez-vous m'aider ?
Modifié par ikaly (08 Oct 2007 - 11:04)

c'est possible en utilisant un background image pour le bloc accueil et un autre pour la flèche dans la balise a (le lien quoi)
à ce moment là, tout est dans la css et rien dans le code html, donc pas de balise img, que du texte et du html sémantique (li, a...)

Remarque en passant,

Comme je ne sais toujours pas, après des années de pratique, ce que recouvre le terme "sémantique HTML"... (plus le temps passe, et moins j'y crois, à défaut de savoir).

Une image HTML pour le petite flèche, avec un alt="", et le javascript qui la change au mouseover... C'est moins élégant que la solution CSS, évidemment. Mais c'est très loin d'être inapproprié, surtout quand il s'agit de passer X heures à trouver la solution... Heures qui pourraient être employées à améliorer des points nettement plus problématiques
Modifié par Laurent Denis (05 Oct 2007 - 12:33)

Laurent Denis a écrit :
Une image HTML pour le petite flèche, avec un alt="", et le javascript qui la change au mouseover... C'est moins élégant que la solution CSS, évidemment. Mais c'est très loin d'être inapproprié, surtout quand il s'agit de passer X heures à trouver la solution... Heures qui pourraient être employées à améliorer des points nettement plus problématiques

+1

À voir tout de même si on ne peut pas faire quelque chose de simple et pas prise de tête (et donc sans perte de temps) avec un peu de CSS et un code HTML comme suit:

<a href="..."><span>Intitulé du lien</span></a>

Et côté CSS:

a {text-align: right; ...}
a span {padding-left: 12px;}
a:hover span, a:focus span, a:active span {background: url(fleche.gif) no-repeat left middle;}

Un truc du genre. Il faudra vérifier que ça passe avec IE6, mais il me semble que oui.
Modifié par Florent V. (05 Oct 2007 - 15:47)

Je suis d'accord avec vous pour ne pas perdre de temps inutilement en revanche, il est dommage de ne pas optimiser ça.

Florent tu m'as appris kke chose le "a: hover span" je ne savais pas que l'on pouvait mettre un élément après un hover...

Ta solution fonctionne bien nikel merci
Modifié par ikaly (05 Oct 2007 - 15:29)

Tu considères donc que ce sujet est [Résolu]?
Dans ce cas, merci de l'indiquer dans le titre de ton sujet sous la forme suivant: «[Résolu] Titre du sujet». Tu peux modifier ce titre en éditant le premier message du sujet.

Merci d'avance.