Problème avatar du profil en hover

[Jay K.]

Bonjour !

Je me décide à poster ici car je suis face à un mystère qui me laisse perplexe... Je m'explique ! J'ai un forum test, qui est la copie conforme de mon forum, afin de procéder aux changements de design. En pleine préparation de la nouvelle version, j'ai simplement modifié la couleur de background de mon profil en hover, et voilà que la rotation de l'avatar ne fonctionne plus ! Vous trouverez ci-dessous les screens des deux situations, ainsi que le css et le template concerné (du forum test, un copié-collé du forum original).

Capture de l'avatar sur mon forum:

Capture de l'avatar sur le forum test:

CSS du profil:

Template viewtopic_body:

Si vous avez besoin du css complet, n'hésitez pas à me le demander. Un grand merci d'avance !

[Jay K.]

Quelqu'un pour m'aider peut-être ?

[Jay K.]

Petit UP !

[Garionix]

Salut ! Donc si j'ai bien compris, les screen il s'agit de la disposition des avatar au moment du survol de la souris ?

[Jay K.]

Bonjour !

Non, il s'agit de la position de l'avatar sans passer la souris dessus. Quand on passe la souris dessus, l'avatar se replace droit, et le profil apparaît à la place.

Sur mon forum test (le deuxième screen donc), l'avatar n'est pas penché comme sur le premier, bien que je n'ai touché à rien d'autre que la couleur de background, et au passage de la souris il coulisse légèrement sur le côté au lieu de se redresser du coup.

Tu as besoin d'autres informations ?

[Invité]

Bonjour Jay K

enlève ces lignes de ton css a deux endroit:

Code:

    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;

remplace to css par celui là:

Code:

/*PROFIL EN HOVER SOUS AVATAR*/
.avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin-left: -10px;
  margin-right: 10px;
  overflow: hidden;
  background: #FCFCDD;
  border: 1px #3e1d19;
 -webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -htm-transform: rotate(-5deg);
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
 /*    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;*/
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
  margin-left: 5px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
/*      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;*/
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
  position: absolute;
  display: block;
  width: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #FCFCDD;
  color: #96928D;
  font-size: 10px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
  overflow: auto;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -10px;
  margin-left: 10px;
  text-align: center;
  font-size: 20px;
  font-family: Mr Dafoe;
  font-weight: normal;
  text-shadow: 0px 0px 3px #c5bea0;
  background-color: rgba(240,240,240,0.5);
  padding-top: 5px;
  border-left: 3px #371e1a;
  border-right: 3px #371e1a;
  border-top: 1px #371e1a;
  border-bottom: 1px #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
 
 
}
/*FIN DU PROFIL*/
 
    /* Images dans champs profil */
    .profil_mess:hover img {
        max-width: 100%;
}

sa doit fonctionner

[Jay K.]

Bonjour Morane

Ca fonctionne parfaitement ! Les mystères du CSS, dire que j'avais seulement modifié une couleur et que ça m'avait tout bazardé :')

Un grand merci pour ton aide Je passe le sujet en résolu !

[Invité]

De rien avec plaisir