Une petite Pa d'amour ♥
    Message le Mar 27 Juin - 20:47
    Re! - passe en éclair - :troll:

    Je voulais la première, mais je voulais que pour les catégorie de factions, ce soit ton code de catégorie XD Genre les: catégorie 1 - catégorie 2 - catégorie 3, mais avec les grosses images et les descriptions à coté ♥️ Pardon je m'exprime mal :bigbad:

    Courage pour ton oral et déchire tout :fire:
    Bonne soirée ! *se barre les valises sous le bras* :haha:





    avatar
    Invité




    Message le Dim 9 Juil - 17:52
    Coucou !

    Voila le résultat : www

    Cel' m'a grandement aidé pour le jeu d'onglet, merci à lui ♥

    Bonnes vacances ^^
    Message le Dim 9 Juil - 20:26
    C'est trop bien, merci beaucoup :kyaaa: ♥️ C'est qui Cel' ? Que je le/la mette dans les crédits après :pong:





    avatar
    Invité




    Message le Dim 9 Juil - 20:53
    Monsieur @Celsius ^^

    Pour les codes du coup :

    CSS
    Code:
    /*Fait disparaître la colonne des widgets*/
    #left {
      display: none;
    }

    .infobulle {
      display: inline-block;
      text-align: center;
      margin: 0 1%;
    }

    .infobulle > div {
      position: absolute;
      margin-top: -50px;
      margin-left: -5px;
      opacity: 0;
      visibility: hidden;
      width: 400px;
      background: #CECEC8;
      text-align: center;
    }

    .infobulle > div img {
      width: 30%;
    }

    .infobulle:hover > div {
      opacity: 1;
      padding: 1%;
      visibility: visible;
     
    }

    .infobulle2 {
      display: inline-block;
      text-align: center;
    }

    .infobulle2 > div {
      position: absolute;
      margin-top: -10px;
      margin-left: -5px;
      opacity: 0;
      visibility: hidden;
      width: 300px;
      background: #E9E9E6;
      text-align: center;
    }

    .infobulle2:hover > div {
      opacity: 1;
      visibility: visible;
     
    }

    #pa {
      background-color: #E9E9E6;
      width: 94%;
      padding: 3%;
      font-size: 11px;
      font-family: 'Julius Sans One', sans-serif;
    }

    #colonne_gauche {
      float: left;
      width: 45%;
      margin: auto;
      display: block;
    }

    #colonne_droite {
      float: right;
      width: 45%;
      margin: auto;
      display: block;
    }

    #pa h2 {
      color: #151515;
      border: 0;
      text-align: center;
      font-family: 'Julius Sans One', sans-serif;
    }

    .boutons_pa {
      width: 95%;
      padding: 2%;
      margin: 1% 0;
      text-align: center;
      background: #CECEC8;
    }

    .boutons_pa a {
      color: #4A4949 !important;
      display: block;
      width: 90%;
    }

    .boutons_pa:hover {
      background: #888888;
    }

    .boutons_pa a:hover {
      color: #4A4949 !important;
    }

    .liens_rapides {
      float: left;
      display: block;
      margin: auto;
      text-align: center;
      font-size: 12px;
    }

    .liens_rapides a {
      display: block;
    }

    .liens_rapides img {
      width: 50%;
      text-align: center;
      margin: auto;
      display: block;
    }

    .blocs_pa {
      float: left;
      display: block;
      width: 44%;
      padding: 2%;
      margin: 5% 1% 0 1%;
      background: #CECEC8;
      color: #4A4949;
      text-align: justify;
      height: 200px;
      overflow: auto;
    }

    .news {
      font-size: 13px;
      position: absolute;
      top: 170px;
      right: 10px;
      width: 178px;
      height: 250px;
      padding: 0px;
      background: #CECEC8;
      border: 10px solid #41686C;
      overflow: auto;
      list-style-type: none;
    }

    .sf {
      width: 390px;
      height: 149px;
      overflow: hidden;
      position: relative;
      top: 0em;
      background-color: #D5D2D2;
    }

    .sf_img {
      position: relative;
      z-index: 2;
      width: 390px;
      height: 149px;
      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;
    }

    .sf:hover .sf_img {
      margin-left: 400px;
      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;
    }
       
    .sf_description {
      position: relative;
      z-index: 1;
      width: 385px;
      height: 100px;
      margin-top: -140px;
      font-size: 11px;
      color: #8c8c8c;
      padding: 15px;
      overflow: auto;
    }

    .contenu_staff {
      position: relative;
      background: url('https://img15.hostingpics.net/pics/193322Staff.png');
      width: 394px;
      height: 209px;
    }

    #staff1 {
      /*margin-top: 90px;*/
      position: absolute;
      top: 100px;
    }

    #staff2 {
      margin-left: 0px;
      margin-top: 0px;
    }

    #staff3 {
      margin-left: 270px;
      margin-top: -20px;
    }

    .staff_pa {
      width: 120px;
      height: 120px;
      border-radius: 100px;
      overflow: hidden;
      position: relative;
      top: 0em;
      background-color: #D5D2D2;
    }

    .staff_pa_img {
      position: relative;
      z-index: 2;
      width: 120px;
      height: 120px;
      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;
    }

    .staff_pa:hover .staff_pa_img {
      margin-left: 400px;
      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;
    }
       
    .staff_pa_description {
      position: relative;
      z-index: 1;
      width: 90px;
      height: 100px;
      margin-top: -90px;
      font-size: 11px;
      color: #8c8c8c;
      text-align: center;
      padding: 15px;
      overflow: auto;
    }

    .contenu_paonglets img {
      width: 50px !important;
      float: left;
      padding: 2% 4% 2% 2%;
    }


    .paonglet {
      padding: 10px;
      cursor: pointer;
      background-color: #888888;
      color: #e9e9e6;
    }
     
    .paonglet.active {
        background-color: #e9e9e6;
        color: #888;
    }

    .contenu_paonglet {
      padding: 2%;
      text-transform: normal;
      text-align: left;
      margin-top: 5%;
    }

    PA
    Code:
    <div id="pa">
                                                                                                                                                                                                                                                                                                      
       <div id="colonne_gauche">
                                                                                                                                                                                                                                                                                           
          <div class="boutons_pa">
                                                                                                                                                     <a href="#">  Règlement    </a>                                                                                                                                       
          </div>
                                                                                                                                                                                                                                                                             
          <div class="boutons_pa">
                                                                                                                                                     <a href="#">  Histoire    </a>                                                                                                                                       
          </div>
                                                                                                                                                                                                                                                                                             
          <div class="boutons_pa">
                                                                                                                                                     <a href="#">    Système de jeu    </a>                                                                                                                                       
          </div>
                                                                                                                                                                                                                                                                                               
          <div class="boutons_pa">
                                                                                                                                                     <a href="#">    Guide    </a>                                                                                                                                       
          </div>
                                                                                                                                                                                                                                                                                           
          <div class="boutons_pa">
                                                                                                                                                     <a href="#">    Aide    </a>                                                                                                                                       
          </div>
                                                                                                                                                  <br /><br />                                                                                                                                 
          <div class="liens_rapides">
                                                                                                                                                   <a href="#">Partenaires<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" />  </a>                                                                                                                                 
          </div>
                                                                                                                                                                                                                                                                       
          <div class="liens_rapides">
                                                                                                                                                   <a href="#">Prédéfinis<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" />  </a>                                                                                                                                 
          </div>
                                                                                                                                                                                                                                                                                 
          <div class="liens_rapides">
                                                                                                                                                   <a href="#">Concours<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" />  </a>                                                                                                                                 
          </div>
                                                                                                                                                                                                                                                                       
          <div class="liens_rapides">
                                                                                                                                                   <a href="#">Crédits<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" />  </a>                                                                                                                                 
          </div><br /><br />                                                                                                                               
          <div class="blocs_pa">
                                                                                                                                                                                                                                                                          
             <h2>
                                                                                                                                      Nouveautés                                                                                                                     
             </h2>
                                                                                                                                         <img src="http://emoji.fileformat.info/gemoji/syringe.png" style="width: 20px;" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />  <img src="http://emoji.fileformat.info/gemoji/syringe.png" style="width: 20px;" />  <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />  <img src="http://emoji.fileformat.info/gemoji/syringe.png" style="width: 20px;" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />                                                                                                                                     
          </div>
                                                                                                                                                                                                                                         
          <div class="blocs_pa">
                                                                                                                                                                                                                                                                          
             <h2>
                                                                                                                                    Nouveaux messages                                                                                                                     
             </h2>
                                                                                                                                                                                                                                                    
             <marquee direction="up" scrolldelay="170" onmouseover="this.stop();" onmouseout="this.start();">
                                                                                                                                                                                                                       
                <div id="derniers_sujets">
                                                                                                                                                                                                                            
                </div>
                                                                                                                                                                                                                       
             </marquee>
                                                                                                                                                                                                                                                              
          </div>
                                                                                                                                                                                                                                                                                       
       </div>
                                                                                                                                                                                                                                                                                                      
       <div id="colonne_droite">
                                                                                                                                                                                                                                                                         
          <div class="sf">
                                                                                                                                                                                                                                          
             <div class="sf_img">
                                                                                                                                <img src="https://img4.hostingpics.net/pics/230000ozdkewdxxjupaulgilmore.jpg" />                                                                                                               
             </div>
                                                                                                                                                                                                                                          
             <div class="sf_description">
                                                                                                                                <span id="subforums" class="gensmall">Lorsque les éléments se déchaînèrent sur Terre, il n'y eut nulle autre issue que celle d'essayer de survivre. La faune et la flore disparurent, ne laissant là que les Hommes abattus, abandonnés par leurs dieux. La population fut de moins en moins nombreuse, jusqu'à s'éparpiller, semblant disparaître en même temps que tout ce qu'ils avaient connu jusqu'ici. Les villes tombèrent en lambeaux, les villages en ruine, la nature recouvrant toutes traces humaines. Petit à petit, la planète se recouvrit d'une nouvelle flore et d'une dangereuse faune. Pour s'en prémunir, la civilisation renaquît de ses cendres, parcourant des kilomètres pour rejoindre Tadryon: la ville de tous les espoirs.  Si l'Homme pensait pouvoir se protéger en se rassemblant, les siècles passés firent évoluer certains gênes. Des dons naquirent naturellement au sein de la population: plus forts, plus résistants aux nouvelles maladies ou pouvant percevoir leur environnement comme aucun autre, ils furent chassés par les plus croyants, s'octroyant le nom de Fils d'Ohibaan.  Tandis que la guerre est déclarée entre les deux peuples, les Spectres guettent la moindre opportunité qui pourrait rendre leur survie plus agréable. <a href="http://dysnomie.forumactif.com/t5-histoire">Plus ?</a></span>                                                                                               
             </div>
                                                                                                                                                                                                                                          
          </div>
                                                                                                                    <br /><br />                                                                                           
          <div class="contenu_staff">
                                                                                                                                                                                                  
             <div id="staff1" class="staff_pa">
                                                                                                                                                                                                                                             
                <div class="staff_pa_img">
                                                                                                                                   <img src="https://i58.servimg.com/u/f58/15/39/85/01/24537610.jpg" />                                                                                                               
                </div>
                                                                                                                                                                                                                                             
                <div class="staff_pa_description">
                                                                                                                                   Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>                                                                                             
                </div>
                                                                                                                                                                                                                                             
             </div>
                                                                                                                                                                                            
             <div id="staff2" class="staff_pa">
                                                                                                                                                                                                                                             
                <div class="staff_pa_img">
                                                                                                                                   <img src="https://i58.servimg.com/u/f58/15/39/85/01/24537610.jpg" />                                                                                                               
                </div>
                                                                                                                                                                                                                                             
                <div class="staff_pa_description">
                                                                                                                                   Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>                                                                                             
                </div>
                                                                                                                                                                                                                                             
             </div>
                                                                                                                                                                                      
             <div id="staff3" class="staff_pa">
                                                                                                                                                                                                                                         
                <div class="staff_pa_img">
                                                                                                                                   <img src="https://i58.servimg.com/u/f58/15/39/85/01/24537610.jpg" />                                                                                                               
                </div>
                                                                                                                                                                                                                                             
                <div class="staff_pa_description">
                                                                                                                                   Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>                                                                                             
                </div>
                                                                                                                                                                                                                                             
             </div>
                                                                                                                                                                                                  
          </div><br /><br />                                                                                 
          <div class="infobulle">
                     <span style="color: #6673b5;">Tadryon</span>        <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/tadryo10.png" />        <br />nombre d'habitants       
             <div>
                           
                <div class="paonglets">
                                   <span class="paonglet">Catégorie 1</span> <span class="paonglet">Catégorie 2</span>                <span class="paonglet">Catégorie 3</span>           
                </div>
                           
                <div class="contenu_paonglets">
                                  
                   <div style="display: block;" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                                  
                   <div style="display: none;" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                                  
                   <div style="display: none;" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                              
                </div>
                       
             </div>
                
          </div>
             
          <div class="infobulle">
                     <span style="color: #4e996c;">Fils d'Ohibaan</span>        <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" />        <br />nombre d'habitants       
             <div>
                           
                <div class="paonglets">
                                   <span class="paonglet">Catégorie 4</span> <span class="paonglet">Catégorie 5</span>                <span class="paonglet">Catégorie 6</span>           
                </div>
                           
                <div class="contenu_paonglets">
                                  
                   <div class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                                  
                   <div style="display: none" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                                  
                   <div style="display: none" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                              
                </div>
                       
             </div>
                
          </div>
             
          <div class="infobulle">
                     <span style="color: #a84343;">Spectre</span>        <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/tadryo10.png" />        <br />nombre d'habitants       
             <div>
                           
                <div class="paonglets">
                                   <span class="paonglet">Catégorie 7</span> <span class="paonglet">Catégorie 8</span>                <span class="paonglet">Catégorie 8</span>           
                </div>
                           
                <div class="contenu_paonglets">
                                  
                   <div class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                                  
                   <div style="display: none;" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                                  
                   <div style="display: none;" class="contenu_paonglet">
                                          <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.               
                   </div>
                              
                </div>
                       
             </div>
                
          </div>
                                                                                                                                                                                                             
       </div>
                                                                                                                                                                                                                                                                                              
       <div class="clear">
                                                                                                                                                                                                                                                                                                     
       </div><link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet" />     
    </div>
    Message le Lun 10 Juil - 13:17
    Merci tout les deux ♥ Est ce que j'aurai toujours accès à cette commande ? Parce que actuellement, je ne peux pas m'occuper des codes T_T





    avatar
    Invité




    Message le Lun 10 Juil - 13:25
    De rien :)
    Yep pas de soucis !
    Message le Lun 10 Juil - 18:46
    Oki merci beaucoup ♥️ :hug:





    Message le Mar 29 Aoû - 17:43
    Bonjour !  :hellow:

    J'ai un petit problèmes avec la Pa :bigbad:

    J'ai remarqué ceci:

    Voici le code que j'ai dans: "Pa" > "Généralité"
    Code:
    <div id="pa">
                                                                                                                                                                                                                                                                                                                                                                                  
     <div style="" id="colonne_gauche">
                                                                                                                                                                                                                                                                                                                                                                          
     <div class="boutons_pa">
                                                                                                                                                                                         <a href="#">  Règlement    </a>                                                                                                                                                                                  
     </div>
                                                                                                                                                                                                                                                                                                                                                            
     <div class="boutons_pa">
                                                                                                                                                                                         <a href="#">  Histoire    </a>                                                                                                                                                                                  
     </div>
                                                                                                                                                                                                                                                                                                                                                                            
     <div class="boutons_pa">
                                                                                                                                                                                         <a href="#">    Système de jeu    </a>                                                                                                                                                                                  
     </div>
                                                                                                                                                                                                                                                                                                                                                                              
     <div class="boutons_pa">
                                                                                                                                                                                         <a href="#">    Guide    </a>                                                                                                                                                                                  
     </div>
                                                                                                                                                                                                                                                                                                                                                                          
     <div class="boutons_pa">
                                                                                                                                                                                         <a href="#">    Aide    </a>                                                                                                                                                                                  
     </div>
                                                                                                                                                                                      <br /><br />                                                                                                                                                                            
     <div class="liens_rapides">
                                                                                                                                                                                       <a href="#">Partenaires<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" />  </a>                                                                                                                                                                            
     </div>
                                                                                                                                                                                                                                                                                                                                                      
     <div class="liens_rapides">
                                                                                                                                                                                       <a href="#">Prédéfinis<br /><img src="https://img15.hostingpics.net/pics/723954prdf.png" />  </a>                                                                                                                                                                            
     </div>
                                                                                                                                                                                                                                                                                                                                                                
     <div class="liens_rapides">
                                                                                                                                                                                       <a href="#">Concours<br /><img src="https://img15.hostingpics.net/pics/896049concours.png" />  </a>                                                                                                                                                                            
     </div>
                                                                                                                                                                                                                                                                                                                                                      
     <div class="liens_rapides">
                                                                                                                                                                                       <a href="#">Crédits<br /><img src="https://img15.hostingpics.net/pics/274506crdit.png" />  </a>                                                                                                                                                                            
     </div><br /><br />                                                                                                                                                                          
     <div class="blocs_pa">
                                                                                                                                                                                                                                                                                                                                                            
     <h2>
                                                                                                                                                                          Nouveautés                                                                                                                                                                    
     </h2>
                                                                                                                                                                             <img style="width: 20px;" src="http://emoji.fileformat.info/gemoji/syringe.png" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />  <img style="width: 20px;" src="http://emoji.fileformat.info/gemoji/syringe.png" />  <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />  <img style="width: 20px;" src="http://emoji.fileformat.info/gemoji/syringe.png" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />                                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                                                                        
     <div class="blocs_pa">
                                                                                                                                                                                                                                                                                                                                                            
     <h2>
                                                                                                                                                                        Nouveaux messages                                                                                                                                                                    
     </h2>
                                                                                                                                                                                                                                                                                                                                      
     <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="170" direction="up">
                                                                                                                                                                                                                                                                                                            
     <div id="derniers_sujets">
                                                                                                                                                                                                                                                                      
     </div>
                                                                                                                                                                                                                                                                                                          
     </marquee>
                                                                                                                                                                                                                                                                                                                                              
     </div>
                                                                                                                                                                                                                                                                                                                                                                    
     </div><span class="gensmall" id="subforums">                                                                                                                                                                                                                                                                                                                                               </span>                
     <div style="" id="colonne_droite">
                                                                                                                                                                                                                                                                                                                                                      
     <div class="sf">
                                                                                                                                                                                                                                                                                                                            
     <div class="sf_img">
                                                                                                                                                                    <img src="https://img15.hostingpics.net/pics/515759crit.jpg" />                                                                                                                                                            
     </div>
                                                                                                                                                                                                                                                                                                                            
     <div class="sf_description">
                                                                                                                                                                    <span id="subforums" class="gensmall">Lorsque les éléments se déchaînèrent sur Terre, il n'y eut nulle autre issue que celle d'essayer de survivre. La faune et la flore disparurent, ne laissant là que les Hommes abattus, abandonnés par leurs dieux. La population fut de moins en moins nombreuse, jusqu'à s'éparpiller, semblant disparaître en même temps que tout ce qu'ils avaient connu jusqu'ici. Les villes tombèrent en lambeaux, les villages en ruine, la nature recouvrant toutes traces humaines. Petit à petit, la planète se recouvrit d'une nouvelle flore et d'une dangereuse faune. Pour s'en prémunir, la civilisation renaquît de ses cendres, parcourant des kilomètres pour rejoindre Tadryon: la ville de tous les espoirs.  Si l'Homme pensait pouvoir se protéger en se rassemblant, les siècles passés firent évoluer certains gênes. Des dons naquirent naturellement au sein de la population: plus forts, plus résistants aux nouvelles maladies ou pouvant percevoir leur environnement comme aucun autre, ils furent chassés par les plus croyants, s'octroyant le nom de Fils d'Ohibaan.  Tandis que la guerre est déclarée entre les deux peuples, les Spectres guettent la moindre opportunité qui pourrait rendre leur survie plus agréable. <a href="http://dysnomie.forumactif.com/t5-histoire">Plus ?</a>  </span>                                                                                                                                      
     </div>
                                                                                                                                                                                                                                                                                                                          
     </div>
                                                                                                                                                        <br /><br />                                                                                                                                      
     <div class="contenu_staff">
                                                                                                                                                                                                                                                                                    
     <div class="staff_pa" id="staff1">
                                                                                                                                                                                                                                                                                                                                  
     <div class="staff_pa_img">
                                                                                                                                                                       <img src="https://img15.hostingpics.net/pics/850755581.jpg" />                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                                                                                  
     <div class="staff_pa_description">
                                                                                                                                                                       Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>                                                                                                                                              
     </div>
                                                                                                                                                                                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                              
     <div class="staff_pa" id="staff2">
                                                                                                                                                                                                                                                                                                                                  
     <div class="staff_pa_img">
                                                                                                                                                                       <img src="https://img15.hostingpics.net/pics/717117572.jpg" />                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                                                                                  
     <div class="staff_pa_description">
                                                                                                                                                                       Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>                                                                                                                                              
     </div>
                                                                                                                                                                                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                        
     <div class="staff_pa" id="staff3">
                                                                                                                                                                                                                                                                                                                              
     <div class="staff_pa_img">
                                                                                                                                                                       <img src="https://img15.hostingpics.net/pics/779591870685122709adam.png" />                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                                                                                  
     <div class="staff_pa_description">
                                                                                                                                                                       Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>                                                                                                                                              
     </div>
                                                                                                                                                                                                                                                                                                                                
     </div>
                                                                                                                                                                                                                                                                                  
     </div><br /><br />                                                                                                                            
     <div class="infobulle">
                       <span style="color: #6673b5;">Tadryon</span>        <br /> <img src="https://img11.hostingpics.net/pics/2749246512.png" />        <br />nombre d'habitants                  
     <div>
                                            
     <div class="paonglets">
                                     <span class="paonglet">Catégorie 1</span> <span class="paonglet">Catégorie 2</span>                <span class="paonglet">Catégorie 3</span>                          
     </div>
                                            
     <div class="contenu_paonglets">
                                                      
     <div class="contenu_paonglet" style="display: block;">
                                            <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                      
     <div class="contenu_paonglet" style="display: none;">
                                            <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                      
     <div class="contenu_paonglet" style="display: none;">
                                            <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                
     </div>
                                      
     </div>
                            
     </div>
                        
     <div class="infobulle">
                       <span style="color: #4e996c;">Fils d'Ohibaan</span>        <br /> <img src="https://img11.hostingpics.net/pics/2749246512.png" />        <br />nombre d'habitants                  
     <div>
                                            
     <div class="paonglets">
                                     <span class="paonglet">Catégorie 4</span> <span class="paonglet">Catégorie 5</span>                <span class="paonglet">Catégorie 6</span>                          
     </div>
                                            
     <div class="contenu_paonglets">
                                                      
     <div class="contenu_paonglet">
                                            <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                      
     <div class="contenu_paonglet" style="display: none">
                                            <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                      
     <div class="contenu_paonglet" style="display: none">
                                            <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                
     </div>
                                      
     </div>
                            
     </div>
                        
     <div class="infobulle">
                       <span style="color: #a84343;">Spectre</span>        <br /> <img src="https://img11.hostingpics.net/pics/2749246512.png" />        <br />nombre d'habitants                  
     <div>
                                            
     <div class="paonglets">
                                     <span class="paonglet">Catégorie 7</span> <span class="paonglet">Catégorie 8</span>                <span class="paonglet">Catégorie 8</span>                          
     </div>
                                            
     <div class="contenu_paonglets">
                                                      
     <div class="contenu_paonglet">
                                            <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                      
     <div class="contenu_paonglet" style="display: none;">
                                            <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                      
     <div class="contenu_paonglet" style="display: none;">
                                            <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                    <br />                    <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros                    ut nisl condimentum rutrum id accumsan elit.                                
     </div>
                                                
     </div>
                                      
     </div>
                            
     </div>
                                                                                                                                                                                                                      
     </div>
                                                                                                                                                                                                                                                                                                      
     <div class="clear">
                                                                                                                                                                                                                                                                                                              
     </div><link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet" />      
    </div>


    Et voici le CSS:
    Code:
    /*Fait disparaître la colonne des widgets*/
    #left {
      display: none;
    }

    .infobulle {
      display: inline-block;
      text-align: center;
      margin: -15% 5% ;
      }

    .infobulle > div {
      position: absolute;
      margin-top: -50px;
      margin-left: 5px;
      opacity: 0;
      visibility: hidden;
      width: 400px;
      background: #CECEC8;
      text-align: center;
    }

    .infobulle > div img {
      width: 30%;
    }

    .infobulle:hover > div {
      opacity: 1;
      padding: 1%;
      visibility: visible;
      
    }

    .infobulle2 {
      display: inline-block;
      text-align: center;
    }

    .infobulle2 > div {
      position: absolute;
      margin-top: -10px;
      margin-left: -5px;
      opacity: 0;
      visibility: hidden;
      width: 300px;
      background: #E9E9E6;
      text-align: center;
    }

    .infobulle2:hover > div {
      opacity: 1;
      visibility: visible;
      
    }

    #pa {
      background-color: #E9E9E6;
      width: 93%;
      padding: 3%;
      font-size: 11px;
      font-family: 'Julius Sans One', sans-serif;
    }

    #colonne_gauche {
      float: left;
      width: 48%;
      margin: auto;
      display: block;
    }

    #colonne_droite {
      float: right;
      width: 48%;
      margin: auto;
      display: block;
    }

    #pa h2 {
      color: #151515;
      border: 0;
      text-align: center;
      font-family: 'Julius Sans One', sans-serif;
    }

    .boutons_pa {
      width: 95%;
      padding: 2%;
      margin: 1% 0;
      text-align: center;
      background: #CECEC8;
    }

    .boutons_pa a {
      color: #4A4949 !important;
      display: block;
      width: 90%;
        font-family:Julius Sans One;
    }

    .boutons_pa:hover {
      background: #41686C;
    }

    .boutons_pa a:hover {
      color: #FFFFFF !important;
        font-family:Julius Sans One;
    }

    .liens_rapides {
      float: left;
      display: block;
      margin: -3% 2%;
      text-align: center;
      font-size: 12px;
    }

    .liens_rapides a {
      display: block;
    }


    .liens_rapides img {
      width: 50%;
      text-align: center;
      margin: auto;
      display: block;
    }

    .blocs_pa {
      float: left;
      display: block;
      width: 44%;
      padding: 2%;
      margin: 5% 1% 0 1%;
      background: #CECEC8;
      color: #4A4949;
      text-align: justify;
      height: 200px;
      overflow: auto;
    }

    .news {
      font-size: 13px;
      position: absolute;
      top: 170px;
      right: 10px;
      width: 178px;
      height: 250px;
      padding: 0px;
      background: #CECEC8;
      border: 10px solid #41686C;
      overflow: auto;
      list-style-type: none;
    }

    .sf {
      width: 400px;
      height: 150px;
      overflow: hidden;
      position: relative;
      top: 4px;
      margin-right:4px
      background-color: #D5D2D2;
    }

    .sf_img {
      position: relative;
      z-index: 2;
      width: 400px;
      height: 150px;
      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;
    }

    .sf:hover .sf_img {
      margin-left: 400px;
      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;
    }
        
    .sf_description {
      position: relative;
      z-index: 1;
      width: 384px;
      height: 110px;
      margin-top: -150px;
      font-size: 11px;
      color: #8c8c8c;
      padding: 15px;
      overflow: auto;
      right: 5px;
    }

    .contenu_staff {
      position: relative;
      background: url('https://img15.hostingpics.net/pics/193322Staff.png');
      width: 400px;
      height: 209px;
      top: -25px;
    }

    #staff1 {
      /*margin-top: 90px;*/
      position: absolute;
      top: 79px;
      left: 20px;
    }

    #staff2 {
    top: 20px;
      right:3px;
        margin-left: 0px;
      margin-top: 0px;
    }

    #staff3 {
      margin-left: 240px;
      margin-top: -18px;
    }

    .staff_pa {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      overflow: hidden;
      position: relative;
      top: 0em;
      background-color: #D5D2D2;
    }

    .staff_pa_img {
      position: relative;
      z-index: 2;
      width: 120px;
      height: 120px;
      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;
      right: 10px;
    }

    .staff_pa:hover .staff_pa_img {
      margin-left: 400px;
      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;
    }
        
    .staff_pa_description {
      position: relative;
      z-index: 1;
      width: 90px;
      height: 100px;
      margin-top: -90px;
      font-size: 11px;
      color: #8c8c8c;
      text-align: center;
      padding: 15px;
      overflow: auto;
      right: 10px;
      top: -5px;
    }

    .contenu_paonglets img {
      width: 50px !important;
      float: left;
      padding: 2% 4% 2% 2%;
    }


    .paonglet {
      padding: 10px;
      cursor: pointer;
      background-color: #888888;
      color: #e9e9e6;
    }
     
    .paonglet.active {
        background-color: #e9e9e6;
        color: #888;
    }

    .contenu_paonglet {
      padding: 2%;
      text-transform: normal;
      text-align: left;
      margin-top: 5%;
    }

    Voilà, désolée T_T
    Merci de ton aide ♥️







      La date/heure actuelle est Dim 19 Nov - 5:35