Discussion :

[nasuu]

Bonjour, j’essaye depuis hier avec une grande difficulté de créer un Hover comme vous pouvez le voir ci-dessous (côté gauche + droit identique + fond dégradé):

Ce que je souhaite effectuer :
Ce que j'ai déjà fait : http://www.nolissa.fr/exemple/test.html

Je précise que dans l'exemple "VOIR TOUS LES SONDAGES" est un lien sans Hover.
Tout cela est déjà fait dans la page HTML, en fait il ne me manque que les images sur le côté que je n'arrive pas à faire.
Quand on passe la souris dessus, il doit afficher en tout 3 images dans le <li>. C’est là toute la difficulté. Deux oui, mais trois, je me perds. Je vous ai joint ci-dessous un fichier rar contenant toutes les données.

http://nolissa.fr/exemple/exemple.rar

J’ai fait de mon mieux et me voilà bloqué ici. Ma dernière tentative c’est de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
html:
<div id="sondage">
<ul>
<li><a href="#" class="hover">SONDAGE</a></li>
<li><a href="#"><span>VOIR TOUT LES SONDAGES</span></a></li>
 
css:
#sondage ul li a:hover span{
	padding:0 14px;
	background:url(img/cot-gauche.png) no-repeat;
}

J'ai eu tout simplement un bug d'affichage, l'image n'était pas à la bonne taille et même si je l'avais réussi il m'aurait manqué le côté droit à faire. Je compte vraiment sur vous Merci d'avance.

[Msieurduss]

Mmmmh... Pourquoi ne pas tout inclure sur la même image ? Je veux dire par là, les trois images en une seule ?

[nasuu]

J’y ai pensé, mais le gros problème c’est que là, tout le site comporte des menus comme celui-ci avec différent titre donc de taille d’images différente. Chaque bloc est formé d’un en-tête comme celui-ci, ce qui pose problème, car on se retrouverait avec beaucoup d’images par page qui peuvent différer à chaque page. Tout cela ajoute pas mal de poids et ce n’est pas le but que je recherche. Mais si c’est la dernière solution à prendre, je la prendrais.

La seule solution que je vois à faire c’est faire un script, un peut comme celui ci-dessous, qui dans chaque span inclurais le background et le margine ( gauche ou droite) pour chacun des cotés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <li><span class="gauche">le<span><span class="droite">mot</span></li>

Je trouve cette méthode un peux brutal dans le script. Mais est-ce que Google prendrait le lien correctement en compte, ou le lien aurait moins d’importance ?
Vus que le majeur parti des liens du site repose sur cet affichage, je dois être le plus valide possible WC3 afin d’êtres mieux référencé et par la même occasion d’aider les personnes handicapées.

SI quelqu’un a une idée quelconque, n’hésitez pas à me la faire parvenir. Cela fait déjà plusieurs jours que je bloque sur cet endroit. Je suis assez désespéré.

Merci d’avance.