Aller au contenu

prb de scintillement

antoineklein

Par antoineklein
dans (X)HTML et CSS

 Partager

Sujets conseillés

antoineklein

antoineklein

Posté
Posté

bonjour à tous.

j'ai un menu plutot simple dont le fond change lors du passage de la souris sur une des lignes du menu.

utilisation de CSS, le menu est le li, je gere le changement de fond comme ca :

#menu li a {
	display: block;
	height: 100%;
	font-size: 12px;	
	color: #000;
}
#menu li a:hover {
	background: #ffffff;
}

sous IE aucun prb, sous Firefox, c'est assez bisard mais les fond et les lignes du menu semblent scintiller lors du passage de la souris sur les menu, c'est pas très jolie;

qqun aurait déjà remarqué ca ?

merci pour votre aide

Lien vers le commentaire
Partager sur d’autres sites
TheRec

TheRec

Posté
Posté

[iRONIE]

Si tu n'a pas de réponse dans les 7 minutes qui suivent ton message tu as tout a fait raison de réclamer une réponse plus vite... et tu as tout aussi raison de nous demander un bain chaud ainsi qu'une coupe de champagne et un gros bol de caviar en compensation...

[/iRONIE]

Non mais on croit rêver... :boude:

Bref, avec le code que tu as donné, il n'y a aucun "scintillement" sous FireFox. Essaie de poster plus d'informations. Genre le code HTML et les autre définitions CSS qui pourraient influencer.

Lien vers le commentaire
Partager sur d’autres sites
Dan

Dan

Posté
Posté
alors ce scintillement n'allume aucun lumière dans vos têtes :-)

Merci de ne pas harceler les visiteurs du Hub en postant ce type de message 7 minutes après le premier post.

Comme le dit TheRec, on croit rêver.... on n'est pas forcément à TA disposition, le Hub a plus de 6000 autres membres :wacko:

Lien vers le commentaire
Partager sur d’autres sites
skale

skale

Posté
Posté

salut,

antoineklein, tu excuseras TheRec et Dan, qui n'ont pas remarqué qu'entre hier 10h06 et aujourd'hui 10h13 il y a 7 minutes ET UN jour de différence. Cela dit j'aurais attendu 2 jours avant de relancer le sujet, voire contacter en MP un spécialiste pour que ça soit lui qui remonte le post en y répondant.

Je ne suis pas (encore) un spécialiste, mais je touche ma bille, voici mon idée.

J'ai été confronté à un problème de scintillement, presque similaire (avec des onmouseover et onmouseout). Voici ce qui se passe vraisemblabement chez toi, <a> est contenu dans des balises <li>, quand tu arrives sur le lien, il interprète le comportement du CSS mais il interprète aussi un hover sur la balise <li> et il recommence avec <a>, puis <li>, puis <a>, ... d'où ce clignotement.

Tu peux essayer de remplacer ton CSS par

#menu li a {
font-size: 12px; 
color: #000;
}
#menu li:hover {
background: #ffffff;
}

un extrait du code HTML aurait aidé à tester ton problème.

Tu peux jeter un oeil sur mon site d'actualités, c'est pas des balises <li> que j'utilise mais je crois qu'il y a le comportement que tu souhaites obtenir.

skale

Lien vers le commentaire
Partager sur d’autres sites
Wanbli

Wanbli

Posté
Posté (modifié)

[off topic]Heu .... c'est moi qui rêve ou il n'a pas posté son 2e message 7 minutes après le premier mais bel et bien 24h + 7 mn après ? ...

Loin de moi l'idée de mettre de l'huile sur le feu, mais de mon coté je lis le permier message daté " Hier, 10h06" et le 2e "Aujourd'hui, 10h13" ...

Un peu de clémence messieurs ... ;)

[/off topic]

Pour le reste, sorry, je m'éclipse car je n'ai pas la réponse ...

[edit] ... Toutes mes confuses ... j'ai été grillée par Skale ... Je sors ... :unsure:

Modifié par Wanbli
Lien vers le commentaire
Partager sur d’autres sites
Dan

Dan

Posté
Posté
antoineklein, tu excuseras TheRec et Dan, qui n'ont pas remarqué qu'entre hier 10h06 et aujourd'hui 10h13 il y a 7 minutes ET UN jour de différence. Cela dit j'aurais attendu 2 jours avant de relancer le sujet, voire contacter en MP un spécialiste pour que ça soit lui qui remonte le post en y répondant.

Et oui... désolé pour cette confusion. C'est ce qui arrive quand on lit et poste très/trop vite :(

Mea Culpa ! Je retire bien sûr le terme "harcèlement" :lol:

Lien vers le commentaire
Partager sur d’autres sites
skale

skale

Posté
Posté

je pense qu'il n'en voudras à personne s'il a une réponse. Perso, c'est parce que j'ai lu le post hier, que je savais qu'il datait... bin d'hier.

Ma réponse au problème est-elle satisfaisante ?

skale

Lien vers le commentaire
Partager sur d’autres sites
TheRec

TheRec

Posté
Posté

Oui, mille excuses ! Voilà ce qui arrive lorsqu'on dort pas assez ;)

Trèves d'excuses "foireuses". J'ai encore regardé le problème dont tu parles, et je ne vois vraiement aps de scintillement, j'ai même essayé sous Safari, aucun problème de scintillement.

En attente de plus de détails...

Lien vers le commentaire
Partager sur d’autres sites
antoineklein

antoineklein

Posté
  • Auteur
Posté

Que de réponses :-)

désolé pour ce harcelement, je manque surement aussi un peu se sommeil, promis j'attendrais 24h de + la prochaine fois. mais ma relance était surtout humoristique : scintiellement = lumière et aucunement un manque de respect pour les 6000 membres de ce site, que je remercie d'exister. c'est bien là non ?

c'est vrais que j'ai posté un minimum d'info, je tacherais d'être plus précis la prochaine fois.

la solution de skale ne regle pas le prb, merci quand même.

voici donc plus d'info

d'abord l'adresse du site : http://www.steflaivedesloups.fr/ pour vous rendre compte du phénomère dans le menu de gauche, sous firefox uniquement.

voici le script de constitution du code du menu (tape dans une table mysql)

echo '<div id="menu">';
for ($i = 1; $i <= $qte; $i++) 
{
?>
	<dl>			
		<dt onClick="java script:montre('smenu<?php echo $i; ?>');">
		<?php 
		if ($tab[$i][3]!='') {
			echo '<img src="./themes/'.THEMES.'/'.$tab[$i][3].'" width="20" height="20" border="0" class="icone_menu" alt="'.__('icone').'">';
			echo ' ';
		}
		echo $tab[$i][2]; 
		?>
		</dt>
			<dd id="smenu<?php echo $i; ?>" onMouseOver="java script:montre('smenu<?php echo $i; ?>');" >
				<ul class="first">
				<?php echo liste_menu($tab[$i][1]);	?>
				</ul>
			</dd>
	</dl>

<?php } ?>
echo '</div>';

voici la css complet :

#menu {
   position: fixe; 
	z-index: 100;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
}

#menu dl {
	margin: 0px;
	padding: 0px;
	width: 190px;	
}

#menu dt {
	margin: 5px 0px 0px 0px;
	padding: 0px;
	cursor: pointer;
	background-color: #FFCC33;
	font-family: Verdana, Arial, sans-serif;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}

#menu dd {
	margin: 0px; /* sinon décalage */
	padding: 0px;
	background-color: #F4D66E;
	text-align: left;
}

#menu ul {
}

#menu li {
}
#menu li a {
	display: block;
	height: 100%;
	font-size: 12px;	
	color: #000;
}
#menu li a:hover {
	background: #ffffff;
}

.first {
	margin: 0px;
	padding: 0px;	
	list-style-type: none;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;		
}
.last {
	margin: 0px 0px 0px 20px;
	padding: 0;
	list-style-type: square;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	list-style-position: outside;	
}

En tout cas merci à vous pour votre aide.sincèrement

Lien vers le commentaire
Partager sur d’autres sites
skale

skale

Posté
Posté

ok,

je suis allé regarder le code HTML (mon parser php mental a des faiblesses en ce moment :lol: ), ça ressemble plus à ce que j'ai déjà vu.

Il se passe quoi si tu enlèves onmouseover des balises <dd> ?

skale

Lien vers le commentaire
Partager sur d’autres sites
antoineklein

antoineklein

Posté
  • Auteur
Posté

the winner is : SKALE

super, c'est bien ce onMouseOver qui n'avait rien à faire ici, a force de trop regarder, on ne vois plus rien.

merci à toi et à tous les participants :-)

je me permets une petite quesiton subsidière

comment faire pour que le menu surbrillance fasse tout la largueur du menu, pour les menu normaux pas de prb mais pour ceux ayant un petite carré (liste <ul>) devant, ce petit caré n'est pas englobé dans la surbrillance (changement de la couleur du fond)

je c'est pas si c'est très claire :-)

Lien vers le commentaire
Partager sur d’autres sites
skale

skale

Posté
Posté
comment faire pour que le menu surbrillance fasse tout la largueur du menu, pour les menu normaux pas de prb mais pour ceux ayant un petite carré (liste <ul>) devant, ce petit caré n'est pas englobé dans la surbrillance (changement de la couleur du fond)

je c'est pas si c'est très claire :-)

<{POST_SNAPBACK}>

normal que le carré ne soit pas englobé par la surbrillance, il n'est pas englobé par la balise <a> où s'applique la surbrillance. Maintenant que le clignotement a disparu, tu peux remettre le code que j'ai déjà donné, ie changer la couleur du fond de la balise <li> (quelle que soit sa classe), et plus besoin du display:block pour la balise <a>

qu'est-ce que je gagne ?

@+

skale

Lien vers le commentaire
Partager sur d’autres sites
antoineklein

antoineklein

Posté
  • Auteur
Posté

skale : par contre ton idée pour faire changer le fond de la ligne complete meme ceux avec la pastille devant ne marche pas mais je pense que c'est normal car la balise <a> n'englobe pas la pastille comme tu le disais plus haut, on ne peut donc pas mettre de hover sur une balise <li> ? ou alors il faut passer par du java/css pour faire changer le fond.

Lien vers le commentaire
Partager sur d’autres sites
skale

skale

Posté
Posté

en principe ça marche très bien, pas besoin de javascript, il te suffit de remplacer dans ton fichier css la ligne suivante.

#menu li a:hover {
background: #ffffff;
}

par

#menu li:hover {
background: #ffffff;
}

tout simplement

@+

skale

Lien vers le commentaire
Partager sur d’autres sites
antoineklein

antoineklein

Posté
  • Auteur
Posté

oui, j'ai bien essayé ton code, résultat :

IE : ca ne marche pas, le changement de la couleur de fond ne change pas

Firefox : la couleur du fond change mais n'intègre pas la pastille

:-) c'est pas très grave de toute facon, le scintillement en moins c'est déjà bien :-)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...