28220 sujets

CSS et mise en forme, CSS3

Salut,

J'ai créé un menu "graphique" (je sais, c'est un bien grand mot Smiley lol ) que vous trouverez ici

Mon pb est que les liens restent en position "hover" même après les avoir quittés sous IE6 (pas de pb sous FF).
C'est flagrant si on déplace lentement la souris sur les liens.

???

Merci

EDIT: J'ai utilisé la méthode des Sliding Doors adaptée à la création de cadres.
Modifié par Ricou13 (02 Jun 2005 - 22:36)
Philippe a écrit :
Chez moi ça marche correctement sur IE comme sur FF

Merci pour le test.
Tu as quelle version exactement ?
Moi, j'ai IE6 SP1 et la page en local, comme celle en ligne, déconne toujours.
J'arrive à obtenir le maintien de l'effet hover (le passage en bleu clair) en placant la souris sur le lien et en l'enlevant rapidement lorsque l'info-bulle apparait.
Smiley decu
Modifié par Ricou13 (31 May 2005 - 23:04)
Même problème chez moi.

t'aurais pas une version de ton css qui soit pas sur une seule ligne pour qu'on puisse jeter un oeil plus facilement ?
Jib a écrit :
t'aurais pas une version de ton css qui soit pas sur une seule ligne pour qu'on puisse jeter un oeil plus facilement ?

Merci

Je ne comprend pas ce que tu entends par "qui ne soit pas sur une seule ligne" ? Il y a un lien (en haut de page) qui pointe vers la page css (la visualisation directe ne fonctionne que sous FF, IE proposant de télécharger le fichier), et mes règles css sont sur plusieurs lignes, ce qui me parait être le plus lisible, non ?
Je me demande si ca ne serait pas un pb d'espace utilisé par le lien.

Je m'explique : sous FF le lien réagit dès que l'on survole ce qu'il contient, graphiques compris. Donc, si on survol la partie bombée de droite ou de gauche, le lien s'active.

Or, sous IE, seul le texte lui-même est réactif, c'est pour cela que si on se déplace très lentement pour quitter le lien, ca marche. J'ai donc esayé en ajoutant
display: block;
sur les balises <a> mais cela ne change rien et il n'y a toujours que le texte qui soit réactif.

Cela me parait cependant être une bonne piste...
Suite de mes recherches...

J'ai modifié la page.

J'ai élargit (avec ou sans 't' ?) le padding des contenus (sur les 2 premiers liens) pour les grossir. J'ai aussi ajouté une bordure bleue autour des <a> et une bordure jaune autour des div "contenu", afin de mieux visualiser le pb.

On voit bien, sous IE, que le lien n'est actif que lorsque l'on survol le texte lui-même et non la zone de la balise <a>. Sur les liens épaissis ("Produits" et "Entreprise"), l'effet semble marcher puisque la souris passe allègrement sur la surface de padding en quittant le texte, ce qui a pour effet d'annuler le hover (bien que j'arrive encore à le bloquer). Les autres liens ayant un "petit" padding, c'est comme si le navigateur ne detectait pas le fait que la souris quitte le texte.

Bref, je pense que la solution serait de rendre toute la surface du <a> réactive sous IE comme c'est le cas sous FF.
Pourtant, il me semblait qu'avec un
display: block;
ou un
float: left;
cela suffisait, mais cela ne change rien. J'ai essayé en supprimant le div "contenu", en le passant en display: block... mais rien n'y fait.
Smiley decu
Dernières nouvelles :

Mon pb d'images qui se figent est réglé. Certes, de façon barbare à laquelle je ne comprend rien, mais réglé.

En ajoutant une règle directement sur la balise <a> :
#menu a:hover {
	color: red;
	}
Ca ne se fige plus. Pourtant, cette règle n'a absolument aucun effet puisque le texte se trouve dans un DIV intérieur.
Maintenant, l'effet hover à lieu à la fois lorsqu'on survol le texte mais également lorsqu'on survol la bordure bleue qu j'ai ajouté autour des balises <a>. Par contre, entre les deux, nada, le lien se désactive.
???

J'ai d'ailleurs déjà eu des pb bizarres avec border. En mettant une bordure, tout marche, en la retirant, la présentation se déglingue. Je suis donc obligé de la laisser avec une couleur qui se fond dans le décor. Smiley confus

J'ai donc changé le titre du message puisque mon pb se limite désormais à étendre la zone de réactivité des balises <a> à leur surface visible.
Modifié par Ricou13 (01 Jun 2005 - 16:25)