Menu Vertic. avec image 2 positions

Bonjour,

Je ne trouve pas mon erreur, j'ai créé un menu vertical avec des images 2 positions (normal + over), le survole fonctionne pas de souci, mais la partie over reste visible (voir visuel). Je dois louper quelque chose, il me manque une instruction !

Je retourne le code dans tous les sens sans succès.

Vous avez une idée de ma boulette ?

Voici mon code CSS :

/* DEFAULT */
div.customenu_layout_default div.customenu_accueil a span{
	display: block;
    height: 58px;
    width: 514px;
}

/* DEFAULT: hover */
div.customenu_layout_default div.customenu_accueil a span.link_hover {
	background-position: 0% -58px!important;
}

/* DEFAULT: active */
div.customenu_layout_default div.customenu_accueil  a span.link_active  {}

/* LAYOUT */

div.customenu_layout_default div.customenu_accueil {}

div.customenu_layout_default div.customenu_accueil,
div.customenu_layout_default div.customenu_accueil a,
div.customenu_layout_default div.customenu_accueil span {
	margin-bottom: 5px;
	padding: 0;
	height: 58px;
}

div.customenu_layout_default div.customenu_accueil a span {
	/*background: url("../images/menu_separ.png") no-repeat scroll left top transparent;*/
	float: left;
	height: 58px; /* height - padding */
	padding: 58px 0 0;
	width: 514px; /* for fixed widths */
	
	cursor: pointer;
	
}

div.customenu_layout_default div.customenu_accueil a,
div.customenu_layout_default div.customenu_accueil a:hover,
div.customenu_layout_default div.customenu_accueil a span {
	display: inline-block; /* NEEDED FOR IE ON MAC */
    margin-bottom: 5px;
    text-decoration: none;
}


/* OVERRIDE */
/* Overide any stuff you want per menu item
 * Things like backgrounds, widths, heights, etc.
 * You can do this for any count of items
 */
div.customenu_layout_default div.customenu_accueil a.link_1 span {
	display: inline-block;
}
div.customenu_layout_default div.customenu_accueil a.link_2 span {
}
div.customenu_layout_default div.customenu_accueil a.link_3 span {
}
div.customenu_layout_default div.customenu_accueil a.link_4 span {
}

/* OVERRIDE: normal */

div.customenu_layout_default div.customenu_accueil a.link_1 span.link_normal {
	background: url("../images/bt_services1.png") no-repeat scroll 0 50% transparent;
}
div.customenu_layout_default div.customenu_accueil a.link_2 span.link_normal {
	background: url("../images/bt_services2.png") no-repeat scroll 0 50% transparent;
}
div.customenu_layout_default div.customenu_accueil a.link_3 span.link_normal {
	background: url("../images/bt_services3.png") no-repeat scroll 0 50% transparent;
}
div.customenu_layout_default div.customenu_accueil a.link_4 span.link_normal {
	background: url("../images/bt_services4.png") no-repeat scroll 0 50% transparent;
}
div.customenu_layout_default div.customenu_accueil a.link_5 span.link_normal {
	background: url("../images/bt_services5.png") no-repeat scroll 0 50% transparent;
	height: 58px;
}
/* OVERRIDE: hover */
div.customenu_layout_default div.customenu_accueil a.link_1 span.link_hover {
	background: transparent url("../images/bt_services1.png") no-repeat 0;
}
div.customenu_layout_default div.customenu_accueil a.link_2 span.link_hover {
	background: transparent url("../images/bt_services2.png") no-repeat 0;
}
div.customenu_layout_default div.customenu_accueil a.link_3 span.link_hover {
	background: transparent url("../images/bt_services3.png") no-repeat 0;
}
div.customenu_layout_default div.customenu_accueil a.link_4 span.link_hover {
	background: transparent url("../images/bt_services4.png") no-repeat 0;
}
div.customenu_layout_default div.customenu_accueil a.link_5 span.link_hover {
	background: transparent url("../images/bt_services5.png") no-repeat 0;
}

Voici mon code HTML :

<div class="customenu_accueil">
<a onfocus="this.blur();" class="link_1 link_id131 link_inactive " title="Portage de repas" href="/index.php/portage-de-repas"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_1 link_id131 link_inactive link_normal"><p style="text-indent: -9000px;">Portage de repas</p></span></a>
<a onfocus="this.blur();" class="link_2 link_id132 link_inactive " title="Aide à la personne" href="/index.php/aide-a-la-personne"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_2 link_id132 link_inactive link_normal"><p style="text-indent: -9000px;">Aide à la personne</p></span></a>
<a onfocus="this.blur();" class="link_3 link_id133 link_inactive " title="Aide ménagère" href="/index.php/aide-menagere"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_3 link_id133 link_inactive  link_normal"><p style="text-indent: -9000px;">Aide ménagère</p></span></a>
<a onfocus="this.blur();" class="link_4 link_id134 link_inactive " title="Aide administrative" href="/index.php/aide-administrative"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_4 link_id134 link_inactive  link_normal"><p style="text-indent: -9000px;">Aide administrative</p></span></a>
<a onfocus="this.blur();" class="link_5 link_id135 link_inactive " title="Aide sociale et relationnelle" href="/index.php/aide-sociale-et-relationnelle"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_5 link_id135 link_inactive link_normal"><p style="text-indent: -9000px;">Aide sociale et relationnelle</p></span></a>
</div>

Visuel :


Un p'tit coup de pouce svp !
Modifié par vertig (10 Sep 2011 - 11:28)

Bonjour,

Tu as fait compliqué pour pas grand chose.

Tu utilises du javascript alors que ca n'est pas nécessaire pour un effet de hover.
Tes sélecteurs CSS sont inutilement long, redondant et inutile avec une maintenabilité catastrophique. (voir notion de sélectivité CSS).

Tu utilises des <span> et des <p> qui n'ont pas d’intérêt. Ton menu sans css ou/et sans image sera illisible, inaccessible.

Bref sincèrement revois ton code de A à Z. Ton problème de rollover n'est qu'une futilité à coté de tous ces problèmes.

Merci pour l'info « rs459 »,

je comprends que ça peut choquer, mais j'intègre sous Joomla avec un module dynamique.

Aussi, je dois m'adapter ! Mes connaissances CSS ne sont pas au top, je l’avoue, je fais ce que je peux avec ce que j'ai.

Le module possède des balises, je dois m'en servir pour faire ce que je veux appliquer.

Un petit coup de pouce, sur mes erreurs serait le bien venu et j'apprendrais quelque chose comme ça !

Ha oui çà explique la soupe de tag.

Peux tu modifier le code HTML ? Parce que là sincèrement c'est une horreur en terme d'accessibilité, et vu le public visé... (au vu des intitulés de lien).

J'aurais vu un code plutôt comme celui là :
(exemple ici : http://cherche.job.59.free.fr/alsa-vertig-57384.html , seul le premier lien est actif.)

Tu as des problèmes d'accessibilité:

tu désactives les images tu n'as plus rien.
tu désactives javascript tu n'as plus d'affordance.
tu désactives les css ton menu part en miette.

Ma solution inclut le texte qui via @font-face peut prendre la typo que tu souhaites.
Sinon tu peux inclure aussi une balise image dans le lien avec un alt qui contient juste le texte (compatible référencement et accessibilité).

<div class="customenu_accueil">
	<ul>
		<li><a href="#" class="link-1">PORTAGE DE REPAS</a></li>
		<li><a href="#" class="link-2">AIDE À LA PERSONNE</a></li>
		<li><a href="#" class="link-3">AIDE MÉNAGÈRE</a></li>
		<li><a href="#" class="link-4">AIDE ADMINSTRATIVE</a></li>
		<li><a href="#" class="link-5">AIDE SOCIALE ET RELATIONNELLE</a></li>		
	</ul>
</div>

        .customenu_layout_default .customenu_accueil ul {
		list-style: none;
		padding: 0;
		margin : 0;
		width: 514px;
	}
	
	.customenu_layout_default .customenu_accueil a {
		display: block;
		height : 58px;
		line-height : 58px;
		padding-left : 58px;
		font-size : 24px;
		text-decoration : none;
		text-shadow : 1px 1px #000;
		color: #555; /* POUR L'EXAMPLE */	
		background-color: #ddd;
	}
	
	.link-1 {
	    background-image: url("../images/bt_services1.png");
	}
	
	.link-2 {
		background-image: url("../images/bt_services2.png");
	}
	
	.link-3 {
		background-image: url("../images/bt_services3.png");
	}
	
	.link-4 {
		background-image: url("../images/bt_services4.png");
	}
	
	.link-5 {
		background-image: url("../images/bt_services5.png");
	}
	
	.customenu_layout_default .customenu_accueil a:hover, .customenu_layout_default .customenu_accueil a:focus {
		background-color: #eee;
		background-position: 0 -58px;
	}

Merci ! C'est sympa, ça le ferait bien, mais je ne peux pas modifier le code HTML !

Tout est dynamique et j'ai déjà un menu horizontal qui utilise ce module. Avec celui-ci avec des images 3 positions, ça fonctionne bien !

Personne a une idée ?