[Résolu] Problème de menu

Bonjour,

sur mon site j'utilise l'un des menus disponibles sur ce site, à savoir celui-ci

Jusqu'à présent, tout fonctionnait parfaitement ! Je n'ai plus rien modifié concernant ce menu à partir du moment où il m'a satisfait...

Seulement voilà, il s'avère que l'image par défaut (celle affichée lorsque le pointeur de souris est en dehors du champ de l'image) a subitement disparu ! Lorsqu'on actualise, on peut nettement la voir un bref instant, puis elle a l'air d'être recouverte par autre chose...

Ayant mit à jour mes navigateurs, (FF2, Opera et IE7) je me demandais si le problème ne venait pas de là, mais le même bug sur trois navigateurs à la fois, ça me semble un peu saugrenu...

Bref, si quelqu'un a déjà eu un problème de ce genre et a trouvé d'où venait l'erreur, ce serait sympa de m'expliquer comment corriger cela...

Merci d'avance
Modifié par SolykZ (12 Dec 2006 - 04:02)

Il y a deux points qui me posent problème sur ton site :
- la page d'accueil met très longtemps à charger : même une fois chargée (en apparence), je continue à recevoir des données pendant plusieurs minutes ; je me demande si ça ne viendrait pas du MP3 que tu essaies de jouer ?
- je ne peux pas accéder aux images si j'indique leur nom de fichier dans l'URL. C'est intercepté par le site ? c'est un problème de droit ? les images sont-elles valides ?

Je ne sais pas si c'est voulu, mais en-dehors des quatre images du rollover du menu, je n'en vois strictement aucune. Or, d'après ta feuille de style, il devrait y avoir notamment une image de fond...

Il y a un autre truc bizarre auquel je n'avais jamais été confronté :j'utilise l'extension WebDeveloper (pour Firefox) afin de pouvoir afficher les CSS de ton site. Mais quand sa fenêtre est affichée, je ne vois plus non plus les images rollover. Et le site continue à charger dans le vide.

Dans un premier temps, j'essaierais de virer le chargement du MP3 dans l'entête pour vérifier si ce n'est pas son chargement qui interfère avec le chargement des images.

Bonjour,

Alors, j'ai commencé par virer le son d'arrière-plan cela ne change malheureusement rien...

En fait, concernant les images, elles sont stockées dans /interface/, en partant de l'index du site Web... Elles sont appelées par la CSS qui se trouve dans ce même dossier /interface/, qui elle-même est appelée dans chaque page via

<link rel="stylesheet" type="text/css" href="interface/style.css" />

Le problème de l'image inexistante mise à part celle du rollover, c'est le pourquoi de ce topic ! Elle n'apparaît plus, c'est arrivé sans raison, et je n'ai donc aucune idée d'où cela peut venir...

Par contre pour l'image de fond tu fais erreur... En effet, celle-ci apparaît via la div#conteneur, or sur l'index la div principale est div#conteneuraccueil...

Euh... J'ai trouvé le problème !

Lorsque j'ai fait la feuille de style j'avais défini un style pour les liens, globalement, alors que ce n'était que pour les liens de la colonne de droite ! J'ai donc modifié en "div#colonnedroite a" au lieu de "a"...

J'ai également remis le fond de démarrage et le tout tourne parfaîtement

Après vérification, il y a bien des blocs opaques qui viennent s'afficher par-dessus ton menu. Ces blocs sont liés à ta déclaration a à la fin de la feuille de style (qui surclasse toutes les précédentes) et qui a un fond coloré opaque.

EDIT : je n'avais pas rafraîchi la page avant de répondre...
Modifié par terzag (19 Nov 2006 - 11:54)

Bon, je recopie le code HTML + CSS concerné, ça sera plus clair.

[b]HTML[/b]
<ul id="menuaccueil">
	<li id="hautgauche"><a href="site.php" title="Site"><span>Site</span></a></li>
	<li id="hautdroite"><a href="choregraphies.php" title="Chorégraphies"><span>Chorégraphies</span></a></li>
	<li id="basgauche"><a href="../forum/index.php" onclick="window.open(this.href,'_blank');return false;"><span>Le Saloon</span></a></li>
	<li id="basdroite"><a href="photos.php" title="Photos"><span>Photos</span></a></li>
</ul>

[b]CSS[/b]
#menuaccueil
{
	position: absolute;
	height: 240px;
	width: 320px;
	top: 50%;
	left: 50%;
	margin: -120px 0 0 -160px;
	padding: 0;
	list-style: none;
	background: url(menuaccueil.jpg) no-repeat;
}

#menuaccueil li
{
	float: left;
	width: 160px;
	height: 120px;
}

#menuaccueil a
{
	display: block;
	width: 100%;
	height: 100%;
}

#menuaccueil a:hover
{
	background: url(menuaccueilsurvole.jpg) no-repeat;
}

#menuaccueil a span
{
	display: none;
	font-size: 1px;
	position: absolute;
	left:0;
	top: -5000px;
}

L'image de fond, qui ne s'affiche pas, est celle de ul#menuaccueil. Par dessus, tu as les éléments suivants : li, a et span.

Tu aurais évité les problèmes en plaçant l'image de l'état inactif directement sur les liens, et pas sur ul#menuaccueil. Il se peut que les navigateurs aient du mal à gérer le passage de background: none (état normal du lien) à background: bla bla image (survol) puis retour à background: none... surtout que le background: none est implicite...

Tu peux tester :
- indiquer explicitement un background: none pour les liens ;
- placer l'image de l'état inactif sur les liens plutôt que sur ul#menuaccueil.

Pour le deuxième cas, on pourrait remodeler la feuille de style ainsi :

#menuaccueil
{
	position: absolute;
	height: 240px;
	width: 320px;
	top: 50%;
	left: 50%;
	margin: -120px 0 0 -160px;
	padding: 0;
	list-style: none;
}

#menuaccueil li
{
	float: left;
	width: 160px;
	height: 120px;
}

#menuaccueil a
{
	display: block;
	height: 100%;
}

#menuaccueil a {background: url(menuaccueil.jpg) no-repeat;}
#menuaccueil a:hover {background: url(menuaccueilsurvole.jpg) no-repeat;}

#hautgauche a {background-position: 0 0;}
#hautdroite a {background-position: -160px 0;}
#basgauche a {background-position: 0 -120px;}
#basdroite a {background-position: -160px -120px;}

#menuaccueil a span
{
	/* display: none; */ /* Le display none n'est pas accessible
		à la plupart des lecteurs d'écran !!! De plus il est inutile
		vu qu'une autre solution est utilisée ci-dessous ! */
	font-size: 1px;
	position: absolute;
	left:0;
	top: -5000px;
}

Ça devrait faire l'affaire.
Modifié par mpop (19 Nov 2006 - 12:06)

terzag a écrit :
Après vérification, il y a bien des blocs opaques qui viennent s'afficher par-dessus ton menu. Ces blocs sont liés à ta déclaration a à la fin de la feuille de style (qui surclasse toutes les précédentes) et qui a un fond coloré opaque.

Il me semble que la déclaration finale est de cet ordre :

p a {background: #ffeedd;}

Or, ici, les liens ne sont pas placés dans des paragraphes.
De plus, le sélecteur #identifiant élément a un poids plus important que élément élément, quel que soit l'ordre des déclarations.

mpop a écrit :

Il me semble que la déclaration finale est de cet ordre :

p a {background: #ffeedd;}

Or, ici, les liens ne sont pas placés dans des paragraphes.

Oui, mais en plus de ça, il y avait après un

a {background: #ffeedd;}