Profil caché

[Jiminy Cricket]

Bonjour !
Je reviens vers vous ( encore ) pour une question concernant les profils des membres. J'aimerais que celui-ci, sous l'avatar, soit " caché " par ce dernier et que l'on puisse le voir en passant la souris par-dessus grâce à un joli coulissement. Je n'ai pas réellement d'exemple à vous montrer malheureusement...
J'ai pris connaissance d'un tutoriel qui correspondait à peu près à ma demande ( https://forum.forumactif.com/t334651-avatar-en-accordeon ) malheureusement la partie dans le template à sucrer a déjà été préalablement modifier par une tiers personne. Hors je voudrais garder son esthétisme intact...

Voici un screen ( on ne sait jamais )  

Spoiler:

Et le template en question :



J'ai conscience de la sûrement redondance de ma question qui a du être traitée plusieurs fois, malgré tout je suis trop flippée de trop toucher à un template qui a déjà été modifié par quelqu'un d'autre que moi. Je m'en remets donc à vous !

Merci d'avance.  

[Jiminy Cricket]

Je me permets un petit up !

Merci d'avance.   

[Jiminy Cricket]

Petit up journalier !   

Merci.   

[Jiminy Cricket]

Personne pour me donner un coup de pouce ?   

[Jiminy Cricket]

Je up. Merci d'avance.   

[Jiminy Cricket]

Petit up !   

[Jiminy Cricket]

Petit up... Merci.   

[Aii-Chan~~]

Bonsoir ~ Je viens d'essayé de l'adapter avec un code que j'avais et cela semble fonctionner, donc je vous envoie ceci    (en espérant que cela fonctionne chez vous aussi. Vous avez laissez des balises ouvertes sur votre code, je les ai refermer, donc ne vous étonnez pas xD)

Repérez cette partie sur votre template ;
     

Code:

<div class="profilentier"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
                              <div class="rang">{postrow.displayed.POSTER_RANK}</div>
                              <span class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}
                                {postrow.displayed.RANK_IMAGE}
    <!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
     <!-- END profile_field -->
        <div class="profildetai1">
       {postrow.displayed.POSTER_RPG}

et remplacez-le par ;

Code:

      <div class="profilentier"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
                              <div class="rang">{postrow.displayed.POSTER_RANK}</div>
 <div id="slide_avatar"><div>
      <!-- BEGIN profile_field -->  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  <!-- END profile_field -->
      
        <div class="profildetai1">
          {postrow.displayed.POSTER_RPG}</div>  
   <span class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}</span> </div></div>
                               {postrow.displayed.RANK_IMAGE}
</div>

Ensuite pour le css

Code:


#slide_avatar div {
 background: #dddddd;
   width:200px; /* Égal à la largeur de l'image */
 height: 400px; /* Égal à la hauteur de l'image */
 overflow: hidden;
 position: relative;
 }

#slide_avatar div img {
        leftt: 0;
 position: absolute;
 top: 0;
        transition: transform 1s ease-in-out;
 -moz-transition: -moz-transform  1s ease-in-out;
 -o-transition: -o-transform 1s ease-in-out;
 -webkit-transition: -webkit-transform 1s ease-in-out;
   }

#slide_avatar div:hover img {
        float:left;
 transform: translatex(200px); /* Valeur égale à la largeur de l'image */
 -moz-transform: translatex(200px);
 -o-transform: translatex(200px);
        -webkit-transform: translatex(200px);
        transition: transform 1s ease-in-out;
 -moz-transition: -moz-transform  1s ease-in-out;
 -o-transition: -o-transform 1s ease-in-out;
 -webkit-transition: -webkit-transform 1s ease-in-out;
}

Vous n'avez plus qu'a personnaliser tout ça ! Si vous voulez que l'image coulisse vers la gauche, vous remplacez le (200px) par (-200px).

[néco]

salut jiminy , de manière générale , si tu veux faire des essaie sur tes template mais que tu as peur que quelque chose ne fonctionne pas , il te suffis simplement de commencer par copier ton template , le coller n'importe où dans ton ordi sur un document texte par exemple , et comme ça , si le "nouveau" template ne te convient pas , tu n'as plus qu'a recoller le tiens que tu garde sauvegardé dans ton ordi , tout simplement
ps : de préférence dans un document qui conservera la mise en page , parce que sinon tu te retrouvera avec un gros pavé indigeste  ::betise:: 
bizzz

[Jiminy Cricket]

Bonjour !

Merci pour vos conseils et votre aide !   J'ai téléchargé Notepad++ pour enregistrer mon template.   

Aii-chan, merci beaucoup ! J'ai changé tout comme il faut et c'est presque parfait mais voilà ce que ça me donne :

Spoiler:

et

Spoiler:

Est-ce que cela vient du CSS ? ( Je fais surtout référence à la taille du texte et à la position de l'avatar légèrement décalée ! )
J'ai aussi remarqué que sur certains profils où beaucoup de champs sont remplis, les derniers champs sont rognés par la taille imposée ( 320px ). Est-il possible d'ajouter un scrollbar quelque part pour pallier ça sans que cela dépasse du champ de l'avatar ?

[Aii-Chan~~]

Bonjour ! Je peux avoir la partie du css qui concerne le profil ?
Je vais voir si j'arrive à régler le problème.

Et pour la scrollbar, oui c'est possible j'imagine *va se rajouter plein de champs de son côté sur son forum test pour arranger ça déjà*

[Jiminy Cricket]

Ne sachant pas trop où la demoiselle qui a fait notre css a rangé cette partie, je te mets le codage entier ! ( Ah je n'avais prévenu personne que j'étais nulle de chez nulle ? )



En tout cas merci beaucoup pour ton aide !

[Aii-Chan~~]

Me revoilà /o/
donc, d'abord sur votre template, remplacez ça

Code:

<div id="slide_avatar"><div>
      <!-- BEGIN profile_field -->  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  <!-- END profile_field -->
      
        <div class="profildetai1">
          {postrow.displayed.POSTER_RPG}</div>  

par ceci (c'est un peu l'anarchie, j'avoue... Mais j'ai pas réussi à faire mieux   ):

Code:

<div id="slide_avatar"><div>
          <div style="width:190px;height: 310px;overflow: auto;"> <div class="profildetai1">
           <!-- BEGIN profile_field -->  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  <!-- END profile_field -->
           </div>
<div class="profildetai1">           {postrow.displayed.POSTER_RPG}  </div> </div>        

Ensuite pour le css;

Code:


    .bodylinewidth { margin: -15px auto -30px auto;
    padding-right: 0px;
    padding-left: 0px;
    width: 500px;}
    -RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }
    body {cursor: sw-resize;}

    a img { border: none; }

    .mainmenu img { display: none; }

    /* pas de soulignement de liens */
    a:link {text-decoration: none; -moz-transform: all; -webkit-transform: all; transform: all; -o-transform: all; -htm-transform: all; -ms-transform: all; -khtml-transform: all;
        -moz-transition: 2s; -webkit-transition: 2s; transition: 2s; -o-transition: 2s; -htm-transition: 2s; -ms-transition: 2s; -khtml-transition: 2s;}

    a:visited {text-decoration: none;}
    a:hover {text-decoration: none !important;
              -moz-transform: all; -webkit-transform: all; transform: all; -o-transform: all; -htm-transform: all; -ms-transform: all; -khtml-transform: all;
        -moz-transition: 1s; -webkit-transition: 1s; transition: 1s; -o-transition: 1s; -htm-transition: 1s; -ms-transition: 1s; -khtml-transition: 1s;}

    a.forumlink {text-decoration: none;}
    a.forumlink:hover {text-decoration: none!important;}

    .transpa td { background-color: transparent; }

    a.mainmenu { text-transform: uppercase;
      font-size: 11px;
      font-family: times new roman;
      font-weight: lighter;
    color: #22232d!important;}

    a.mainmenu:hover { text-transform: uppercase;
      font-size: 11px;
      font-family: times new roman;
      font-weight: lighter;
    color: #3c5064!important;}

    a.forumlink { color: #3c5064!important;
      text-transform: uppercase;
      text-align: center;
      display: block;
      font-weight: lighter;
      font-family: times new roman;
      font-size: 24px;
    margin-top: 10px;}

    a.forumlink:hover { color: #22232d!important;
      text-transform: uppercase;
        display: block;
      text-align: center;
      font-weight: lighter;
      font-family: times new roman;
      font-size: 24px;
    margin-top: 10px;}

    .caté { font-weight: lighter;
      text-align: justify;
      margin-right: 10px;
      margin-left: 10px;
    background-color: #000000;
    padding: 5px;
    margin-bottom: 10px;
    line-height: 12px;}

    .sousforum { background-color: #000000;
      padding: 2px;
      text-align: center;
    display: block;
      font-size: 9px;
      margin-right: 10px;
      margin-left: 10px;
    font-family: times new roman;
    text-transform: uppercase;
    font-weight: lighter;}

    .derniermess { font-size: 9px;
      text-align: center;
      wdith: 175px;
    margin-top: 10px;}

    .statistiques { font-size: 9px;
      text-transform: uppercase;
    font-weight: light;
    color: #363027!important;
    margin-bottom: 10px;}

    .postbody { text-align: justify;
      margin-right: 40px;
      margin-left: 40px;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 14px;
      font-size: 12px; }
 .name { font-family: times new roman;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
display: block;
margin-right: 5px;
margin-left: 5px;}

.rang { font-family: Times New Roman;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  display: block;
  letter-spacing: 1px;
  color: #101010!important;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;}

.profilentier { background-color: #020202;
  border: 2px solid #010101;
  border-radius: 10px;
  text-align: justify;
  display: block;
padding:5px;}

.profildetai1 img { width: 190px; }

.profildetai1 {
        text-align: justify;
  font-family: arial !important;
font-size:11px !important;}

.postdetails.poster-profile a img {
  border-radius: 10px;
box-shadow: 0px 0px 5px #010101; }

    .tableauqeel { background-color: #000101;
      padding: 10px;
      border: 3px solid #010101; }

    .groupes { background-color: #000000;
      text-shadow: 0px 0px 3px #020202;
      font-family: times new roman;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 3px;
      text-align: center;
    display: block;
    padding: 5px;
    margin: -10px;}

    .cadreq1 { background-color: #000000;
      padding: 5px;
      overflow: auto;
      box-shadow: 0px 0px 10px #010101;
      height: 150px;
        width: 362px;
    display: block;
      line-height: 11px;
    text-align: justify;
    font-size: 11px;
    margin-left: 0px;
    margin-right: 10px;
    border: 3px solid #020202;
    border-radius: 5px;}

    .cadreq2 { background-color: #000000;
      padding-top: 0px;
    padding-right: 3px;
      padding-bottom: 5px;
      padding-left: 5px;
      overflow: auto;
        box-shadow: 0px 0px 10px #070707;
      height: 153px;
      width: 362px;
    display: block;
    text-align: justify;
        line-height: 11px;
    font-size: 11px;
    border: 3px solid #020202;
    border-radius: 5px;}

    .titlepa { color: #3c5064!important;
      text-transform: uppercase;
      text-align: center;
      display: block;
      font-weight: lighter;
      font-family: times new roman;
      font-size: 65px;
      letter-spacing: 3px;
      text-shadow: 1px 1px 1px #010101; }

    .soustitlepa { color: #22232d!important;
      text-transform: uppercase;
        display: block;
      text-align: center;
      font-weight: bold;
      font-family: times new roman;
      font-size: 12px;
    letter-spacing: 6px;
      text-shadow: 1px 1px 1px #010101;
    margin-top: -15px;
    border-bottom: 2px solid #0F0F0F; }

    .menuder { width: 158px;
      background-color: #000000
      text-transform: uppercase;
      font-size: 11px;
      display: inline-block;
      font-family: times new roman;
      text-align: center;
      font-weight: lighter;
    color: #22232d!important;}

    .menuder:hover { width: 158px;
      background-color: #000000;
      text-transform: uppercase;
      font-size: 11px;
        display: inline-block;
      font-family: Times New Roman;
      text-align: center;
      font-weight: lighter;
    color: #3c5064!important;}

    .cadrepa1 { background-color: #000000;
      padding: 5px;
      text-align: justify;
      line-height: 11px;
      font-size: 11px;
      width: 250px; }

    .cadrepa2 { background-color: #000000;
      padding: 5px;
      text-align: justify;
      line-height: 11px;
      font-size: 11px;
      width: 250px;
    margin-top: -9px;}

    .patitle { background-color: #000000;
      font-size: 10px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 5px;
      font-family: Times New Roman;
      font-weight: bold;
      color: #3c5064; }

    .imgpa { width: 250px; }

    .derpa { overflow: auto;
      height: 217px;
      padding-right: 3px; }

    .derpa1 { overflow: auto;
      height: 75px;
      padding-right: 3px; }

    .lien1 { font-family: Times New Roman;
      font-size: 10px;
      text-transform: uppercase;
      display: block;
      text-align: center;
    font-weight: bold;
    letter-spacing: 2px;}

    .imgstaff { background-color: #000000;
      border: 1px solid #0f0f0f;
      padding: 4px; }

    .imgstaff2 { background-color: #000000;
      border: 1px solid #0f0f0f;
      padding: 4px;
    margin-top: 5px;}

    cda { color: #22232d; font-family: Times New Roman; text-shadow: 1px 1px 1px #000000; }

    .partnerspa { background-color: #000000;
      border: 1px solid #0c0c0c;
      padding: 3px;
      width: 15px; display: inline-block; }

    .topsites { font-size: 50px; font-family: arial; display: inline-block; }

    .credpa { font-family: arial;
      font-size: 9px;
      text-transform: uppercase;
      display: block;
      text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    background-color: #000000;
      color: #181818;
      text-shadow: 1px 1px 1px #000000;
    padding: 3px;
    border-top: 2px solid #0f0f0f;
    margin: -3px;}

    a.info2 {  /* INFOBULLES */
        width: 230px;
      position: relative;
      text-decoration: none;
    font-variant: none;
    text-transform: none;}

    a.info2 span { display: none; /* on masque l'infobulle */ }

    a.info2:hover {  background: none; /* correction d'un bug IE */
      z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
      cursor: help; /* on change le curseur par défaut en curseur d'aide */ }

    a.info2:hover span { display: inline; /* on affiche l'infobulle */
      position: absolute;
      top: 11px; /* on positionne notre infobulle */
      left: 3px;
    background-color: #000000;
    border: 1px solid #080808;
    text-align: center;
      padding: 2px;
    font-family: times new roman;
    text-transform: uppercase;
    width: 239px; }

    bba { font-family: arial;
      font-size: 10px;
      text-transform: uppercase;
      text-align: center;
    font-weight: bold;
    letter-spacing: 2px;}

    /*EDITEUR MESSAGES APS MAJ FA*/

    .sceditor-container.ltr.sourceMode{ background-color: #050505; -moz-border-radius-bottomleft:5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border: 2px solid #050505!important;}

    .sceditor-container.ltr.wysiwygMode{ background-color: #050505; -moz-border-radius-bottomleft:5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border: 2px solid #050505 !important;}

    div.sceditor-toolbar{ background-color: #050505 !important; border: 2px solid #050505 !important;}

    .sceditor-container iframe, .sceditor-container textarea{ background-color: #000000 !important; text-align:justify;
    padding:5px !important; line-height: 16px; color: #3d3c3c !important; font-size:11px !important;
      font-family: Arial !important; -moz-border-radius-bottomleft:5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; border: 1px solid #0a0a0a !important;}

    div.sceditor-group{ background-color: white !important;}

    a.sceditor-button.hover{ background-color: white !important;}

    .sceditor-emoticons { overflow: auto !important; background-color: #050505 !important;
      border: 1px solid #050505 !important;}

    img.smiley { width: auto !important; height : auto !important;}

    .sceditor-button.sceditor-button-date{ display: none;}

    .sceditor-button.sceditor-button-time{ display: none;}

    .sceditor-button.sceditor-button-youtube{ display: none;}

    .sceditor-button.sceditor-button-servimg{ display: none;}

    .sceditor-button.sceditor-button-dailymotion{ display: none;}

    .sceditor-button.sceditor-button-flash{ display: none;}

    .sceditor-button.sceditor-button-more{ display: none;}

    .sceditor-button.sceditor-button-subscript{ display: none;}

    .sceditor-button.sceditor-button-superscript{ display: none;}

    .sceditor-button.sceditor-button-fascroll{ display: none;}

    .sceditor-button.sceditor-button-faupdown{ display: none;}

    .sceditor-button.sceditor-button-fawow{ display: none;}

    .sceditor-button.sceditor-button-farand{ display: none;}

    .sceditor-button.sceditor-button-pastetext{ display: none;}

    .sceditor-button.sceditor-button-table{ display: none;}

    a.sceditor-button { background: #070707!important; display: block; font-family: arial!important;
    font-size: 12px!important;}

    a.sceditor-button.hover { background: #0a0a0a!important; display: block; font-family: arial!important;
    font-size: 12px!important;}

    div.sceditor-group { background: #070707!important; display: block; border: 1px solid #0a0a0a!important;
    font-family: arial!important; font-size: 12px!important; }


    /**FICHE DE PRÉSENTATION**/

    .present
    {background-color : #020202;
     width : 450px;
     height : auto;
     border: 1px solid #040404 ;
      -moz-border-radius: 15px 15px 15px 15px;}
    
   .image1
    {width : 440px;
     height: 400px;
     -moz-border-radius-topleft: 50px;
     -moz-border-radius-topright: 50px;
     -moz-border-radius-bottomleft: 50px;
     -moz-border-radius-bottomright: 50px;
     -moz-box-shadow: 0px 0px 10px #000000;}

    
   .pseudofiche
    {font-family : Aguafina Script;
    font-style : italic;
    font-weight : none;
    font-size : 40px;
    text-transform : none;
    letter-spacing : -2px;
    text-shadow : 0pt 0px 5pt;
    color : #3c5064;}

    .souspseudo
    {font-family : Courier New;
     color : #22232d;
     font-size : 14px;
     letter-spacing : -1px;
     text-transform : lowercase;
     text-align : center;}

    .leblabla
    {background-color : #020202;
      width : 425px;
      height : auto;
      border: 2px solid #040404;
      -moz-border-radius: 10px 10px 10px 10px;}

    .textblabla
    {font-style: none !important;
      color: #4B4B4B;
      line-height: 0.9;
      text-align:justify;
      font-size: 12px;
      padding-bottom : 10px;
      letter-spacing: 0px;
      margin-bottom : 10px;
      margin-left: 10px;
      margin-right: 10px;}



    .icone3

    {height:100px;
      width:100px;
      -webkit-border-radius:60px 60px 60px 60px;
      -moz-border-radius:60px 60px 60px 60px;
      background-position:middle;
      opacity:1; border:1px #040404 solid;}
    .theline {
      width: 80%;
      align: center;
      border-bottom: 2px #040404 solid;}
    
   
   
   /*************************************BALISES*/

    x { color: #22232d; font-weight: bold; font-variant: small-caps;}

    y { color: #22232d; font-weight: bold;}

    z {color: #22232d; font-weight: lighter;}

    w { color : #22232d ; font-weight: lighter; font-style: italic }

    i ,italic,em{
   }

    /*******DIV OFFICIELS****/

    .officiel {
      margin-bottom: 20px;
      margin-top : 30px;
    width: 450px;
    background-color: #808080;
    border-left: #762715 8px solid;
    border-right: #762715 8px solid;
    border-top : #541115 20px solid;
    border-bottom : #762715 8px solid;
    -moz-box-shadow: #762715 0px 0px 5px;
    -moz-border-radius-topleft: 120px;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 20px;
        -webkit-transition: 1.0s ease-out;
      -moz-transition: 1.0s ease-out;}

    .officiel:hover {
      border-top : #762715 20px solid;
        -webkit-transition: 1.0s ease-out;
      -moz-transition: 1.0s ease-out;}

    .officieltexte {
      line-height: 0.9;
      text-align:justify;
      font-size: 14px;
      letter-spacing: -1px;
      color: #541115;
      margin-bottom : 30px;
      margin-left: 20px;
      margin-right: 20px;}

    .officieltitre {
      text-transform: uppercase;
      font-family: courier;
      margin-top : -10px;
      font-style: italic;
      font-style: bold;
      text-shadow: #1A0404 0px 0px 5px;
      text-align: right;
      margin-right: 10%;
      font-size: 60px;
      color: #1A0404;
      letter-spacing: -10px;}

    .ligne {
      -moz-box-shadow: #762715 0px 0px 5px;
      width: 80%;
      align: center;
      border-bottom: 6px #762715 solid;
      -moz-border-radius: 20px 20px 20px 20px;
      -moz-box-shadow:
        -webkit-transition: 1.0s ease-out;
      -moz-transition: 1.0s ease-out;}
    
   .ligne:hover {
        width: 60%;
        -webkit-transition: 1.0s ease-out;
      -moz-transition: 1.0s ease-out;
      border-bottom: 6px #541115 solid;}

    .descrip {
      font-style: none;
      background-color:#1A0404;
      margin-top : 20px;
      margin-bottom: 50px;
    width: 450px;
    border-right : #762715 6px solid;
    border-left : #762715 6px solid;}

      .descriptitre {
      text-transform: uppercase;
      font-family: book antiqua;
      margin-top : -5px;
      text-shadow: #1A0404 1px 1px 1px;
      text-align: right;
      margin-right: 70px;
      font-size: 52px;
      color: #762715;
      letter-spacing: -7px;}
    
       .soustitre {
     font-style: italic;
      font-weight: bold;
      font-size: 22px;
      letter-spacing: -1.5pt;
      text-transform: lowercase;
      text-shadow: 0px 0px 1px;
      text-align: right;
      margin-right: 40px;
      color: #808080;}
    
   
   .descriptexte {
      font-style: none !important;
      line-height: 0.9;
      text-align:justify;
      font-size: 14px;
      padding-bottom : 20px;
      letter-spacing: -1px;
      margin-bottom : 30px;
      margin-left: 20px;
      margin-right: 20px;}

    .image { width: 300px;
      border-top: solid #762715 5px;
      border-bottom: solid #762715 5px;
      -moz-border-radius: 7px 7px 7px 7px;
      -moz-box-shadow: #762715 0px 0px 5px;}

          .img { width: 400px;}

    /* TEXTE CACHE SOUS IMAGE */


    .machin
    {
      width: 440px;
      height: 400px;
      overflow: hidden;
     -moz-border-radius-topleft: 50px;
     -moz-border-radius-topright: 50px;
     -moz-border-radius-bottomleft: 50px;
     -moz-border-radius-bottomright: 50px;
      border: 1px solid #040404 ;
      background-color: #040404 ;
    }
    .machin_img
    {
      position: relative;
      z-index: 2;
      width: 440px;
      height: 400px;
      margin-left: 0px;
        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;
    }
    .machin:hover .machin_img
    {
    margin-left: 500px;
    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;
    }
    .machin_descrip
    {
      position: relative;
      z-index: 1;
      width: 400px;
      height: 400px;
      margin-top: -400px;
      text-align: justify;
      font-size: 11px;
      color: #666666;
      padding: 2px;
      overflow: auto;
    }


    /* INFOBULLE TRANSITION - BLOC CONTENANT L’ICÔNE */
    .transition-NU{
    position: relative;
    margin: 10px;
    padding: 0;
    }
    /* INFOBULLE TRANSITION */
    .NU_transition{
    background: #1a0a0a;
    border: 0px solid #1a0a0a;
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
    left:80px;
    top: 0;
    z-index: 999;
    padding: 0;
      line-height: 0.9;
      text-align:justify;
      font-size: 14px;
      letter-spacing: -1px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: width 0.7s ease-in 0.2s, height 0.7s ease-in 0.2s, padding 0.7s ease-in 0.2s; /* pour navigateur webkit */
    -moz-transition: width 0.7s ease-in 0.2s, height 0.7s ease-in 0.2s, padding 0.7s ease-in 0.2s; /* pour navigateur mozilla */
    -o-transition: width 0.7s ease-in 0.2s, height 0.7s ease-in 0.2s, padding 0.7s ease-in 0.2s; /* pour navigateur opera */
    transition: width 0.7s ease-in 0.2s, height 0.7s ease-in 0.2s, padding 0.7s ease-in 0.2s; /* pour les navigateurs récents */
    }
    /* INFOBULLE AU SURVOL */
    .transition-NU:hover .NU_transition{
    overflow-y: auto;
    height: auto;
    width: 400px;
    padding: 5px;
    border-width: 1px;
    }
    /* IMAGE (icône) */
    .transition-NU img {height:100px;
      width:100px;
      -webkit-border-radius:60px 60px 60px 60px;
      -moz-border-radius:60px 60px 60px 60px;
      background-position:middle;
      opacity:1; border:3px #762715 solid;
    position: relative;
    z-index: 990;
    left: 0;
    bottom: 0;
    -webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
    -moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
    -o-transition: all 1s linear 0s;/* pour navigateur opera */
    transition: all 1s linear 0s; /* pour les navigateurs récents */
    }
    /* IMAGE AU SURVOL */
    .transition-NU:hover img {
    -webkit-transition: rotate(-360deg);/* pour navigateur webkit */
    -moz-transform: rotate(-360deg); /* pour navigateur mozilla */
    -o-transform: rotate(-360deg);/* pour navigateur opera */
      transform: rotate(-360deg); /* pour les navigateurs récents */}

    /*PROFIL CACHÉ */

#slide_avatar div {
 background: #020202;
  width:200px; /* Égal à la largeur de l'image */
 height: 320px; /* Égal à la hauteur de l'image */
 overflow: hidden;
 position: relative;
}
 
#slide_avatar div img {
        left: 0;
 position: absolute;
 top: 0;
        transition: transform 1s ease-in-out;
 -moz-transition: -moz-transform  1s ease-in-out;
 -o-transition: -o-transform 1s ease-in-out;
 -webkit-transition: -webkit-transform 1s ease-in-out;
  }
 
#slide_avatar div:hover img {
        float:left;
 transform: translatex(-200px); /* Valeur égale à la largeur de l'image */
 -moz-transform: translatex(-200px);
 -o-transform: translatex(-200px);
        -webkit-transform: translatex(-200px);
        transition: transform 1s ease-in-out;
 -moz-transition: -moz-transform  1s ease-in-out;
 -o-transition: -o-transform 1s ease-in-out;
 -webkit-transition: -webkit-transform 1s ease-in-out;
}


J'espère que c'est bon /o/
Et vous n'êtes pas nulle, moi aussi quand j'ai commencé j'avais tendance à foutre en l'air mes codes vu que j'y comprenais rien   (toujours maintenant d'ailleurs, mais un peu moins)

[Jiminy Cricket]

Génial ça marche nickel d'enfer.
Je te remercie d'avoir pris du temps pour m'aider dans tous les cas, c'est super gentil et le résultat est absolument parfait.   

[Aii-Chan~~]

Mais de rien  
Par contre si vous ne voulez pas de scrollbar en bas (j'en ai une de mon côté, alors que c'est pas nécessaire, rien ne dépasse oo"),
il faut remplacer l'overflow du template ;
<div style="width:190px;height: 310px;overflow: auto;">
par overflow-y ! C'est plus joli s'il n'y a rien qui dépassait en largeur   
Bonne continuation pour la construction de votre forum /o/

[Jiminy Cricket]

Nous avons besoin d'une scrollbar nous ! En largeur un peu de texte est rogné par la scrollbar de droite sinon.   

[Aii-Chan~~]

Oubliez ce que j'ai dis dans ce cas   
Bref, j'arrête le flood puisque le problème est réglé