Geckozone

Bonjour !

J'ai un site sur lequel j'utilise :hover avec les paragraphes.

un paragraphe de base (<p>) est prévu pour être avecune bordure marron et un fond jaune pâle qui devient plus foncé quand on passe la souris dessus.
Pa de soucis avec ça.

Par contre j'ai d'autres paragraphes qui ne doivent pas avoir de fond, ou alors un fond bleu, etc...
J'ai donc défini des class correspondant à ces différents cas de figure.

Là est le problème :

Tout allait bien depuis des semaines, quand soudain mon site s'est mis à "devenir fou".

Concrètement, si je vais sur une page (index.php par exemple) et que tout marche comme prévu (les <p> en jaune, le reste selon sa class), quand je recharge la page (F5 ou lien dans le menu) j'ai une chance sur 2 pour que mes class ne soient plus appliquées... Les paragraphes censés ne pas avoir de fond en ont un quand on passe la souris dessus et ceux censés être bleus deviennent jaune foncé au lieu de bleu foncé quand on passe dessus !
Si je recharge à nouveau la page, une fois sur 2 elle sera correcte... Et je peux reproduire l'expérience des dizaines de fois (F5), j'ai une fois sur deux en moyenne le bug... En moyenne car ça peut rester bon ou mauvais pls fois de suite...

En clair, le :hover n'est appliqué qu'une foisde temps en temps... Au bon vouloir de... De quoi au fait ?!?

Que se passe-t-il ?
Ma soeur a testé avec Mozilla et pas de bug... Cela vient-il de mon FF ?

Je précise que mon FF a planté après qqs heures d'utilisation... Ce qui ne m'arrive guère plus d'une fois par semaine... Un lien ???

fg63 a écrit :Un lien ???

Bonne question&#133; pour le savoir il faudrait peut-être en avoir un, de lien

Alors voici un lien vers le site : http://www.mambre.net MAIS il ne sera pas possible de s'inscrire (nécessite un mot secret) et vous serez donc cantonnés à la page index.php ou a des pages avec un message d'erreur...

Un exemple de paragraphe normal : celui avec le formulaire d'identification.

Un exemple de paragraphe avec une class : le menu (qui n'a pas de fond), le paragraphe qui contient le bouton pour s'inscrire, le paragraphe qui contient les images W3C et ICRA (pas de fond nn plus pour eux).

Avec border:none; tu définis border-color à "none". Or, la propriété "none" n'existe pas pour border-color
Je pense que le reste est un peu du même genre

Je ne peux que te conseiller soit de te plonger dans la spécification CSS2 pour essayer de débusquer des erreurs de ce style, soit de simplifier le code (mieux ).

À ce que je vois, tu définis un p:hover avec plein de propriétés que tu est obligé de redéfinir pour toutes les classes (et il y en a !). Pourquoi tu ne définirais le :hover que pour les paragraphes devant changer au survol ? Avec un p.identification par exemple ? Ce serait AMHA beaucoup plus logique et éviterait bien des soucis de ce genre

:hover ca marche sur P maintenant ?
je croyais que IE ne supportait :hover que sur les A.

bonze a écrit ::hover ca marche sur P maintenant ?
je croyais que IE ne supportait :hover que sur les A.

hover marche sur tout... avec FF !

IE ne le supporte en effet que sur a... Mais c'est pas une raison pour priver ceux qui utilisent des navigateurs aux normes des subtilités de mon design...

calimo a écrit :

Code : Tout sélectionner

 .sansfond:hover {
background-color : transparent;
color : #423131;
border : none;
 }

Avec border:none; tu définis border-color à "none". Or, la propriété "none" n'existe pas pour border-color
Je pense que le reste est un peu du même genre

Je ne peux que te conseiller soit de te plonger dans la spécification CSS2 pour essayer de débusquer des erreurs de ce style, soit de simplifier le code (mieux ).

À ce que je vois, tu définis un p:hover avec plein de propriétés que tu est obligé de redéfinir pour toutes les classes (et il y en a !). Pourquoi tu ne définirais le :hover que pour les paragraphes devant changer au survol ? Avec un p.identification par exemple ? Ce serait AMHA beaucoup plus logique et éviterait bien des soucis de ce genre

Je vois le principe...

Par contre ça va pas être simple d'aller modifier tout mes paragraphes un par un, page par page !

Bon, ben j'y suis arrivé !

Mon css est encore loin d'être optimisé (je débute totalement en css) mais y'a un petit mieux...

Je pense que je me repencherai dessus quand le site sera fini...

Autre élément de piste : l'espace avant le sélecteur&#133;

PS : un conseil, réfléchis avant pour éviter de devoir tout refaire
Utilise les classes avec la sémantique à l'esprit. La traduction n'est plus disponible, alors je donne le lien vers la vo : http://www.w3.org/QA/Tips/goodclassnames

En gros, n'utilise pas .rouge, .bleu ou .sansfond qui se rapportent à la mise en forme de l'objet.
En effet, le jour où tu voudra que tes .rouge aient un fond bleu, tu sera bien embêté. Idem pour les .sansfond, si un jour tu souhaites refaire ta mise en page (ou utiliser une feuille de style alternative) et leur donner un fond, tu es fichu
Essaye plutôt de trouver à quoi sert chaque objet et donne une classe liée à la fonction qu'elle va avoir. Ça, il vaut mieux changer au départ !

calimo a écrit :Autre élément de piste : l'espace avant le sélecteur…

PS : un conseil, réfléchis avant pour éviter de devoir tout refaire
Utilise les classes avec la sémantique à l'esprit. La traduction n'est plus disponible, alors je donne le lien vers la vo : http://www.w3.org/QA/Tips/goodclassnames

En gros, n'utilise pas .rouge, .bleu ou .sansfond qui se rapportent à la mise en forme de l'objet.
En effet, le jour où tu voudra que tes .rouge aient un fond bleu, tu sera bien embêté. Idem pour les .sansfond, si un jour tu souhaites refaire ta mise en page (ou utiliser une feuille de style alternative) et leur donner un fond, tu es fichu
Essaye plutôt de trouver à quoi sert chaque objet et donne une classe liée à la fonction qu'elle va avoir. Ça, il vaut mieux changer au départ !

Je prend bonne note de tes conseils, et je vais tâcher de les appliquer dans l'avenir (je vais pas tout refaire maintenant... ).

Merci de ton aide !