Profil caché

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Profil caché

Message par Jiminy Cricket le Mar 29 Avr 2014 - 14:36

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 ( http://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.  Smile


Dernière édition par Jiminy Cricket le Jeu 8 Mai 2014 - 16:59, édité 1 fois

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Mer 30 Avr 2014 - 14:37

Je me permets un petit up !

Merci d'avance.  Cool 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Jeu 1 Mai 2014 - 15:34

Petit up journalier !  Very Happy 

Merci.  Smile 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Ven 2 Mai 2014 - 15:07

Personne pour me donner un coup de pouce ?  Very Happy 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Sam 3 Mai 2014 - 16:38

Je up. Merci d'avance.  Smile 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Mar 6 Mai 2014 - 21:04

Petit up !  Sad 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Jeu 8 Mai 2014 - 0:15

Petit up... Merci.  Surprised 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Aii-Chan~~ le Jeu 8 Mai 2014 - 4:29

Bonsoir ~ Je viens d'essayé de l'adapter avec un code que j'avais et cela semble fonctionner, donc je vous envoie ceci  Smile  (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).

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par néco le Jeu 8 Mai 2014 - 12:39

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 Wink
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

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Jeu 8 Mai 2014 - 13:55

Bonjour !

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

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 ?

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Aii-Chan~~ le Jeu 8 Mai 2014 - 15:17

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à*

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Jeu 8 Mai 2014 - 15:20

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 !

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Aii-Chan~~ le Jeu 8 Mai 2014 - 16:28

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  Rolling Eyes ):
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 Razz  (toujours maintenant d'ailleurs, mais un peu moins)

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Jeu 8 Mai 2014 - 16:56

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.  Very Happy 

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Aii-Chan~~ le Jeu 8 Mai 2014 - 17:04

Mais de rien Very Happy 
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  Wink 
Bonne continuation pour la construction de votre forum /o/


Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Jiminy Cricket le Jeu 8 Mai 2014 - 17:14

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

Jiminy Cricket
*

Messages : 42
Inscrit(e) le : 25/04/2014

http://thegameison.forumactif.org/
Jiminy Cricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Profil caché

Message par Aii-Chan~~ le Jeu 8 Mai 2014 - 17:21

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum