[Résolu]Fond de menu différent sur l'état hover

Hover sous FF et IE7 :




Hover sous IE6 :



Structure HTML :

<!-- BEGIN: MAIN NAVIGATION -->
<div id="ja-mainnavwrap">
	<div id="ja-mainnav">
		<ul id="ja-cssmenu" class="clearfix">
			<li class="active"><a href="#" class="menu-item0 active first-item" id="menu1">Menu 1</a></li> 
			<li><a href="#" class="menu-item1" id="menu27">Menu 2</a></li> 
			<li><a href="#" class="menu-item2" id="menu2">Menu 3</a></li> 
			<li><a href="#" class="menu-item3" id="menu37">Menu 4</a></li> 
			<li><a href="#" class="menu-item4" id="menu41">Menu 5</a></li> 
			<li><a href="#" class="menu-item5 last-item" id="menu50">Menu 6</a></li> 
		</ul>
		<div id="ja-search">
			...
		</div>
	</div>
</div>
<!-- END: MAIN NAVIGATION -->

Bonsoir,

Ce site est réalisé à partir de Joomla ! 1.5.x.
Aussi la structure HTML est préétablie, car générée dynamiquement (à moins de manipuler le cœur du programme) et ne laisse pas une marge de manœuvre suffisante (pour un designer à l'inverse du développeur ) quant à la possibilité de remodelage de la présentation de la page à partir de son template (modèle) d'origine.

Suivant cette contrainte, je souhaiterais appliquer un background différent pour chacun des menus de la barre de navigation principale.
J'ai identifié pour chacun d'entre eux (menus) leurs id.
J'ai réalisé le codage CSS (du moins pour le menu 2) afin que son background change sur l'état hover :

#menu27 a {
	display: block;
}

#menu27:hover {
	background-color: #97be0d;
}

Cependant, je souhaite, également, que pour chacun des menus, celui-ci occupe un height de 46 pixels.
Donc je rajoute ce bout de code CSS :

#menu27 {
	height: 46px;
}

Très content de moi, j'observe le résultat sous FF, IE7 et IE6 et là... Pour ce dernier, le résultat n'est pas au rendez-vous. Comme vous pouvez le constater sur la capture-écran.
Il faut noter que c'est ce dernier code qui n'a pas plu à IE6.

Si vous avez des solutions ou pistes à me proposer, je suis tout ouïe.
Modifié par ThVi (22 Aug 2008 - 01:46)

Bonjour

Pas le temps de lire le code complet et de chercher mais a priori je dirais que IE6 ne comprenant pas les :hover en dehors des a, écrire plutôt :
#menu27 a:hover
pourrait solutionner ton prob si c'en est la cause.
Je dis "pourrait" parce qu'ensuite tu devras probablement redéfinir les attributs à affecter à #menu27 et à #menu27 a, qui du coup ne concernent plus les mêmes éléments du DOM.
Modifié par Arsene (21 Aug 2008 - 10:34)

Arsene a écrit :
Bonjour

Pas le temps de lire le code complet et de chercher mais a priori je dirais que IE6 ne comprenant pas les :hover en dehors des a, écrire plutôt :
#menu27 a:hover
pourrait solutionner ton prob si c'en est la cause.
Je dis "pourrait" parce qu'ensuite tu devras probablement redéfinir les attributs à affecter à #menu27 et à #menu27 a, qui du coup ne concernent plus les mêmes éléments du DOM.

Bonjour

Désolé, pas mieux.

Merci

Bonjour,

Manque un code complet (dans l'idéal l'URL d'une page en ligne). Sans cela, impossible de trouver une solution quelconque.
Edit: ok, vu l'URL. Un peu trop discrète dans le sujet, peut-être.

À tout hasard, tu es peut-être face à un bug d'IE6 avec les éléments flottants contenant un élément en display: block. Si tes LI sont flottants et tes A en display: block (et notamment s'ils ont le layout à cause d'un height ou d'un width), il sera peut-être nécessaire de passer les A en float: left également, du moins pour IE6.

Pour les images de fond, il s'agit juste d'utiliser :hover et :focus sur les liens, et tant qu'à faire d'optimiser ça avec la technique des portes coulissantes (faire une recherche) et peut être des sprites CSS (une image de fond pour tous les items du menu, avec tous les états nécessaires).

PS: images trop grandes, déforment le forum. Merci d'utiliser la génération de vignettes pour les images de plus de 400px de large.
Modifié par Florent V. (21 Aug 2008 - 12:34)

En passant, si tu veux une couleur différente sur chaque item tu peux réaliser ça en faisant juste varier la couleur de fond. Par dessus la couleur de fond, tu auras une image de fond en PNG-24, qui masque la partie du bas en laissant apparaitre une petite flèche, et applique une légère ombre au milieu. Tu peux ainsi réaliser ton effet avec une seule image, et changer la couleur à volonté dans le CSS.
Par contre ça ne marchera pas dans IE6, et il faudra utiliser une image alternative en GIF ou PNG-8. (Je déconseille l'utilisation d'un filtre AlphaImageLoader pour IE6 dans ce cas précis.)

Bonjour

a écrit :

À tout hasard, tu es peut-être face à un bug d'IE6 avec les éléments flottants contenant un élément en display: block. Si tes LI sont flottants et tes A en display: block (et notamment s'ils ont le layout à cause d'un height ou d'un width), il sera peut-être nécessaire de passer les A en float: left également, du moins pour IE6.

Tout simplement génial !
Oui, effectivement tous les éléments que tu as cités ont ces propriétés :

ja.moomenu.css

/* ligne 31 : */
#ja-cssmenu li {
	margin: 0; /* all list items */
	padding: 0;
	[#red]float: left;[/#]
	display: block;
	background: none;
	background: url(../../images/mainnav-sep.gif) no-repeat right;
	cursor: pointer;
}

/* ligne 82 : */
#ja-cssmenu li a {
	[#red]display: block;[/#]  /* « #menu27 a {display: block;} » que j'ai déclaré n'a pu lieu d'être */
	text-decoration: none;
	line-height: 40px;
	padding: 0 20px 4px;
	color: #AAAAAA;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 1px;
}

Et suivant ton conseil, j'ai appliqué la propriété flottante gauche à « A » :

<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
img {border: none;}
}
[#red]#ja-cssmenu li a {float: left;}[/#]
</style>
<![endif]-->

Merci encore

Autre chose : le code CSS s'exécute-t-il en fonction de l'ordre de son « apparition » (du haut vers le bas... je ne me souviens plus du terme à employer) ?
Car j'ai dû inclure le code, ci-dessous, dans la feuille de style template.css, alors qu'il existe une feuille de style dédiée aux menus (js.moomenu.css), afin qu'il soit pris en compte :

#menu27 {
	height: 46px;
}

#menu27:hover {
	background: url(../images/test.jpg);
}

#menu2:hover {
	background: url(../images/test.jpg);
}

Car en l'insérant dans ja.moomenu.css, le code ne s'applique pas.
Il y a pourtant bien un lien qui pointe vers cette feuille de style.

Aurais-tu une explication ?

a écrit :

Pour les images de fond, il s'agit juste d'utiliser :hover et :focus sur les liens, et tant qu'à faire d'optimiser ça avec la technique des portes coulissantes (faire une recherche) et peut être des sprites CSS (une image de fond pour tous les items du menu, avec tous les états nécessaires).

Le temps me manque mais je m'appliquerai à comprendre les principes. Merci.

a écrit :

PS: images trop grandes, déforment le forum. Merci d'utiliser la génération de vignettes pour les images de plus de 400px de large.

C'est noté.


Merci encore

Florent V. a écrit :
En passant, si tu veux une couleur différente sur chaque item tu peux réaliser ça en faisant juste varier la couleur de fond. Par dessus la couleur de fond, tu auras une image de fond en PNG-24, qui masque la partie du bas en laissant apparaitre une petite flèche, et applique une légère ombre au milieu. Tu peux ainsi réaliser ton effet avec une seule image, et changer la couleur à volonté dans le CSS.
Par contre ça ne marchera pas dans IE6, et il faudra utiliser une image alternative en GIF ou PNG-8. (Je déconseille l'utilisation d'un filtre AlphaImageLoader pour IE6 dans ce cas précis.)

Je n'arrive pas visualiser tes propos. Pourrais-tu être plus précis ?
Le background possèderait plusieurs couleurs et un masque viendrait par-dessus pour ne faire apparaître que la couleur qui n'est pas masquée ?

Pour le problème de code CSS qui ne s'applique pas:

- soit les fichiers ne sont pas chargés car le code HTML pour les appeler est invalide, ou parce qu'ils sont indisponibles sur le serveur, ou enfin parce qu'une version déjà mise en cache est utilisée par le navigateur (vider le cache...);
- soit le code CSS est chargé mais les sélecteurs sont faux (ne correspondent pas aux éléments visés), ou il y a une erreur de syntaxe qui empêche l'interprétation de plusieurs lignes de code (valider le CSS);
- soit c'est un problème de cascade CSS et de priorité des sélecteurs (lire Cascade CSS et priorité des sélecteurs).

ThVi a écrit :
Le background possèderait plusieurs couleurs et un masque viendrait par-dessus pour ne faire apparaître que la couleur qui n'est pas masquée ?

Non, plutôt ceci:

#menu a {
	display: block;
	padding: 15px 25px 25px 25px;
	background: gray no-repeat center bottom;
	color: white;
}
#menu a:hover, #menu a:focus {
	background-color: #ddd;
	background-image: url(img/menu-item-bg.png);
}
#item1 a:hover, #item1 a:focus {background-color: red;}
#item2 a:hover, #item2 a:focus {background-color: blue;}
#item3 a:hover, #item3 a:focus {background-color: green;}
#item4 a:hover, #item4 a:focus {background-color: pink;}

Marche pour un code avec un identifiant "menu" sur le UL (ou son conteneur), et des identifiants "itemN" pour chaque LI. Valeurs, couleurs, padding à adapter, etc.

Et pour l'image:


PS: faut peut-être aligner l'image en top plutôt qu'en bottom.
Modifié par Florent V. (21 Aug 2008 - 16:14)

Florent V. a écrit :
Pour le problème de code CSS qui ne s'applique pas:

- soit les fichiers ne sont pas chargés car le code HTML pour les appeler est invalide, ou parce qu'ils sont indisponibles sur le serveur, ou enfin parce qu'une version déjà mise en cache est utilisée par le navigateur (vider le cache...);
- soit le code CSS est chargé mais les sélecteurs sont faux (ne correspondent pas aux éléments visés), ou il y a une erreur de syntaxe qui empêche l'interprétation de plusieurs lignes de code (valider le CSS);
- soit c'est un problème de cascade CSS et de priorité des sélecteurs (lire Cascade CSS et priorité des sélecteurs).

OK merci, je vais vérifier ces points.

J'ai appliqué tes recommandations avec quelques petites modifs.

Étant donné, le vaste domaine que représente le CSS, je n'ai pas la prétention de tout connaître. C'est pourquoi, je souhaiterais que tu m'éclaires sur certains détails de ton code.

#menu a {
	display: block;
	padding: 15px 25px 25px 25px;
	[#red]background: gray no-repeat center bottom;[/#]
	color: white;

}

Pourquoi utilises-tu « no-repeat center bottom» sur un background-color ?

#menu a:hover, #menu a:focus {
	[#red]background-color: #ddd;[/#]
	background-image: url(img/menu-item-bg.png);

}

Quelle est la finalité, pour ces éléments, d'utiliser un background-color ? Car ce fond cache les backgrounds des menus (suite du code).

#item1 [#red]a:hover[/#], #item1 [#red]a:focus[/#] {background-color: red;}

J'ai remplacer « a:hover » et « a:focus » respectivement par « :hover » et « :focus » car sinon le background n'apparaissait pas. Qu'est-ce-qui peut découler de cette modif ?


Toujours est-il que tes conseils font mouche chaque fois

Voici le détails de la modifs de ton code. Tu peux apporter des critiques. Je suis très ouvert

template.css
ligne 1374

#ja-cssmenu a {height: 46px;}

#ja-cssmenu a:hover, #ja-cssmenu a:focus, {color: black;}

#menu1:hover, #menu1:focus {background-image: url(../images/mainnav-menu1.gif);}
#menu27:hover, #menu27:focus {background-image: url(../images/mainnav-menu27.gif);}
#menu2:hover, #menu2:focus {background-image: url(../images/mainnav-menu2.gif);}
#menu37:hover, #menu37:focus {background-image: url(../images/mainnav-menu37.gif);}
#menu41:hover, #menu41:focus {background-image: url(../images/mainnav-menu41.gif);}
#menu50:hover, #menu50:focus {background-image: url(../images/mainnav-menu50.gif);}

Merci pour tout
Modifié par ThVi (22 Aug 2008 - 02:06)