[RÉSOLU] Problème d'affichage pendant une animation

Bonjour à tous,

J'ai réalisé un petit menu sur le site web www.wuotai.fr, mais lors de l'animation l'affichage buggue, comme si graphiquement il n'arrivait pas à suivre.

J'ai donc simplement isolé le code sur http://test.wuotai.com/testmenu.php sans le retouché, et là tout fonctionne comme je l'imaginais au départ.

Avez-vous une idée concernant ce problème.
J'utilise firefox.


Modifié par folvool (29 Aug 2011 - 21:41)

Salut @folvool.
Essaye de caler un overflow:hidden sur #onglets li a, #onglets li a:visited.
Je sais pas si c'est la bonne solution mais ça à le mérite d'éviter ton bug graphique.

Salut @Raphi,
Merci pour ta réponse.
J'ai fait la modification que tu m'as données sur le site www.wuotai.fr mais ça n'a pas l'air de tout résoudre.

En fait vire la modification que je t'ai fait rajouter et fait plutôt ça:
overflow:hidden et width:160px sur #onglets li, #onglets li:visited

edit: en fait une simple augmentation de la taille du width suffit. Sauf que sur ton code isolé ça marche mais pas sur ton site... Il doit y avoir quelque chose que tu as mal fait.

edit2: le problème vient de ta div #corps:
Vire opacity: 0.8 c'est ça qui fait buguer l'affichage. Et pour obtenir le même résultat, tu dois modifier les couleurs de ton background en les gérant avec rgba.
Un truc de ce style là par exemple:
background: -moz-linear-gradient(center top , rgba(200, 200, 200, 0.8), rgba(255, 255, 255, 0.8));
Modifié par Raphi (29 Aug 2011 - 12:38)

Merci pour ton aide,

J'ai essayer différentes choses, soulagé et réorganisé le code css qui est le même sur les deux pages. Je ne comprends pas pourquoi sur wuotai.fr l'image est reléguée à gauche du texte alors que sur la page wuotai.com elle reste à droite comme dans l'ordre du code.

Ok pour la piste de la transparence dans l'id #corps, je vais regarder.



édit:
J'ai enlevé l'opacité pour l’instant et cela fonctionne. Quelle ruse faut-il que j'utilise pour avoir l'élément #corps (le cadre gris dégradé) en transparent à 80%? la méthode que tu m'a proposée ne marche pas non plus.
Modifié par folvool (29 Aug 2011 - 16:43)

Normalement ça fonctionne, reprend les valeurs actuelles de ton dégradé.
Utilise un convertisseur hexadécimal / rgb.
Tu obtiendra 3 valeurs pour ta couleurs en rgb, et tu peux rajouter une valeur supplémentaire pour l'opacité. Donc ça te donnera un truc du style: rgba(255, 255, 255, 0.8) pour du blanc.

Je ne pense pas que se soit compatible avec mon dégradé

background: -moz-linear-gradient(top, #b5ab9a 0%, #fff 80%);

Bien sur que si, le code exact a mettre à la place de ta ligne background c'est:

background: -moz-linear-gradient(top , rgba(181, 172, 184, 0.8), rgba(255, 255, 255, 0.8));

Ok je viens de lire plus en détail des articles sur les couleurs en RGB et j'ai compris les différentes possibilités de cet affichage.
Merci à toi @Raphi

De rien @folvool.
Heureux d'avoir pu t'aider.