Bonjour =)

J'ai un petit souci avec le code que j'ai mis pour que au passage de la souris, l'avatar fasse une petite rotation vers la droit, seulement cela ne marche pas, il reste bloqué et je ne comprends pas pourquoi. ^^ Voici mon css :

Code:

.postdetails.poster-profile a img, .cadravatar {
border-top:6px solid #A39627;border-right:4px solid #D7CA57;border-bottom:6px solid #E7DF98;border-left:4px solid #CFBF34;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius:2px;
padding:0px;
-moz-box-shadow: 2px 2px 6px #ffffff;
-moz-transform: rotate(2deg);
opacity:1;
margin-bottom:-5px;
}

.cadravatar.postdetails.poster-profile a img:hover {
-moz-transform: rotate(6deg);}

Hum, ne serait-ce pas plutôt :

Code:

.cadravatar.postdetails.poster-profile a img  {

Il faudrait que tu nous montres soit ton forum, soit le template viewtopic_body pour qu'on te dise ce qui ne va pas, mais de toute évidence le problème réside dans ta façon d'écrire les classes CSS.

Accessoirement, -moz- ça limite tous tes effets à Firefox. Que fais tu de Chrome, Opera, Internet Explorer ?

Le problème, c'est que quand je le mets sous cette forum je n'ai plus aucun effet du tout

voici mon forum : http://dark-moon.forumgratuit.org/t58-m-au-choix-arrete-de-me-suivre

Ah, je ne savais pas que cela était seulement fait pour mozilla ^^"

Comme l'explique Christa', il y a tout d'abord une erreur sur le premier sélecteur.
La virgule permet de sélectionner plusieurs cibles différentes pour un même effet. Par coup de chance cela faisait que ça marchait par défaut, mais pas lors du passage de la souris.

En effet, une deuxième erreur s'est glissée dans le sélecteur en soit. Je suppose qu'il s'agit simplement de la div de classe .cadravatar que vous souhaitez faire pivoter. Du coup, le reste est superflu (ça faisait pas mal de classes... qui n'existent pas dans votre HTML, du moins pas sous cette forme).

Enfin, le préfixe -moz- cible en effet le navigateur mozilla (Firefox).
Pour couvrir les autres navigateurs, il faut également faire intervenir leurs préfixes spécifiques (-webkit- et -o- principalement). Enfin, il faut finir par la propriété générique, sans préfixe. A terme, avec l'intégration de ces standards dans l'ensemble des navigateurs, nous n'auront plus besoin de préfixer en effet ces propriétés (votre code restera donc compatible, au passage).

Voici une version du CSS qui répond à ces critères, essayez de voir ce que ça donne :

Code:

.cadravatar {
   border-top:6px solid #A39627;border-right:4px solid #D7CA57;border-bottom:6px solid #E7DF98;border-left:4px solid #CFBF34;

   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   -o-border-radius:2px;
   border-radius:2px;
   
   padding:0px;
   margin-bottom:-5px;
   
   -moz-box-shadow: 2px 2px 6px #ffffff;
   -webkit-box-shadow: 2px 2px 6px #ffffff;
   -o-box-shadow: 2px 2px 6px #ffffff;
   box-shadow: 2px 2px 6px #ffffff;
   
   -moz-transform: rotate(2deg);
   -webkit-transform: rotate(2deg);
   -o-transform: rotate(2deg);
   transform: rotate(2deg);
   
   opacity:1;
}

.cadravatar:hover {
   -moz-transform: rotate(6deg);
   -webkit-transform: rotate(6deg);
   -o-transform: rotate(6deg);
   transform: rotate(6deg);
}

Je vous laisse adapter le code si vous ne souhaitez tourner que l'image, et non le cadre (si vous avez compris ce que nous venons de vous expliquer, ça devrait aller comme sur des roulettes) =)