Personnalisation d'une page d'accueil (forum rpg HP)

Rappel du premier message :

Bonjour à toute et à tous,

Après concertation avec les membres du Staff, Nous avons décidé de personnaliser notre PA actuel (codé par Elenthil, encore merci à elle).
Tout d'abord, voici le forum sur lequel se trouve la PA actuel : http://mimbulus-mimbletonia.forumactif.org/
+ mon forum test : http://test-code-3mk.forumactif.org/

- Voilà j'aimerais si possible rajouter une image dans la partie Staff (vu qu'on va bientôt accueillir un troisième membre), mais je ne sais pas quoi toucher par crainte de "bousiller" le code. Pensez-vous que ça serait possible quitte à faire ceci un peu sous forme de triangle (je sais pas si c'est claire, mais dites-le moi si besoin je ferais un schéma).

- à la place des prédefinis, j'aimerais placer la catégorie des membres du Mois, ils seront trois. C'est un peu la même chose que pour le staff, sauf que les images serait plus petite et ça donnerait ça : https://2img.net/image.noelshack.com/fichiers/2016/28/1468578906-20160715-122828.jpg (c'est un peu fait à l'arrache je sais, mais je vais le refaire plus tard).
Pour faire simple, je ne sais vraiment pas comment faire pour faire ça sachant que j'ai peur une nouvelle fois de tout "bousiller".

Pourriez-vous m'aider ?

voici les différents codes :

CSS et HTML :

Code:

<!--          - PA pour GwenM réalisée par Elenthil -          -->      <meta charset="utf-8" />          <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:300" />          <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Grand+Hotel" />      <style type="text/css">
          
          /* MISE EN FORME PA */
          
          body{
            margin: 0px;
          }
  
  .bloc_pa{
      width: 900px;
      
          background-color: #E8E8E8; /* Pour changer la couleur du fond de la PA */
  }
  
  .bloc_pa h1{
      text-align: center;
      margin: 0;
            font-family: 'Grand Hotel', cursive; /* Pour changer la police du titre Bienvenue sur le forum */
            color: #949494; /* Pour changer la couleur du titre Bienvenue sur le forum */
            text-shadow: 1px 1px #ffffff;
  }
          
          /* MISE EN FORME MENU DE NAVIGATION */
  
  
  .menu_nav{
      width: 900px;
      margin-bottom: 25px;
      
  }
  
  .bloc_pa ul{
      
      margin: auto;
      padding: 0;
      text-align: center;
  }
  
  .bloc_pa li{
      display: inline-block;
  }
  
  .menu_nav a{
      text-decoration: none;
            color: #949494; /* Pour changer la couleur des liens de navigation sous le titre */
            font-family: Grand Hotel; /* Pour changer l'écriture des liens de navigation sous le titre */
            font-size: 22px; /* Pour changer la taille des liens de navigation sous le titre */
  }
  
  .menu_nav a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
  
          /* BLOC CONTEXTE - STAFF - ACTUALITES */
          
  .bloc_ligne1{
      width: 900px;
      
  }
  
  .bloc_contexte, .bloc_news{
      width: 320px;
      
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
  
  .contexte, .news{
      width: 295px;
      height: 175px;
            background-color: #BDBDBD; /* Pour changer la couleur du bloc contexte et du bloc news */
      margin: auto;
      position: relative;
      overflow: hidden;
  }
  
  .contexte p {
            font-family: Tahoma; /* Pour changer la police d'écriture du texte contexte */
      font-size: 11px;
      line-height: 14px;
      padding: 5px;
      margin: 0px;
            color: #575757; /* Pour changer la couleur du texte contexte */
      text-align: center;
  }
  
  .contexte p a {
      text-decoration: none;
      font-weight: bold;
            color: #575757; /* Pour changer la couleur du lien contexte */
      
      
  }
  
  .contexte p a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
  
  .contexte img{
      position: absolute;
      top: 0px;
      left: 0px;
      transition: 1s ease left;
      width: 100%;
      height: 100%;
  }
  
  .contexte:hover img{
      left: -355px;
      
  }
          
        .titre_news{
            margin: 0;
            font-size: 22px; /* Pour changer la taille du titre Actualités */
            font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Actualités*/
            color: #949494; /* Pour changer la couleur du titre Actualités */
            font-weight: normal;
            text-align: center;
          }
          
          .news{
          overflow: auto; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */
          }
  
  .news p{
text-decoration: none;
            font-family: Tahoma; /* Pour changer la police du texte dans le bloc News */
      padding: 5px 5px 5px 10px;
      font-size: 11px;
      margin: 0;
      line-height: 14px;
            color: #575757; /* Pour changer la couleur du texte du bloc News */
      
  }
  
  .bloc_staff{
      width: 250px;
      
      height: 200px;
      display: inline-block;
  
  }
  
  .staff{
      width: 290px;
      height: 195px;
      text-align: center;
  }
  
  .rond_staff{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
  
  .profil_staff{
      
      width: 129px;
      height: 160px;
      text-align: center;
      display: inline-block;
  }
  
    .position_D{
      position: relative;
      right: 20px;
  }
  
  .position_G{
      position:relative;
      right: 20px;
  }
  
  .profil_staff p, .profil_staff p a{
      margin: 0;
            font-family: 'Oswald', sans-serif; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */
      line-height: 10px;
            color: #575757; /*Pour changer la couleur du texte des membres du staff */
  }
  
  .profil_staff p a{
      text-decoration: none;
  }
  
  .profil_staff p a:hover{
      text-decoration: underline;
  }
  
  .texte_rangstaff{
            font-family: Tahoma; /* Pour changer la police d'écriture du rang Staff */
      font-variant: small-caps;
      font-size: 10px;
  }
  
  .position_infostaff{
      position: relative;
      top: 7px;
  }
          
          
          
  
  
          /* BLOCS VIDEO - PREDEFS - COUPE */
  
  .bloc_ligne2{
      width: 900px;
      
  }
  
  .bloc_video, .bloc_coupe{
      width: 320px;
      
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
  
  .video, .coupe{
      width: 295px;
      height: 175px;
            background-color: #bdbdbd; /* Pour changer la couleur des blocs video et coupe des maisons */
      margin: auto;
  }
  
  .video iframe{
      position: relative;
      top: 5px;
      left: 5px;
  }
          
  
  .position_badges{
      
      margin: auto;
      text-align: center;
      position: relative;
            z-index: 10;
      
  }
          
        .position_badges p {
            margin: 0;
            font-size: 22px;
            font-family: Grand Hotel; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */
            color: #949494;
          }
  
  
  
  .badge{
      
      display: inline-block;
      margin: 0px 20px;
            z-index: 10;
            position: relative;
            background-color: #bdbdbdb; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */
            width: 75px;
            bottom: 3px;
            height: 65px;
  }
          
        .badge img{
          width: 64px;
            opacity: 1;
            transition: 500ms;
            z-index: -7;
            background-color: #bdbdbd; /* Pour changer la couleur derrière les blasons car image en png transparente */
        }
          
        .badge img:hover{
            opacity: 0;
          }
          
          .badge .ptsH{
            position: absolute;
            bottom: 32px;
            z-index: -3;
            color: #B91D22; /* COULEUR POINTS GRYFFONDOR */
            font-family: Tahoma; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
            
          }
          
          .badge .ptsB{
            position: absolute;
            bottom: 30px;
            z-index: -3;
            color: #016A96; /* COULEUR POINTS SERDAIGLE */
            font-family: Tahoma; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
            
          }
          
          .ptsH.couleurP{
            color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */
          }
          
          .ptsB.couleurS{
            color: #204A22; /* COULEUR POINTS SERPENTARD */
          
          }
          
  
  
  .bloc_predefs{
      width: 250px;
      
      height: 200px;
      display: inline-block;
  }
  
  .predefs{
      width: 250px;
      height: 195px;
      text-align: center;
      margin-top: 25px;
  
  }
  
  .rond_predef{
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #bdbdbd;
      display: inline-block;
      text-align: center;
      margin: 0px 5px;
            overflow: hidden;
  }
          
          .predefs a {
            text-decoration: none;
          }
  
        .titre_predefs{
            margin-bottom: 15px;
            font-family: Grand Hotel; /* Pour changer l'écriture du titre Prédéfinis */
            color: #949494; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 22px;
            margin-top: 0;
          }
  
  
          /* BLOC PARTENAIRES - CREDITS */
  
  .bloc_ligne3{
      width: 900px;
      height: 52px;
      text-align: center;
      
  }
          
        .creditsNU, .creditsNU a {
            font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */
            font-size: 9px;
            margin: 0;
            color: #575757; /* Pour changer la couleur pour le texte des crédits pour NU */
          }
  
  
  
  </style>                      
<div class="bloc_pa">
                                                              
   <!--          - TITRE DU FORUM -          -->                        
   <h1>
                    Bienvenue sur "Mimbulus Mimbletonia"            
   </h1>
                                                              
   <!--          - BARRE DES LIENS DE NAVIGATION (Remplacer # par les liens) -          -->                        
   <div class="menu_nav">
                                                
      <ul>
                                                        
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/t2-reglement" target="blank">Règlement</a>                
         </li>
                                                  
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte" target="blank">Contexte</a>                
         </li>
                                                  
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/t22-bottin-des-avatars" target="blank">Avatars Pris</a>                
         </li>
                                                  
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/f9-predefinis" target="blank">Prédéfinis</a>                
         </li>
                                                  
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/f8-presentations" target="blank">Présentations</a>                
         </li>
                                                  
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/f3-annexes" target="blank">Annexes</a>                
         </li>
                                                  
         <li>
                                <a href="http://mimbulus-mimbletonia.forumactif.org/f72-affiliation" target="blank">Affiliation</a>                
         </li>
                                                      
      </ul>
                                              
   </div>
                                      
   <div class="bloc_ligne1">
                                                                        
      <!--          - BLOC CONTEXTE AVEC TEXTE + LIEN (Remplacer # par le lien) -          -->                              
      <div class="bloc_contexte">
                                                        
         <div class="contexte">
                                                    
            <p>
                                       Vingt années se sont écoulées depuis la chute de Lord Voldemort vaincu par le célèbre Harry Potter. Le monde des sorciers est de nouveau sur pied et un nouveau ministre de la magie a été nommé, un certain Cassius Owell qui avait pris part à la bataille finale à Poudlard comme membre de l'Ordre du Phoenix.<br />            Contrairement à l'idée préconçue, Harry Potter n'est pas devenu Auror comme son père avant lui, le nouveau Ministre de la Magie et les membres du Magenmagot lui ont demandé de devenir le nouveau directeur de Poudlard, Minerva McGonagall ne pouvant assumer ce rôle... <br />            <a target="blank" href="#">Lire la suite</a>                    
            </p>
                                                                                                      <img src="http://auto.img.v4.skyrock.net/1896/86401896/pics/3133887922_1_2_RJoFGfks.gif" />                      
            <!--          - EMPLACEMENT DU LIEN GIF CONTEXTE - Dimensions 295*175px -          -->                                          
         </div>
                                                  
      </div>
                                                              
      <!--          - BLOC STAFF CENTRAL -          -->                                          
      <div class="bloc_staff">
                                                        
         <div class="staff">
                                                                    
            <div class="profil_staff position_G">
                                                                                                        
               <div class="rond_staff">
                                                                                                                                                                
                  <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          -->                                                                                      <img alt="membre_staff" src="http://i64.tinypic.com/i2pym0.jpg" />                                                                                                              
               </div>
                                                                                                                                                  
               <p>
                                            Cassius Owell <br />                            
                  <!--          - NOM DU MEMBRE DU STAFF -          -->                                                                                      <span class="texte_rangstaff">Fondateur</span> <br />                            
                  <!--          - RANG DU MEMBRE DU STAFF -          -->                                                                                      <span class="position_infostaff">                                                                                        <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/u3">Profil</a> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3">Mp</a>                              
                     <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->                                                                                      </span>                                                                
               </p>
                                                                                                
            </div>
                                                                    
            <div class="profil_staff position_D">
                                                                                                        
               <div class="rond_staff">
                                                                                                                                                              
                  <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          -->                                                                                      <img alt="membre_staff" src="http://s9.tinypic.com/rvj4mw_th.jpg" />                                                                                                            
               </div>
                                                                                                                                                  
               <p>
                                            Célian R. Lestrange <br />                            
                  <!--          - NOM DU MEMBRE DU STAFF -          -->                                                                                        <span class="texte_rangstaff">Administrateur</span> <br />                            
                  <!--          - RANG DU MEMBRE DU STAFF -          -->                                                                                        <span class="position_infostaff">                                                                                            <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/u12">Profil</a> <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=12">Mp</a>                              
                     <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->                                                                                        </span>                                                                
               </p>
                                                                                              
            </div>
                                                                            
         </div>
                                                                
      </div>
                                                                        
      <!--          - BLOC ACTUALITES -          -->                                
      <div class="bloc_news">
                                                                
         <div class="news">
                                                                                                                          
            <h2 class="titre_news">
                                     Actualités                    
            </h2>
                                                                                                                        
            <p>
                                     <strong>01.06.16 :</strong> Ouverture du forum                    
            </p>
                                                                  
            <p>
                                     <strong>04.06.16 :</strong> Version 2 du forum                    
            </p>
                                                                  
            <p>
                                     <strong>18.06.16 :</strong> Ouverture du sujet pour l'inscription à la journée d'intégration <a href="http://mimbulus-mimbletonia.forumactif.org/t217-inscription-a-la-journee-d-integration-event-septembre-2018-irp">ici</a> et du sujet concernant les capacités spéciales <a href="http://mimbulus-mimbletonia.forumactif.org/t193-les-capacites-speciales">ici</a>                    
            </p>
                                                                  
            <p>
                                     <strong>01.07.2016 :</strong> Version 3 du forum & Bilan du mois de Juin <a href="http://mimbulus-mimbletonia.forumactif.org/t258-bilan-du-mois-de-juin-2016">ici</a>                    
            </p>
                                                                  
            <p>
                                     <strong>XX.XX :</strong> Descriptif de la news ici                    
            </p>
                                                                  
            <p>
                                     <strong>XX.XX :</strong> Descriptif de la news ici                    
            </p>
                                                                                          
         </div>
                                                                
      </div>
                                              
   </div>
                                      
   <div class="bloc_ligne2">
                                                                        
      <!--          - BLOC VIDEO -          -->                              
      <div class="bloc_video">
                                                                
         <div class="video">
                                                                                                                          
            <!--          - INSERER IFRAME YOUTUBE A LA PLACE DU LIEN / Dimensions : 285*165 -          -->                                                                    <iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/OX1W-8QIBq0" style="width: 285px; height: 165px;"></iframe>                                                                      
         </div>
                                                                
      </div>
                                                                        
      <!--          - BLOC PREDEFINIS -          -->                                
      <div class="bloc_predefs">
                                                                                                
         <div class="predefs">
                                                                                                              
            <p class="titre_predefs">
                                     Prédéfinis                    
            </p>
                                                                                                              
            <!-- - IMAGES PREDEFINIS / Remplacer # par lien du predef / Dimensions de l'image : 40*40 - -->                                                        <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6">                            </a>
            <div class="rond_predef">
                                             <img alt="predefini" src="http://image.noelshack.com/fichiers/2016/26/1467360540-wvvqzp.jpg" />                              
            </div><a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6">                            </a>                            <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13">                              </a>
            <div class="rond_predef">
                                             <img alt="predefini" src="http://image.noelshack.com/fichiers/2016/26/1467360542-25ak93m.jpg" />                              
            </div><a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13">                            </a>                            <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13">                              </a>
            <div class="rond_predef">
                                               <img alt="predefini" src="http://image.noelshack.com/fichiers/2016/26/1467360544-2you89f.jpg" />                              
            </div><a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13">                            </a>                            <a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13">                              </a>
            <div class="rond_predef">
                                             <img alt="predefini" src="http://image.noelshack.com/fichiers/2016/26/1467360546-51scc5.jpg" />                              
            </div><a target="blank" href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13">                            </a>                        
         </div>
                              
      </div>
                                                                        
      <!--          - BLOC COUPE DES 4 MAISONS -          -->                                
      <div class="bloc_coupe">
                                                                
         <div class="coupe">
                                                                    
            <div class="position_badges">
                                                                                                                                                  
               <p>
                                            Coupe des 4 Maisons                        
               </p>
                                                                                                                          
               <div class="badge">
                                            <img alt="gryffondor" src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" />                                                                                                                                
                  <p class="ptsH">
                                                 113 points                          
                  </p>
                                                                        
                  <!--          - POINTS GRYFFONDOR -          -->                                                                                                                      
               </div>
                                                                                                                          
               <div class="badge">
                                            <img alt="poufsouffle" src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" />                                                                                                                              
                  <p class="ptsH couleurP">
                                                 191 points                          
                  </p>
                                                                        
                  <!--          - POINTS POUFSOUFFLE -          -->                                                                    
               </div>
                                                                                                                          
               <div class="badge">
                                            <img alt="serdaigle" src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" />                                                                                                                              
                  <p class="ptsB">
                                                 122 points                          
                  </p>
                                                                        
                  <!--          - POINTS SERDAIGLE -          -->                                                                                                                      
               </div>
                                                                                                                          
               <div class="badge">
                                            <img alt="serpentard" src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" />                                                                                                                              
                  <p class="ptsB couleurS">
                                                 512 points                          
                  </p>
                                                                        
                  <!--          - POINTS SERPENTARD -          -->                                                                
               </div>
                                                                          
            </div>
                                                                
         </div>
                                                            
      </div>
                                              
   </div>
                                      
   <div class="bloc_ligne3">
                                                                        
      <!--          - BANDEAU DEFILANT DES PARTENAIRES / REMPLACER LIEN PAR LIEN DU BOUTON PARTENAIRE -          -->                            
      <marquee behavior="scroll" direction="left" scrollamount="5" scrolldelay="30" onmouseover="this.stop();" onmouseout="this.start();">
                                           <a target="_blank" href="http://disney-recherches.forumactif.org/"><img src="http://i86.servimg.com/u/f86/15/38/67/45/rrgw10.jpg" /></a> <a href="http://bubobulb.forum-actif.net"><img src="http://i86.servimg.com/u/f86/12/57/58/15/bouton17.png" /></a> <a href="http://atlanticcity.forumactif.org/"><img src="http://i84.servimg.com/u/f84/09/00/04/27/bouton10.png" /></a> <a target="_blank" href="http://way-of-life-wayfate.forumactif.pro/"><img src="http://i86.servimg.com/u/f86/15/38/67/45/sfvn11.png" /></a> <a href="http://paradis-fanfictions.twilight-mania.com"><img src="http://i66.tinypic.com/2qxrwpf.jpg" /></a> <a href="http://magicalement.forumactif.org"><img src="http://image.noelshack.com/fichiers/2016/11/1458065101-stampspart.png" /></a> <a href="http://mimbulusmimbletonia.forumetoile.com" target="_blank"><img src="http://imageshack.com/a/img922/4495/Fu6hRD.jpg" /></a><a href="http://petrificare.rpgistes.com"><img src="http://i84.servimg.com/u/f84/19/30/82/32/10035p10.png" /></a>  <a href="http://firebolt.forumactif.org"><img src="http://nsm08.casimages.com/img/2015/10/25//15102508204614296413692838.png" /></a>  <a href="http://memento-mori-rpg.forumactif.org"><img src="http://i67.tinypic.com/2e31iso.jpg" /></a>      
      </marquee>
                                                                        
      <!--          - CREDITS CREATEUR ET NU -          -->                                        
      <p class="creditsNU">
                         PA codée par Elenthil ★ <a target="blank" href="http://www.never-utopia.com">Never Utopia</a>              
      </p>
                                                      
   </div>
                                    
</div>

Code:

   <iframe frameborder="0" scrolling="no" src="http://mimbulus-mimbletonia.forumactif.org/h1-pa" style="width: 900px; height: 594px;"></iframe>

Merci d'avance pour votre aide.  :)

Coucou ^^

D'abord merci Nihil pour ton intervention

Par contre Gwen, j'ai essayé d'installer la police et elle ne s'affiche toujours pas ^^ Je pense que c'est du à cette partie là : ux3jil1hqhvhdfu qui est expliqué par Azulfen dans la suite du message.

Du coup, avant d'héberger ton fichier sur DropBox tu dois modifier le fichier css en l'ouvrant avec un bloc note et en remplaçant par les liens de polices correspondant dans les parenthèses.

Ce qui peut donner :

Code:

url('master_of_break-webfont.woff2') format('truetype'),

et

Code:

url('master_of_break-webfont.woff') format('truetype'),

Et après avoir fait ça, tu enregistre ton css et tu le réupload sur Dropbox

@Nihil Scar Winspeare n'hésite pas à repasser si ce n'est pas ça, je ne suis pas sûre de pouvoir vérifier avec mon temps plus réduit pour pouvoir avancer.

Désolé Gwen pour le temps que ça prend mais étant chez mes parents, mes passages sont assez irréguliers. Je sais comment je vais remanier le code une fois la police installée ensuite pour te le donner après mais je ne sais pas quand sachant que mes parents ont encore prévu une semaine très chargée pour moi donc désolé si je traîne un peu sur la semaine.

Ne t'inquiète pas :) j'ai moi-même un peu mis du temps à répondre. Mais pour le coup j'avoue ne pas avoir trop compris vu que j'ai fait tout ce qu'on m'a expliqué. En gros, je comprends pas trop ce que je dois faire la sachant que les polices du coup sont sur Dropbox mais que j'ai pas vraiment fourni le fichier css. Je suis un peu paumée :/

Hello <3

Je passe en vitesse express pour dire que chez moi en ajoutant ceci dans le CSS du forum ça fonctionne bien :

Code:

@font-face {
    font-family: 'Master Of Break';
    src: url('https://dl.dropbox.com/s/ux3jil1hqhvhdfu/master_of_break-webfont.woff2') format('woff2'),
         url('https://dl.dropbox.com/s/kpcaau2l39yhiks/master_of_break-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

J'ai testé sur Chrome et sur mon forum test sur Firefox, ça fonctionnait bien :3

Je pense qu'avec la manière dont Dropbox fonctionne, il n'y a pas de soucis de droits / autorisations, donc ça a l'air bon :)

Hello :)

Donc je suppose que je n'ai rien d'autres à faire ? Enfin si c'est le cas dites-le moi. (Je suis en mode poisson rouge).

Au passage, j'ai exactement le même problème avec les catégories de mon forum et le QEEL est-ce que je devrais faire exactement la même chose ? (Je viens de l'apprendre par un des membres ) Mais d'après moi, ça doit être lié. (dire que c'est aussi la même histoire pour les noms des joueurs dans le profil, mais enfin bref, le plus important c'est la PA).

Bonne soirée :)

EDIT : Je viens de penser à une chose, n'y aurait-il pas quelque chose à toucher dans les Templates ?

Sorry du double poste

Je crois avoir réussi pour la PA (est-ce que ça à marcher chez vous aussi)
Maintenant, le seul hic c'est mes catégories et mon QEEL enfin, bref, du coup prend ton temps ELENTHIL :) (j'attends pour l’agrandissement)

Encore merci à vous tous.

Hello :3

D'abord bon anniversaire

Quand tu parles de "hic", tu peux rappeler le soucis s'il te plait ? Notamment pour moi qui arrive dans le sujet comme un cheveux sur la soupe et qui n'a pas tout compris

S'il s'agit de la police, elle est disponible sur tout ton forum maintenant, donc elle fonctionne bien dans les catégories et le QEEL (je viens de vérifier sur ton forum) :)

Hello

Merci (je vieillie)
Problème régler (j'y ai passé la journée, mais tout est en ordre).
Du coup, voici le code de la PA (avec la bonne police dessus)

Code:

!--                      - PA pour GwenM réalisée par Elenthil -                      -->      <meta charset="utf-8" />          <link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet" type="text/css" />          <link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet" type="text/css" />      <style type="text/css">
         
          /* MISE EN FORME PA */
 @font-face {
    font-family: 'Master Of Break';
    src: url('https://dl.dropbox.com/s/ux3jil1hqhvhdfu/master_of_break-webfont.woff2') format('woff2'),
        url('https://dl.dropbox.com/s/kpcaau2l39yhiks/master_of_break-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}       
          body{
            margin: 0px;


          }

 .bloc_pa{
      width: 900px;
      margin: auto;
          background-color: #DCDED2; /* Pour changer la couleur du fond de la PA */
  }
 
  .bloc_pa h1{
      text-align: center;
      margin: 0;
            font-family: 'master of breaK';
            color: #f32660; /* Pour changer la couleur du titre Bienvenue sur le forum */
            text-shadow: 1px 1px #ffffff;
  }
         
          /* MISE EN FORME MENU DE NAVIGATION */
 
 
  .menu_nav{
      width: 900px;
margin-top: -25px;
      margin-bottom: 20px;

  }
 
  .bloc_pa ul{
     
      margin: auto;
      padding: 0;
      text-align: center;
  }
 
  .bloc_pa li{
      display: inline-block;
  }
 
  .menu_nav a{
      text-decoration: none;
            color: #aaa447; /* Pour changer la couleur des liens de navigation sous le titre */
            font-family: "Master Of Break"; /* Pour changer l'écriture des liens de navigation sous le titre */
            font-size: 17px; /* Pour changer la taille des liens de navigation sous le titre */
margin-right: 40px;
margin-top: 20px;
  }
 
  .menu_nav a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
 
          /* BLOC CONTEXTE - STAFF - ACTUALITES */
         
  .bloc_ligne1{
      width: 900px;
margin-top: -25px;

     
  }
 
  .bloc_contexte, .bloc_news{
      width: 320px;
     
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
 
  .contexte, .news{
      width: 295px;
      height: 220px;
            background-color: #aaa447; /* Pour changer la couleur du bloc contexte et du bloc news */
      margin: auto;
      position: relative;
      overflow: hidden;
  }
 
  .contexte p {
            font-family: Castellar; /* Pour changer la police d'écriture du texte contexte */
      font-size: 11px;
      line-height: 14px;
      padding: 5px;
      margin: 0px;
            color: white; /* Pour changer la couleur du texte contexte */
      text-align: center;
  }
 
  .contexte p a {
      text-decoration: none;
      font-weight: bold;
            color: white; /* Pour changer la couleur du lien contexte */
     
     
  }
 
  .contexte p a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
 
  .contexte img{
      position: absolute;
      top: 0px;
      left: 0px;
      transition: 1s ease left;
      width: 100%;
      height: 100%;
  }
 
  .contexte:hover img{
      left: -355px;
     
  }
         
        .titre_news{
            margin: 0;
            font-size: 19px; /* Pour changer la taille du titre Actualités */
            font-family: Master Of Break; /* Pour changer la police d'écriture du titre Actualités*/
            color: white; /* Pour changer la couleur du titre Actualités */
            font-weight: normal;
            text-align: center;
          }
         
          .news{
          overflow: auto; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */
          }
 
  .news p{
text-decoration: none;
            font-family: Castellar; /* Pour changer la police du texte dans le bloc News */
      padding: 5px 5px 5px 10px;
      font-size: 11px;
      margin: 0;
      line-height: 14px;
            color: white; /* Pour changer la couleur du texte du bloc News */
     
  }
.news p a {
      text-decoration: none;
      font-weight: bold;
            color: white; /* Pour changer la couleur des liens news */
     
     
  }
 
  .bloc_staff{
      width: 250px;
     
      height: 200px;
      display: inline-block;
 
  }


.titre_staff{
margin-top: 5px;
margin-right: 30px;
            font-family: Master Of Break; /* Pour changer l'écriture du titre Prédéfinis */
            color: white; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 19px;
margin-bottom: -20px;
          }
 
  .staff{
      width: 290px;
      height: 125px;
      text-align: center;
  }
 
  .rond_staff{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
/* Ajout de la class staff2 */

.staff, .staff2{
 width:290px;
 height: 125px;
 text-align: center;
 }
/* Ajout de la class rond_staff2 */

.rond_staff, .rond_staff2{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
 
.rond_staff2{

          margin-top: -10px; /*=> Réduire pour rapprocher le rond du reste */

}
  .profil_staff{
     
      width: 129px;
      height: 160px;
      text-align: center;
      display: inline-block;
  }
 
    .position_D{
      position: relative;
      right: 20px;
  }
 
  .position_G{
      position:relative;
      right: 20px;
  }
 
  .profil_staff p, .profil_staff p a{
      margin: 0;
            font-family: 'Master Of Break'; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */
      line-height: 10px;
            color: white; /*Pour changer la couleur du texte des membres du staff */
  }
 
  .profil_staff p a{
      text-decoration: none;
  }
 
  .profil_staff p a:hover{
      text-decoration: underline;
  }
 
  .texte_rangstaff{
            font-family: 'Castellar'; /* Pour changer la police d'écriture du rang Staff */
      font-variant: small-caps;
      font-size: 14px;
  }
 
  .position_infostaff{
      position: relative;
      top: 7px;
  }
         
         
         
 
 
          /* BLOCS VIDEO - PREDEFS - COUPE */
 
  .bloc_ligne2{
      width: 900px;
margin-top: 30px;
     
  }
 
  .bloc_video, .bloc_coupe{
      width: 320px;
     
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
 
  .video, .coupe{
      width: 295px;
      height: 220px;
            background-color: #aaa447; /* Pour changer la couleur des blocs video et coupe des maisons */
      margin: auto;
  }
 
  .video iframe{
      position: relative;
      top: 5px;
bottom: 5px;
      left: 5px;
  }
         
 
  .position_badges{
     
      margin: auto;
      text-align: center;
      position: relative;
            z-index: 10;
     
  }
         
        .position_badges p {
            margin: 0;
            font-size: 19px;
            font-family: Master Of Break; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */
            color: white;
          }
 
 
 
  .badge{
     
      display: inline-block;
      margin: 10px 20px;
            z-index: 10;
            position: relative;
            background-color: #aaa447; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */
            width: 75px;
            bottom: 3px;
            height: 60px;
  }
         
        .badge img{
          width: 64px;
            opacity: 1;
            transition: 500ms;
            z-index: -7;
            background-color: #aaa447; /* Pour changer la couleur derrière les blasons car image en png transparente */
        }
         
        .badge img:hover{
            opacity: 0;
          }
         
          .badge .ptsH{
            position: absolute;
            bottom: 32px;
            z-index: -3;
            color: #B91D22; /* COULEUR POINTS GRYFFONDOR */
            font-family: Castellar; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
           
          }
         
          .badge .ptsB{
            position: absolute;
            bottom: 30px;
            z-index: -3;
            color: #016A96; /* COULEUR POINTS SERDAIGLE */
            font-family: Castellar; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
           
          }
         
          .ptsH.couleurP{
            color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */
          }
         
          .ptsB.couleurS{
            color: #204A22; /* COULEUR POINTS SERPENTARD */
         
          }
         
 
 
  .bloc_membres { width: 250px;
     
      height: 200px;
      display: inline-block;
  }
 
  .membres{
      width: 250px; /* Augmentation de la largeur */
 height: 195px;
 text-align: center;
 margin-top: 25px;
                position: relative; /* Ajout de la position relative */
                right: 21px;  /* On pousse de la droite vers la gauche pour amener vers le bloc vidéo */
 
 }
 
  .rond_membres{
      width: 50px; /* On agrandit le rond pour qu'il soit plus grand en largeur */
 height: 50px; /* On agrandit le rond pour qu'il soit plus grand en hauteur */
 border-radius: 40px;
 background-color: #C2CAC6;
 display: inline-block;
 text-align: center;
 margin: 0px 5px;
          overflow: hidden;
  }
         
          .membres a {
            text-decoration: none;
                color: white; /* Ajout de la couleur sur le lien */
          }
         
 /* Ajout de l'effet de souligné du lien au survol - Class à créer */
          .membres a:hover{
              text-decoration: underline;
          }
 
        .titre_membres{
            margin-bottom: 40px;
            font-family: 'Master Of Break'; /* Pour changer l'écriture du titre Prédéfinis */
            color: white; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 19px;
margin-left: 25px;
margin-top: -20px;
          }

.membres_position{
 width: 290px; /* Augmentation de la largeur du bloc rond + texte pour qu'il prenne de la place */
 height: 195px;
 text-align: center; /* Centrage des ronds et infos dans le bloc de position */
 
 
 }
         
          .profil_membre{
            width: 90px; /* Taille de chaque carte contenant 1 rond + 1 texte */
            display: inline-block; /* Pour que les cartes se mettent sur la même ligne mais qu'ils soient considérés comme des blocs */
            vertical-align: top; /* Pour que le contenu se place en haut du bloc carte */
         
          }
         
 /* Le premier enfant contenu dans le bloc concerné donc la première carte à gauche si tu préfères */
          .membres_position:first-child{
          position: relative; /* Débloquer la position de son emplacement initial */
          right: 11px; /* Pousser la carte vers le bloc vidéo */
          }
         
          .profil_membre_texte p {
                font-size: 13px; /* Taille de tout le texte sous le rond */
              position: relative; /* Débloquer la position du texte de son emplacement initial */
              bottom: 6px; /* Monter le texte vers le haut pour qu'il se rapproche du rond */
          font-family: 'Master Of Break'; /* Police d'écriture */
          line-height: 13px; /* Pour l'espacement entre chaque ligne donc prénom + nom, rang, Liens */
          color: white; /* Couleur du texte */
         
          }
         
          .rang_membre{
          font-family: Castellar; /* Police d'écriture des rangs de membres comme le + actif par exemple */
          font-variant: small-caps; /* Ajout des petites majuscules */
          font-size: 12px; /* Taille du rang des membres */
         
          }
 
 
          /* BLOC PARTENAIRES - CREDITS */
 
  .bloc_ligne3{
      width: 900px;
      height: 60px;
      text-align: center;
margin-top: 25px;
     
  }
         
        .creditsNU, .creditsNU a {
            font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */
            font-size: 9px;
            margin: 0;
            color: #575757; /* Pour changer la couleur pour le texte des crédits pour NU */
          }
 
 
 
  </style>                     
<div class="bloc_pa">
                                                                                      
   <!--                      - TITRE DU FORUM -                      -->                                   
   <h1>
                                Bienvenue sur Mimbulus Mimbletonia                     
   </h1>
                                                                                      
   <!--                      - BARRE DES LIENS DE NAVIGATION (Remplacer # par les liens) -                      -->                                   
   <div class="menu_nav">
                                                                       
      <ul>
                                                                                
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t2-reglement">Règlement</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte">Contexte</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t22-bottin-des-avatars">Avatars Pris</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f9-predefinis">Prédéfinis</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f8-presentations">Présentations</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f3-annexes">Annexes</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f72-affiliation">Affiliation</a>                           
         </li>
                                                                              
      </ul>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne1">
                                                                                               
      <!--                      - BLOC CONTEXTE AVEC TEXTE + LIEN (Remplacer # par le lien) -                      -->                                         
      <div class="bloc_contexte">
                                                                                
         <div class="contexte">
                                                                           
            <p>
                                  <br/>                            1998. Cette date est aujourd'hui inscrite par la société sorcière anglophone aux grandes lignes de l'Histoire, dépeignant à la manière des plus grandes épopées le combat du Grand Harry Potter face à celui dont le nom n'est plus tabou.
                                  <br/> Cependant, si cette histoire est connue, reconnue, et glorifiée par les enseignements, romans découlant de ce fait historique ou documentaires retraçant les pas du Trio légendaires, on connaît bien moins tous les efforts mis en place pour reconstruire le monde sorcier. <br /> La traque des mangemorts, leurs condamnations, la reconstruction du ministère de la magie, de Poudlard, mais bien au-delà de ça, de toute la société qui, soumise au choc, craignait que cet enfer recommence.        <br/>  <a href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte" target="blank">Lire la suite</a>                               
            </p>
                                                                                                                  <img src="http://auto.img.v4.skyrock.net/1896/86401896/pics/3133887922_1_2_RJoFGfks.gif" />                                 
            <!--                      - EMPLACEMENT DU LIEN GIF CONTEXTE - Dimensions 295*175px -                      -->                                                     
         </div>
                                                                          
      </div>
                                                                                     
      <!--                      - BLOC STAFF CENTRAL -                      -->                                                     
      <div class="bloc_staff">
                                                                                
         <div class="staff">
                                                             
            <p class="titre_staff">
                 Staff                         
            </p>
                                                                                           
            <div class="profil_staff position_G">
                                                                                                                                
               <div class="rond_staff">
                                                                                                                                                                                       
                  <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" />                                                                                                                         
               </div>
                                                                                                                                                                          
               <p>
                                                        Cassius Owell <br />                                       
                                          <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                      <span class="texte_rangstaff"><b>Fondateur</b></span> <br />                                       
                  <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                      <span class="position_infostaff">                                                                                        <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="_blank">Mp</a>                                         
                     <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                      </span>                                                                           
               </p>
                                                                                                                        
            </div>
                                                                                           
            <div class="profil_staff position_D">
                                                                                                                                
               <div class="rond_staff">
                                                                                                                                                                                     
                  <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://s9.tinypic.com/rvj4mw_th.jpg" alt="membre_staff" />                                                                                                                       
               </div>
                                                                                                                                                                          
               <p>
                                                        Célian R. Lestrange <br />                                       
                                          <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                        <span class="texte_rangstaff"><b>Administrateur</b></span> <br />                                       
                  <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                        <span class="position_infostaff">                                                                                            <a href="http://mimbulus-mimbletonia.forumactif.org/u12" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=12" target="_blank">Mp</a>                                         
                     <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                        </span>                                                                           
               </p>
                                                                                                                      
            </div>
                                                                                                   
         </div>
      <!-- DEBUT LIGNE STAFF 2 -->
           
            <div class="staff2">
             
              <div class="profil_staff position_D">
                                                                                                           
                  <div class="rond_staff2">
                                                                                                                                                                 
                      <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          --> 
                    <img src="http://image.noelshack.com/fichiers/2016/30/1469869003-4b17d7a64a314da08eef39b98963f91a.png" alt="membre_staff" />                                                                                                         
                  </div>
                                                                                                                                                     
                  <p>
                                                Louis Weasley <br />                           
                      <!--          - NOM DU MEMBRE DU STAFF -          --> 
                    <span class="texte_rangstaff"><b>Modérateur</b></span> <br />                           
                      <!--          - RANG DU MEMBRE DU STAFF -          --> 
                    <span class="position_infostaff"> 
                      <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/u39">Profil</a>
                      <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=39">Mp</a>                             
                        <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->    </span>                                                               
                  </p>
                                                                                                 
                </div>
             
            </div>
<!-- FIN LIGNE STAFF 2 -->                                                                                  
      </div>
                                                                                               
      <!--                      - BLOC ACTUALITES -                      -->                                           
      <div class="bloc_news">
                                                                                        
         <div class="news">
                                                                                                                                                 
            <h2 class="titre_news">
                                                 Actualités                               
            </h2>
                          <br/>
            <p>
                                                     <strong>01.06.16 :</strong> Ouverture du forum                                                           
            </p>
                                                                                                                   
            <p>
                                  <strong>28.07.16 :</strong> Le match de Quidditch vient d'être lancé <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t320-match-amical-quidditch"/>ici</a>, tout comme la journée d'intégration que vous retrouverez <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f126-journee-d-integration-event"/>ici même</a>.             
            </p>
                                                                                         
            <p>
                                                 <strong>31.07.2016 :</strong> Nous sommes toujours en Septembre 2018                               
            </p>
                                                                                         
            <p>
                                  <strong>31.07.2016 :</strong> Version 4 du forum & Bilan du mois de Juillet <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t336-bilan-du-mois-de-juillet-2016"/> ici </a>                               
            </p>
                                                                                         
            <p>
                                                 <strong>31.07.2016 :</strong> Louis Weasley devient Modérateur                             
            </p>
                                                                                                                 
         </div>
                                                                                          
      </div>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne2">
                                                                                               
      <!--                      - BLOC VIDEO -                      -->                                         
      <div class="bloc_video">
                                                                                        
         <div class="video">
                                                                                                                                                 
            <!--                      - INSERER IFRAME YOUTUBE A LA PLACE DU LIEN / Dimensions : 285*210 -                      -->                                                                    <iframe style="width: 285px; height: 210px;" src="https://www.youtube.com/embed/LZtt27zVatU" allowfullscreen="" frameborder="0"></iframe>                                                                                 
         </div>
                                                                                        
      </div>
                                                                                               
      <!--            - IMAGES Membres du mois / Remplacer # par lien du Membres / Dimensions de l'image : 40*40 -            --> 
          <div class="bloc_membres">
                                                                                                               
 <div class="membres">
 
          <p class="titre_membres">
                                  Les Membres du Mois                           
 </p>
                          <div class="membres_position">
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                              <img src="http://image.noelshack.com/fichiers/2016/30/1469991591-e-cb3e1895.jpg" alt="predefini" />
                                </span>
                                <span class="profil_membre_texte"><p>Albus S. Potter<br />
                                  <span class="rang_membre">Le + Actif</span> <br />
                                  <a target='_blank' href="http://mimbulus-mimbletonia.forumactif.org/u27">Profil </a>
                                  <a target='_blank' href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=27">MP</a>
                                  </p>
                                </span>
                           
                              </div>
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                                <img src="http://image.noelshack.com/fichiers/2016/30/1469992008-yxykxvhjmim.jpg" alt="predefini" />
                              </span>
                                <span class="profil_membre_texte"><p>Isabella Lestrange<br />
                                  <span class="rang_membre">Le meilleur RPlayeur</span> <br />
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/u9" target="_blank">Profil </a>
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=9" target="_blank"> MP</a>
                                  </p>
                                </span>
                           
                              </div>
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                              <img src="http://image.noelshack.com/fichiers/2016/30/1469991891-8a045080306a7cc91e67e5006074ba0b409b9acc0a9ae216bf29b0d4.png" alt="predefini" />
                              </span>
                               
                                <span class="profil_membre_texte"><p>Ivory Welling<br />
                                  <span class="rang_membre">Le Meilleur Voteur</span> <br />
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/u18" target="_blank">Profil </a>
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=18" target="_blank">MP</a>
                                  </p>
                                </span>
                            </div>
          </div>
                 
         </div>
                                                      
      </div>
                                                                                               
      <!--                      - BLOC COUPE DES 4 MAISONS -                      -->                                           
      <div class="bloc_coupe">
                                                                                        
         <div class="coupe">
                                                                                           
            <div class="position_badges">
                                                                                                                                                                          
               <p>
                                                        Coupe des 4 Maisons                                   
               </p>
                                  <br/>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" alt="gryffondor" />                                                                                                                                           
                  <p class="ptsH">
                                                             714 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS GRYFFONDOR -                      -->                                                                                                                                 
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" alt="poufsouffle" />                                                                                                                                         
                  <p class="ptsH couleurP">
                                                             783 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS POUFSOUFFLE -                      -->                                                                               
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" alt="serdaigle" />                                                                                                                                         
                  <p class="ptsB">
                                                             982 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS SERDAIGLE -                      -->                                                                                                                                 
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" alt="serpentard" />                                                                                                                                         
                  <p class="ptsB couleurS">
                                                             1 900 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS SERPENTARD -                      -->                                                                           
               </div>
                                                                                                  
            </div>
                                                                                       
         </div>
                                                                                    
      </div>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne3">
                                                                                               
      <!--                      - BANDEAU DEFILANT DES PARTENAIRES / REMPLACER LIEN PAR LIEN DU BOUTON PARTENAIRE -                      -->                                       
      <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="30" scrollamount="5" direction="left" behavior="scroll">
                           <a href="http://disney-recherches.forumactif.org/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/ujak10.jpg" /></a> <a href="http://bubobulb.forum-actif.net" target="_blank"><img src="http://i86.servimg.com/u/f86/12/57/58/15/bouton17.png" /></a> <a href="http://atlanticcity.forumactif.org/" target="_blank"><img src="http://i21.servimg.com/u/f21/09/03/72/35/100-3510.jpg" /></a> <a href="http://way-of-life-wayfate.forumactif.pro/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/sfvn11.png" /></a> <a href="http://paradis-fanfictions.twilight-mania.com" target="_blank"><img src="http://i66.tinypic.com/2qxrwpf.jpg" /></a> <a href="http://magicalement.forumactif.org" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/11/1458065101-stampspart.png" /></a> <a href="http://mimbulusmimbletonia.forumetoile.com" target="_blank"><img src="http://imageshack.com/a/img922/4495/Fu6hRD.jpg" /></a><a href="http://petrificare.rpgistes.com" target="_blank"><img src="http://i84.servimg.com/u/f84/19/30/82/32/10035p10.png" /></a>  <a href="http://firebolt.forumactif.org" target="_blank"><img src="http://nsm08.casimages.com/img/2015/10/25//15102508204614296413692838.png" /></a>  <a href="http://memento-mori-rpg.forumactif.org" target="_blank"><img src="http://i67.tinypic.com/2e31iso.jpg" /></a> <a href="http://impero.superforum.fr" target="_blank"><img src="http://img11.hostingpics.net/pics/874950part10035.jpg" /></a> <a href="http://carte-maraudeur.forumactif.org"><img src="http://i67.tinypic.com/2h2nijc.jpg" /></a>               
      </marquee>
                                                                                               
      <!--                      - CREDITS CREATEUR ET NU -                      -->                                                   
      <p class="creditsNU">
                                     PA codée par Elenthil ★ <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a>                         
      </p>
                                                                             
   </div>
                                                            
</div>

Plus qu'à attendre cette personnalisation et ça sera bon (quelle belle journée même s'il pleut) (je n'ai rien pris je vous jure)

Coucou Gwen ^^

Alors désolé pour le temps de réponse et merci à Nihil pour ses interventions. Etant entre deux chaises (j'étais chez mes parents jusqu'à dimanche) et rentrant lundi, je n'ai pas vraiment eu le temps de faire les modifs.

Nihil > J'avais essayé justement ta soluce en premier mais ça ne marchait pas car je n'avais pas mis le bon format en fait dans le code (le woff).

Gwen > Je sais déjà comment je vais m'y prendre pour ta PA (j'avais commencé à modif un peu et à y réfléchir avant), donc j'espère pouvoir t'achever ça demain. Je suis en train de récupérer le retard que j'ai pris donc désolé pour l'attente

Coucou Gwen

J'arrive ENFIN avec une réponse on va pouvoir achever cette personnalisation. Désolé pour toute cette attente, je t'avoue que c'est pas évident de récupérer son retard. Je me suis bien fait avoir chez moi

Bon on perd pas de temps, et je te donne tous les bouts de code à mettre.

Je t'avoue que j'ai un peu galéré à faire l'agrandissement. J'ai du réduire les blocs des côtés pour que ça puisse rentrer sans avoir un élargissement de PA trop trop énorme non plus. Si tu veux voir le résultat, c'est sur mon forum test.

On s'attaque donc au code.

Pour commencer, l'iframe qu'on va agrandir à 980px de largeur et 630px de hauteur. (Rappel : Affichage => Page d'accueil => Généralités)

Code:

<iframe scrolling="no" src="      http://testselenthil.forumgratuit.ch/h3-pa-gwen-2" style="width: 980px; height: 630px;" frameborder="0"></iframe>

Puis on va faire des retouches mineures. Le seul truc qu'on va toucher ce sont les largeurs des blocs pour que ça s'étale ou se réduise. Rien de sorcier mais il faut prendre les bons.
Je te mets la class et un ptit commentaire "A changer" à côté de la valeur que tu dois modifier.

Code:

 .bloc_pa{
          width: 980px; /* A changer*/
          margin: auto;
              background-color: #DCDED2; /* Pour changer la couleur du fond de la PA */
      }


Code:

.menu_nav{
          width: 980px; /* A changer */
          margin-bottom: 25px;

      }

Code:

.bloc_ligne1{
          width: 980px; /* A changer */
    margin-top: -10px;

         
      }

Code:

.bloc_contexte, .bloc_news{
          width: 275px; /* A changer */
          height: 200px;
          display: inline-block;
          vertical-align: top;
      }

Code:

.contexte, .news{
          width: 275px; /* A changer */
          height: 220px;
                background-color: #aaa447; /* Pour changer la couleur du bloc contexte et du bloc news */
          margin: auto;
          position: relative;
          overflow: hidden;
      }

Code:

.bloc_staff{
          width: 422px; /* A changer */
         
          height: 200px;
          display: inline-block;
     
      }

Code:

.staff, .staff2{
    width:425px; /* A changer */
    height: 125px;
    text-align: center;
    }

Code:

 .bloc_ligne2{
          width: 980px; /* A changer */
    margin-top: 30px;
         
      }

Code:

 .bloc_video, .bloc_coupe{
          width: 275px; /* A changer */
         
          height: 200px;
          display: inline-block;
          vertical-align: top;
      }

Code:

.video, .coupe{
          width: 275px; /* A changer */
          height: 220px;
                background-color: #aaa447; /* Pour changer la couleur des blocs video et coupe des maisons */
          margin: auto;
      }

Code:

.video iframe{
          position: relative;
          top: 5px;
    bottom: 5px;
left: 5px; /* A SUPPRIMER */
         
      }

Code:

.bloc_membres {
 
  width: 422px; /* A changer */
         
          height: 200px;
          display: inline-block;
      }

Code:

.membres{
          width: 424px; /* A changer */
    height: 195px;
    text-align: center;
    margin-top: 25px;
                    position: relative; /* Ajout de la position relative */
                    right: 15px;  /* A changer */
   
    }

Code:

.titre_membres{
                margin-bottom: 25px; /* A changer */
                font-family: "master_of_breakregular", Arial, sans-serif; /* Pour changer l'écriture du titre Prédéfinis */
                color: white; /* Pour changer la couleur du titre Prédéfinis */
                font-size: 19px;
    margin-left: 25px;
    margin-top: -20px;
              }

Code:

.membres_position{
    width: 430px; /* A changer */
    height: 195px;
    text-align: center; /* Centrage des ronds et infos dans le bloc de position */
   
   
    }

Code:

.bloc_ligne3{
          width: 980px; /* A changer */
          height: 60px;
          text-align: center;
    margin-top: 25px;
         
      }

Et dans le html il faut modifier la taille de la largeur de la vidéo Youtube sinon elle est trop grosse ^^

Code:

<iframe style="width: 275px; height: 210px;" src="https://www.youtube.com/embed/LZtt27zVatU" allowfullscreen="" frameborder="0"></iframe>

Et voilà ! Il ne te reste plus qu'à modifier ces petits trucs et on regardera ensemble pour peaufiner les derniers détails ou ce qui ne va pas. Ca devrait être très rapide maintenant.

j'avais pas vu oo

Pardon --> Je m'occupe de ça tout de suite. Comment puis-je m'excuser ? Je devrais avoir honte.
Je regarde tout ça dans la journée.

Pardon (le pire c'est que j'ai même pas eu la notif par mail)

EDIT : De ce que j'ai pu voir sur ton forum test, c'est super :)
Par contre je crois que les partenaires sont un peu coupés :/ (mais maintenant j'ai un autre truc qui me stress (faut que j'arrête d'être chiante) : Les ronds du staff : je l'ai trouve trop collé à présent : /me sort. Est-ce que ça serait possible de les descendre un peu et de faire comme pour les membres du mois ?)
j'attends d'avoir un retour avant de toucher quoique ce soit.


EDIT 2 : je viens de penser à une chose : est-ce que ça serait possible de rajouter un rond dans la première ligne du staff et un autre dans la deuxième je sais pas si tu vois, mais ça ferait 3 ronds staff sur la première ligne et deux en bas, positionner de la même manière que le premier entre ? (puis peut-être agrandir les images dans les membres du mois ?, je suis chiante je sais).

Coucou ^^

Alors pas de soucis de toute façon moi non plus je n'étais pas très présente.

Voyons voir... Oui petit oubli de ma part pour les partenaires, j'ai oublié de changer la hauteur de l'iframe mais je vois que tu l'as fait sans soucis

Pour les ronds du staff oui c'est possible de faire ça mais ça va prendre encore un peu de temps pour faire ce que tu veux Dis donc tu auras encore d'autres demandes de réglages après ça ? . Moi ça ne me dérange pas mais bon ça repousse toujours la fin de ta personnalisation surtout que je t'avais demandé (il me semble je ne suis plus sûre), si tu avais d'autres réglages que tu désirais avant que je te passe les codes. Au final ça fait beaucoup de manips alors qu'on aurait pu faire ça bien plus tôt ^^

Enfin moi comme je te dis, tu demandes, j'exécute mais c'est juste pour te prévenir que si ça prends encore un peu de temps c'est normal Regarde encore si d'autres choses te viennent à l'esprit, histoire qu'on fasse d'une pierre deux coups si je dois encore bidouiller ^^.

Bonne soirée ^^

BLOP

Je suis complètement dépassée en ce moment donc je sais même plus trop où j'en suis.
Pour les partenaires, j'ai rien touché ça l'a fait tout seul donc bon
Je t'en demande beaucoup et j'en suis désolée (mais ce dernier petit réglage n'était pas prévu)
Après, je comprends que tu ne puisses pas le faire tout de suite et je suis pas pressée. Mais c'est la dernière chose que je demanderais :) (promis)

Du coup est-ce que tu visualises la chose ? Ou tu veux un petit schéma à main levée ?
Sinon ça sera tout :)
Dis-moi si tu as besoin de quelque chose ? (PS : j'aurais voulu rajouter un lien, mais je me débrouillerais vu que j'ai déjà bien repéré la structure)

Bonne soirée

Encore mercii

Salut

Ah ben je pense que tu devais déjà avoir réglé la hauteur de ton iframe sur ton forum du coup tu n'as rien eu à faire de plus.

Pour le schéma, ça serait quelque chose du style :



Bah après si tu n'as rien de plus à dire et qu'on en reste là dessus et que tu me confirmes que c'est ça que tu veux c'est tout ce qu'il me suffit pour les derniers réglages.

Hey,

Oui tu as tout compris :) et oui je confirme que je ne veux rien d'autres après cela. :)

Encore merci

Ok je m'attelle à la tâche et je reviens vers toi dès que j'ai les codes à te passer

Coucou =)

Me revoici avec tes modifications pour ce que tu as demandé ^^ J'espère que ça conviendra

D'abord dans la partie html, tu vas chercher cette partie :

Code:

 <!--                      - BLOC STAFF CENTRAL -                      -->                                                     
    <div class="bloc_staff">
                                                                           
    <div class="staff">
                                                     
    <p class="titre_staff">
      Staff                         
    </p>

Et à la suite (donc après /p) tu rajoutes cette partie

Code:

  <div class="profil_staff position_G">
                                                                                                                     
    <div class="rond_staff">
                                                                                                                                                                         
    <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" />                                                                                                                         
    </div>
                                                                                                                                                               
    <p>
                                          Nom Prénom <br />                                       
                                              <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                      <span class="texte_rangstaff"><b>Fondateur</b></span> <br />                                       
    <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                      <span class="position_infostaff">                                                                                        <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="_blank">Mp</a>                                         
    <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                      </span>                                                                           
    </p>
                                                                                                             
    </div>

Puis tu cherches ce bout :

Code:

<!-- DEBUT LIGNE STAFF 2 -->
               
                <div class="staff2">

Et à la suite tu rajoutes ça :

Code:

<div class="profil_staff position_D">
                                                                                                               
                      <div class="rond_staff2">
                                                                                                                                                                     
                          <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          --> 
                        <img src="http://image.noelshack.com/fichiers/2016/30/1469869003-4b17d7a64a314da08eef39b98963f91a.png" alt="membre_staff" />                                                                                                         
                      </div>
                                                                                                                                                         
                      <p>
                                                  Prénom Nom <br />                           
                          <!--          - NOM DU MEMBRE DU STAFF -          --> 
                        <span class="texte_rangstaff"><b>Modérateur</b></span> <br />                           
                          <!--          - RANG DU MEMBRE DU STAFF -          --> 
                        <span class="position_infostaff"> 
                          <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/u39">Profil</a>
                          <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=39">Mp</a>                             
                            <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->    </span>                                                               
                      </p>
                  </div>

Puis dans la partie CSS, tu modifies les réglages que je te montre ici :

Code:

.bloc_staff{
height : 220px ;
}

Code:

.titre_staff{
margin-top: 0px;
}

Code:

.profil_staff{
height: 90px;
}

Code:

.titre_staff{
margin-top: -18px;
}


Tu supprimes les class suivantes entièrement (toujours dans le CSS) :

.position_D
.rond_staff2

Et pour l'iframe dans Affichages => Généralités, il faut que tu montes le height à 670px

Autre petit détail, ta police Castellar ne s'affichera pas sur ta PA. Je pensais qu'elle était gratuite quand j'avais regardé sur Google Fonts mais au final elle est payante. Je te conseille d'aller voir sur https://fonts.google.com pour en choisir une autre qui sera libre d'accès.

Merci :)
J'installe tout ça sur le forum test.
Juste une petite question : (fforum test je dois toucher quelle partie dans la ligne deux du STAFF pour remonter un peu et bien mettre les cercles "centrés", je sais pas si tu comprends
Pour les membres du mois, pareille, quelle partie pour les écarter un peu ? et les descendre ? (il y a moyen d’agrandir les images ?)
Je vais faire quelques test pour le moment, lorsque j'y serais parvenue, tout sera bon :)
Sinon c'est parfait :)
Bonne soirée et encore merci

EDIT : Il y a un gros bug (cf forum test) tu comprendras :/

revoici le code actuel

Code:

<!--                      - PA pour GwenM réalisée par Elenthil -                      -->      <meta charset="utf-8" />          <link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet" type="text/css" />          <link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet" type="text/css" />      <style type="text/css">
         
          /* MISE EN FORME PA */
 @font-face {
    font-family: 'Master Of Break';
    src: url('https://dl.dropbox.com/s/ux3jil1hqhvhdfu/master_of_break-webfont.woff2') format('woff2'),
        url('https://dl.dropbox.com/s/kpcaau2l39yhiks/master_of_break-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}       
          body{
            margin: 0px;


          }

 .bloc_pa{
      width: 980px;
      margin: auto;
          background-color: #DCDED2; /* Pour changer la couleur du fond de la PA */
  }
 
  .bloc_pa h1{
      text-align: center;
      margin: 0;
            font-family: 'master of breaK';
            color: #f32660; /* Pour changer la couleur du titre Bienvenue sur le forum */
            text-shadow: 1px 1px #ffffff;
  }
         
          /* MISE EN FORME MENU DE NAVIGATION */
 
 
  .menu_nav{
      width: 980px;
margin-top: -25px;
      margin-bottom: 20px;

  }
 
  .bloc_pa ul{
     
      margin: auto;
      padding: 0;
      text-align: center;
  }
 
  .bloc_pa li{
      display: inline-block;
  }
 
  .menu_nav a{
      text-decoration: none;
            color: #aaa447; /* Pour changer la couleur des liens de navigation sous le titre */
            font-family: "Master Of Break"; /* Pour changer l'écriture des liens de navigation sous le titre */
            font-size: 17px; /* Pour changer la taille des liens de navigation sous le titre */
margin-right: 40px;
margin-top: 20px;
  }
 
  .menu_nav a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
 
          /* BLOC CONTEXTE - STAFF - ACTUALITES */
         
  .bloc_ligne1{
      width: 980px;
margin-top: -25px;

     
  }
 
  .bloc_contexte, .bloc_news{
      width: 275px;
     
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
 
  .contexte, .news{
      width: 275px;
      height: 220px;
            background-color: #aaa447; /* Pour changer la couleur du bloc contexte et du bloc news */
      margin: auto;
      position: relative;
      overflow: hidden;
  }
 
  .contexte p {
            font-family: Castellar; /* Pour changer la police d'écriture du texte contexte */
      font-size: 11px;
      line-height: 14px;
      padding: 5px;
      margin: 0px;
            color: white; /* Pour changer la couleur du texte contexte */
      text-align: center;
  }
 
  .contexte p a {
      text-decoration: none;
      font-weight: bold;
            color: white; /* Pour changer la couleur du lien contexte */
     
     
  }
 
  .contexte p a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
 
  .contexte img{
      position: absolute;
      top: 0px;
      left: 0px;
      transition: 1s ease left;
      width: 100%;
      height: 100%;
  }
 
  .contexte:hover img{
      left: -355px;
     
  }
         
        .titre_news{
            margin: 0;
            font-size: 19px; /* Pour changer la taille du titre Actualités */
            font-family: Master Of Break; /* Pour changer la police d'écriture du titre Actualités*/
            color: white; /* Pour changer la couleur du titre Actualités */
            font-weight: normal;
            text-align: center;
          }
         
          .news{
          overflow: auto; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */
          }
 
  .news p{
text-decoration: none;
            font-family: Castellar; /* Pour changer la police du texte dans le bloc News */
      padding: 5px 5px 5px 10px;
      font-size: 11px;
      margin: 0;
      line-height: 14px;
            color: white; /* Pour changer la couleur du texte du bloc News */
     
  }
.news p a {
      text-decoration: none;
      font-weight: bold;
            color: white; /* Pour changer la couleur des liens news */
     
     
  }
 
  .bloc_staff{
      width: 422px;
     
      height: 220px;
      display: inline-block;
 
  }


.titre_staff{
margin-top: -18px;
margin-right: 30px;
            font-family: Master Of Break; /* Pour changer l'écriture du titre Prédéfinis */
            color: white; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 19px;
margin-bottom: -20px;
          }
 
  .staff{
      width: 290px;
      height: 125px;
      text-align: center;
  }
 
  .rond_staff{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
/* Ajout de la class staff2 */

.staff, .staff2{
 width:425px;
 height: 125px;
 text-align: center;
 }
/* Ajout de la class rond_staff2 */

.rond_staff, .rond_staff2{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
 

  .profil_staff{
     
      width: 129px;
      height: 90px;
      text-align: center;
      display: inline-block;
  }
 

  .position_G{
      position:relative;
      right: 20px;
  }
 
  .profil_staff p, .profil_staff p a{
      margin: 0;
            font-family: 'Master Of Break'; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */
      line-height: 10px;
            color: white; /*Pour changer la couleur du texte des membres du staff */
  }
 
  .profil_staff p a{
      text-decoration: none;
  }
 
  .profil_staff p a:hover{
      text-decoration: underline;
  }
 
  .texte_rangstaff{
            font-family: 'Castellar'; /* Pour changer la police d'écriture du rang Staff */
      font-variant: small-caps;
      font-size: 14px;
  }
 
  .position_infostaff{
      position: relative;
      top: 7px;
  }
         
         
         
 
 
          /* BLOCS VIDEO - PREDEFS - COUPE */
 
  .bloc_ligne2{
      width: 980px;
margin-top: 30px;
     
  }
 
  .bloc_video, .bloc_coupe{
      width: 275px;
     
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
 
  .video, .coupe{
      width: 275px;
      height: 220px;
            background-color: #aaa447; /* Pour changer la couleur des blocs video et coupe des maisons */
      margin: auto;
  }
 
  .video iframe{
      position: relative;
      top: 5px;
bottom: 5px;
  }
         
 
  .position_badges{
     
      margin: auto;
      text-align: center;
      position: relative;
            z-index: 10;
     
  }
         
        .position_badges p {
            margin: 0;
            font-size: 19px;
            font-family: Master Of Break; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */
            color: white;
          }
 
 
 
  .badge{
     
      display: inline-block;
      margin: 10px 20px;
            z-index: 10;
            position: relative;
            background-color: #aaa447; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */
            width: 75px;
            bottom: 3px;
            height: 60px;
  }
         
        .badge img{
          width: 64px;
            opacity: 1;
            transition: 500ms;
            z-index: -7;
            background-color: #aaa447; /* Pour changer la couleur derrière les blasons car image en png transparente */
        }
         
        .badge img:hover{
            opacity: 0;
          }
         
          .badge .ptsH{
            position: absolute;
            bottom: 32px;
            z-index: -3;
            color: #B91D22; /* COULEUR POINTS GRYFFONDOR */
            font-family: Castellar; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
           
          }
         
          .badge .ptsB{
            position: absolute;
            bottom: 30px;
            z-index: -3;
            color: #016A96; /* COULEUR POINTS SERDAIGLE */
            font-family: Castellar; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
           
          }
         
          .ptsH.couleurP{
            color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */
          }
         
          .ptsB.couleurS{
            color: #204A22; /* COULEUR POINTS SERPENTARD */
         
          }
         
 
 
  .bloc_membres { width: 250px;
     
      height: 422px;
      display: inline-block;
  }
 
  .membres{
      width: 424px; /* Augmentation de la largeur */
 height: 195px;
 text-align: center;
 margin-top: 25px;
                position: relative; /* Ajout de la position relative */
                right: 15px;  /* On pousse de la droite vers la gauche pour amener vers le bloc vidéo */
 
 }
 
  .rond_membres{
      width: 50px; /* On agrandit le rond pour qu'il soit plus grand en largeur */
 height: 50px; /* On agrandit le rond pour qu'il soit plus grand en hauteur */
 border-radius: 40px;
 background-color: #C2CAC6;
 display: inline-block;
 text-align: center;
 margin: 0px 5px;
          overflow: hidden;
  }
         
          .membres a {
            text-decoration: none;
                color: white; /* Ajout de la couleur sur le lien */
          }
         
 /* Ajout de l'effet de souligné du lien au survol - Class à créer */
          .membres a:hover{
              text-decoration: underline;
          }
 
        .titre_membres{
            margin-bottom: 25px;
            font-family: 'Master Of Break'; /* Pour changer l'écriture du titre Prédéfinis */
            color: white; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 19px;
margin-left: 25px;
margin-top: -20px;
          }

.membres_position{
 width: 430px; /* Augmentation de la largeur du bloc rond + texte pour qu'il prenne de la place */
 height: 195px;
 text-align: center; /* Centrage des ronds et infos dans le bloc de position */
 
 
 }
         
          .profil_membre{
            width: 90px; /* Taille de chaque carte contenant 1 rond + 1 texte */
            display: inline-block; /* Pour que les cartes se mettent sur la même ligne mais qu'ils soient considérés comme des blocs */
            vertical-align: top; /* Pour que le contenu se place en haut du bloc carte */
         
          }
         
 /* Le premier enfant contenu dans le bloc concerné donc la première carte à gauche si tu préfères */
          .membres_position:first-child{
          position: relative; /* Débloquer la position de son emplacement initial */
          right: 11px; /* Pousser la carte vers le bloc vidéo */
          }
         
          .profil_membre_texte p {
                font-size: 13px; /* Taille de tout le texte sous le rond */
              position: relative; /* Débloquer la position du texte de son emplacement initial */
              bottom: 6px; /* Monter le texte vers le haut pour qu'il se rapproche du rond */
          font-family: 'Master Of Break'; /* Police d'écriture */
          line-height: 13px; /* Pour l'espacement entre chaque ligne donc prénom + nom, rang, Liens */
          color: white; /* Couleur du texte */
         
          }
         
          .rang_membre{
          font-family: Castellar; /* Police d'écriture des rangs de membres comme le + actif par exemple */
          font-variant: small-caps; /* Ajout des petites majuscules */
          font-size: 12px; /* Taille du rang des membres */
         
          }
 
 
          /* BLOC PARTENAIRES - CREDITS */
 
  .bloc_ligne3{
      width: 980px;
      height: 60px;
      text-align: center;
margin-top: 25px;
     
  }
         
        .creditsNU, .creditsNU a {
            font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */
            font-size: 9px;
            margin: 0;
            color: #575757; /* Pour changer la couleur pour le texte des crédits pour NU */
          }
 
 
 
  </style>                     
<div class="bloc_pa">
                                                                                      
   <!--                      - TITRE DU FORUM -                      -->                                   
   <h1>
                                Bienvenue sur Mimbulus Mimbletonia                     
   </h1>
                                                                                      
   <!--                      - BARRE DES LIENS DE NAVIGATION (Remplacer # par les liens) -                      -->                                   
   <div class="menu_nav">
                                                                       
      <ul>
                                                                                
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t2-reglement">Règlement</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte">Contexte</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t22-bottin-des-avatars">Avatars Pris</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f9-predefinis">Prédéfinis</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f8-presentations">Présentations</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f3-annexes">Annexes</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f72-affiliation">Affiliation</a>                           
         </li>
                                                                              
      </ul>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne1">
                                                                                               
      <!--                      - BLOC CONTEXTE AVEC TEXTE + LIEN (Remplacer # par le lien) -                      -->                                         
      <div class="bloc_contexte">
                                                                                
         <div class="contexte">
                                                                           
            <p>
                                  <br/>                            1998. Cette date est aujourd'hui inscrite par la société sorcière anglophone aux grandes lignes de l'Histoire, dépeignant à la manière des plus grandes épopées le combat du Grand Harry Potter face à celui dont le nom n'est plus tabou.
                                  <br/> Cependant, si cette histoire est connue, reconnue, et glorifiée par les enseignements, romans découlant de ce fait historique ou documentaires retraçant les pas du Trio légendaires, on connaît bien moins tous les efforts mis en place pour reconstruire le monde sorcier. <br /> La traque des mangemorts, leurs condamnations, la reconstruction du ministère de la magie, de Poudlard, mais bien au-delà de ça, de toute la société qui, soumise au choc, craignait que cet enfer recommence.        <br/>  <a href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte" target="blank">Lire la suite</a>                               
            </p>
                                                                                                                  <img src="http://auto.img.v4.skyrock.net/1896/86401896/pics/3133887922_1_2_RJoFGfks.gif" />                                 
            <!--                      - EMPLACEMENT DU LIEN GIF CONTEXTE - Dimensions 295*175px -                      -->                                                     
         </div>
                                                                          
      </div>
                                                                                     
      <!--                      - BLOC STAFF CENTRAL -                      -->                                                     
      <div class="bloc_staff">
                                                                                
         <div class="staff">
                                                             
            <p class="titre_staff">
                 Staff                         
            </p>
                <div class="profil_staff position_G">
                                                                                                                     
    <div class="rond_staff">
                                                                                                                                                                         
    <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" />                                                                                                                         
    </div>
                                                                                                                                                               
    <p>
                                          Nom Prénom <br />                                       
                                              <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                      <span class="texte_rangstaff"><b>Fondateur</b></span> <br />                                       
    <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                      <span class="position_infostaff">                                                                                        <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="_blank">Mp</a>                                         
    <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                      </span>                                                                           
    </p>
                                                                                                             
    </div>                                                                             
            <div class="profil_staff position_G">
                                                                                                                                
               <div class="rond_staff">
                                                                                                                                                                                       
                  <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" />                                                                                                                         
               </div>
                                                                                                                                                                          
               <p>
                                                        Cassius Owell <br />                                       
                                          <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                      <span class="texte_rangstaff"><b>Fondateur</b></span> <br />                                       
                  <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                      <span class="position_infostaff">                                                                                        <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="_blank">Mp</a>                                         
                     <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                      </span>                                                                           
               </p>
                                                                                                                        
            </div>
                                                                                           
            <div class="profil_staff position_D">
                                                                                                                                
               <div class="rond_staff">
                                                                                                                                                                                     
                  <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://s9.tinypic.com/rvj4mw_th.jpg" alt="membre_staff" />                                                                                                                       
               </div>
                                                                                                                                                                          
               <p>
                                                        Célian R. Lestrange <br />                                       
                                          <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                        <span class="texte_rangstaff"><b>Administrateur</b></span> <br />                                       
                  <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                        <span class="position_infostaff">                                                                                            <a href="http://mimbulus-mimbletonia.forumactif.org/u12" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=12" target="_blank">Mp</a>                                         
                     <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                        </span>                                                                           
               </p>
                                                                                                                      
            </div>
                                                                                                   
         </div>
      <!-- DEBUT LIGNE STAFF 2 -->
           
            <div class="staff2">
              <div class="profil_staff position_D">
                                                                                                               
                      <div class="rond_staff2">
                                                                                                                                                                   
                          <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          --> 
                        <img src="http://image.noelshack.com/fichiers/2016/30/1469869003-4b17d7a64a314da08eef39b98963f91a.png" alt="membre_staff" />                                                                                                         
                      </div>
                                                                                                                                                         
                      <p>
                                                  Prénom Nom <br />                           
                          <!--          - NOM DU MEMBRE DU STAFF -          --> 
                        <span class="texte_rangstaff"><b>Modérateur</b></span> <br />                           
                          <!--          - RANG DU MEMBRE DU STAFF -          --> 
                        <span class="position_infostaff"> 
                          <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/u39">Profil</a>
                          <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=39">Mp</a>                             
                            <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->    </span>                                                               
                      </p>
                  </div>
              <div class="profil_staff position_D">
                                                                                                           
                  <div class="rond_staff2">
                                                                                                                                                                 
                      <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          --> 
                    <img src="http://image.noelshack.com/fichiers/2016/30/1469869003-4b17d7a64a314da08eef39b98963f91a.png" alt="membre_staff" />                                                                                                         
                  </div>
                                                                                                                                                     
                  <p>
                                                Louis Weasley <br />                           
                      <!--          - NOM DU MEMBRE DU STAFF -          --> 
                    <span class="texte_rangstaff"><b>Modérateur</b></span> <br />                           
                      <!--          - RANG DU MEMBRE DU STAFF -          --> 
                    <span class="position_infostaff"> 
                      <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/u39">Profil</a>
                      <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=39">Mp</a>                             
                        <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->    </span>                                                               
                  </p>
                                                                                                 
                </div>
             
            </div>
<!-- FIN LIGNE STAFF 2 -->                                                                                  
      </div>
                                                                                               
      <!--                      - BLOC ACTUALITES -                      -->                                           
      <div class="bloc_news">
                                                                                        
         <div class="news">
                                                                                                                                                 
            <h2 class="titre_news">
                                                 Actualités                               
            </h2>
                          <br/>
            <p>
                                                     <strong>01.06.16 :</strong> Ouverture du forum                                                           
                                  <br/>
                                                                                                                                                                                           
         
                                                 <strong>02.09.2016 :</strong> Nous sommes en octobre 2018   
                                  <br/>
                                                                                                 
                                 
                                  <strong>02.09.2016 :</strong> Bilan du mois d'août<a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t382-bilan-du-mois-d-aout-2016#3890"/> ici</a>                               
            
                         
            
                          <br/>  <strong> 06.09.2016 : </strong> <a target="_blank" href ="http://mimbulus-mimbletonia.forumactif.org/t385-changement-important-dans-le-staff-evolution#3955"/>Petit changement dans le staff.</a>  Scorpius Malefoy devient Administrateur et Ivory Welling Modérateur  <br/> Un article de la gazette vient de sortir <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t392-scandale-le-ministre-de-la-magie-a-ete-attaque"/> ici</a>               
          <br/> <strong> 10.09.2016 : </strong> <a target="_blank" href ="http://mimbulus-mimbletonia.forumactif.org/t401-les-pnj-partages#4148"/>Petite nouveauté, les PNJ Partagés</a>
                                                                                                                 
         </div>
                                                                                          
      </div>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne2">
                                                                                               
      <!--                      - BLOC VIDEO -                      -->                                         
      <div class="bloc_video">
                                                                                        
         <div class="video">
                                                                                                                                                 
            <!--                      - INSERER IFRAME YOUTUBE A LA PLACE DU LIEN / Dimensions : 285*210 -                      -->                                                                    <iframe style="width: 275px; height: 210px;" src="https://www.youtube.com/embed/LZtt27zVatU" allowfullscreen="" frameborder="0"></iframe>                                                                                 
         </div>
                                                                                        
      </div>
                                                                                               
      <!--            - IMAGES Membres du mois / Remplacer # par lien du Membres / Dimensions de l'image : 40*40 -            --> 
          <div class="bloc_membres">
                                                                                                               
 <div class="membres">
 
          <p class="titre_membres">
                                  Les Membres du Mois                           
 </p>
                          <div class="membres_position">
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                              <img src="http://image.noelshack.com/fichiers/2016/35/1472985578-photo.jpg" alt="predefini" />
                                </span>
                                <span class="profil_membre_texte"><p>Ginevra Potter<br />
                                  <span class="rang_membre">Le + Actif</span> <br />
                                  <a target='_blank' href="http://mimbulus-mimbletonia.forumactif.org/u45">Profil </a>
                                  <a target='_blank' href="hhttp://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=45">MP</a>
                                  </p>
                                </span>
                           
                              </div>
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                                <img src="http://image.noelshack.com/fichiers/2016/35/1472985568-oroigbavwdu.jpg" alt="predefini" />
                              </span>
                                <span class="profil_membre_texte"><p>Scorpius Malefoy<br />
                                  <span class="rang_membre">Le meilleur RPlayeur</span> <br />
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/u13" target="_blank">Profil </a>
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=13" target="_blank"> MP</a>
                                  </p>
                                </span>
                           
                              </div>
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                              <img src="http://image.noelshack.com/fichiers/2016/30/1469991891-8a045080306a7cc91e67e5006074ba0b409b9acc0a9ae216bf29b0d4.png" alt="predefini" />
                              </span>
                               
                                <span class="profil_membre_texte"><p>Ivory Welling<br />
                                  <span class="rang_membre">Le Meilleur Voteur</span> <br />
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/u18" target="_blank">Profil </a>
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=18" target="_blank">MP</a>
                                  </p>
                                </span>
                            </div>
          </div>
                 
         </div>
                                                      
      </div>
                                                                                               
      <!--                      - BLOC COUPE DES 4 MAISONS -                      -->                                           
      <div class="bloc_coupe">
                                                                                        
         <div class="coupe">
                                                                                           
            <div class="position_badges">
                                                                                                                                                                          
               <p>
                                                        Coupe des 4 Maisons                                   
               </p>
                                  <br/>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" alt="gryffondor" />                                                                                                                                           
                  <p class="ptsH">
                                                             714 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS GRYFFONDOR -                      -->                                                                                                                                 
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" alt="poufsouffle" />                                                                                                                                         
                  <p class="ptsH couleurP">
                                                             783 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS POUFSOUFFLE -                      -->                                                                               
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" alt="serdaigle" />                                                                                                                                         
                  <p class="ptsB">
                                                             982 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS SERDAIGLE -                      -->                                                                                                                                 
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" alt="serpentard" />                                                                                                                                         
                  <p class="ptsB couleurS">
                                                             1 900 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS SERPENTARD -                      -->                                                                           
               </div>
                                                                                                  
            </div>
                                                                                       
         </div>
                                                                                    
      </div>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne3">
                                                                                               
      <!--                      - BANDEAU DEFILANT DES PARTENAIRES / REMPLACER LIEN PAR LIEN DU BOUTON PARTENAIRE -                      -->                                       
      <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="30" scrollamount="5" direction="left" behavior="scroll">
                           <a href="http://disney-recherches.forumactif.org/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/ujak10.jpg" /></a> <a href="http://bubobulb.forum-actif.net" target="_blank"><img src="http://i86.servimg.com/u/f86/12/57/58/15/bouton17.png" /></a> <a href="http://atlanticcity.forumactif.org/" target="_blank"><img src="http://i21.servimg.com/u/f21/09/03/72/35/100-3510.jpg" /></a> <a href="http://way-of-life-wayfate.forumactif.pro/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/sfvn11.png" /></a> <a href="http://paradis-fanfictions.twilight-mania.com" target="_blank"><img src="http://i66.tinypic.com/2qxrwpf.jpg" /></a> <a href="http://magicalement.forumactif.org" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/11/1458065101-stampspart.png" /></a> <a href="http://mimbulusmimbletonia.forumetoile.com" target="_blank"><img src="http://imageshack.com/a/img922/4495/Fu6hRD.jpg" /></a><a href="http://petrificare.rpgistes.com" target="_blank"><img src="http://i84.servimg.com/u/f84/19/30/82/32/10035p10.png" /></a>  <a href="http://firebolt.forumactif.org" target="_blank"><img src="http://nsm08.casimages.com/img/2015/10/25//15102508204614296413692838.png" /></a>  <a href="http://memento-mori-rpg.forumactif.org" target="_blank"><img src="http://i67.tinypic.com/2e31iso.jpg" /></a> <a href="http://impero.superforum.fr" target="_blank"><img src="http://img11.hostingpics.net/pics/874950part10035.jpg" /></a> <a href="http://carte-maraudeur.forumactif.org"target="_blank"><img src="http://i67.tinypic.com/2h2nijc.jpg" /></a> <a href="http://amnesia.actifforum.com/"target="_blank"><img src="http://zupimages.net/up/16/29/ic0d.png" /></a>                 
      </marquee>
                                                                                               
      <!--                      - CREDITS CREATEUR ET NU -                      -->                                                   
      <p class="creditsNU">
                                     PA codée par Elenthil ★ <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a>                         
      </p>
                                                                             
   </div>
                                                            
</div>

Salut :)

Alors on va voir ça dans l'ordre

Pour ton bug du bloc de la coupe qui se décale, tu as du changer la largeur du bloc des membres (ton css que tu m'as montré est correct mais quand je regarde dans l'inspecteur, la largeur n'est pas la même que celle que tu me montres. Faut que tu vérifies car le problème vient juste de là)

Code:

.bloc_membres{
width: 422px;
}

Si tu ne veux pas que ça se décale il faut absolument que le bloc reste à ces pixels près comme je te l'ai expliqué plus haut. Si tu réduis ou allonge, l'autre bloc va se positionner par rapport à la largeur de celui là.

Pour remonter la ligne 2 des profils staff, on va créer une nouvelle class. Donc tu vas dans la partie html ici :

Code:

  <!-- DEBUT LIGNE STAFF 2 -->
         
            <div class="staff2">
              <div class="profil_staff position_D">

et tu vas juste rajouter un 2 après staff comme ceci

Code:

 <div class="profil_staff2 position_D">

ATTENTION ! Il y en a 2 à changer sur la ligne 2 de staff car tu as 2 blocs de profil membres en bas.

Ensuite tu vas dans le CSS et tu crées cette nouvelle class :

Code:

profil_staff2{
position : relative;
bottom : 10px; /* A changer pour remonter plus haut si tu le souhaites */

}

Pour agrandir les blocs des membres, tu modifie la largeur de cette class

Code:

.profil_membre{
width: 125px;
}

En réglant la largeur comme ça, les différentes fiches devraient s'élargir sur toute la largeur.

Pour faire descendre la ligne des membres, tu vas dans cette class et tu rajoutes les deux règles suivantes :

Code:

.membres_position{
position: relative;
top: 5px; /* Fait descendre la ligne des profils de membres */
}

Pour changer la taille des images des membres, tu vas dans la class .rond_membres et tu augmentes la valeur du width et du height (attention la valeur doit être identique. Si tu veux des images en 60x60 il te faut mettre 60 et 60 à la place des 50.

Pour le centrage des profils du staff de la deuxième ligne je n'ai pas compris car ils sont déjà centrés dans le bloc. Peux tu me donner plus de précisions ?

Bonsoir :)

Contente que tu répondes rapidement. Alors pour le premier soucis c'est régler, je suis tellement intelligente que j'avais touché à la hauteur et non à la largeur (je suis un boulet).
Pour le bloc STAFF, j'ai fait comme tu m'as dis, j'ai bien vu que ça à bouger, mais à présent ce n'est plus aligné, faut-il rajouter un inline block ? (idem c'est plus la même écriture, donc dois-je tout remettre ?)
Pour les membres j'essaye de faire ça demain.
Désolée, ce n'est pas très productif, mais je suis rentrée tard :/
J'essaye de faire au plus vite demain (avec l'espoir que tu me répondes avant:))

Bonne soirée.

Coucou =)

Pour ton souci, tu as bien ajouté dans le css :

Code:

profil_staff2{
position : relative;
bottom : 10px; /* A changer pour remonter plus haut si tu le souhaites */

}

Parce que je ne vois pas cette partie dans le css avec l'inspecteur. Là quand je regarde c'est comme si cette règle n'avait pas été ajoutée.

Y a pas de soucis t'inquiète pas si tu ne fais pas tout de suite =)

Il y est :/

Voici le code actuelle

Code:

<!--                      - PA pour GwenM réalisée par Elenthil -                      -->      <meta charset="utf-8" />          <link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet" type="text/css" />          <link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet" type="text/css" />      <style type="text/css">
         
          /* MISE EN FORME PA */
 @font-face {
    font-family: 'Master Of Break';
    src: url('https://dl.dropbox.com/s/ux3jil1hqhvhdfu/master_of_break-webfont.woff2') format('woff2'),
        url('https://dl.dropbox.com/s/kpcaau2l39yhiks/master_of_break-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}       
          body{
            margin: 0px;


          }

 .bloc_pa{
      width: 980px;
      margin: auto;
          background-color: #DCDED2; /* Pour changer la couleur du fond de la PA */
  }
 
  .bloc_pa h1{
      text-align: center;
      margin: 0;
            font-family: 'master of breaK';
            color: #f32660; /* Pour changer la couleur du titre Bienvenue sur le forum */
            text-shadow: 1px 1px #ffffff;
  }
         
          /* MISE EN FORME MENU DE NAVIGATION */
 
 
  .menu_nav{
      width: 980px;
margin-top: -25px;
      margin-bottom: 20px;

  }
 
  .bloc_pa ul{
     
      margin: auto;
      padding: 0;
      text-align: center;
  }
 
  .bloc_pa li{
      display: inline-block;
  }
 
  .menu_nav a{
      text-decoration: none;
            color: #aaa447; /* Pour changer la couleur des liens de navigation sous le titre */
            font-family: "Master Of Break"; /* Pour changer l'écriture des liens de navigation sous le titre */
            font-size: 17px; /* Pour changer la taille des liens de navigation sous le titre */
margin-right: 40px;
margin-top: 20px;
  }
 
  .menu_nav a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
 
          /* BLOC CONTEXTE - STAFF - ACTUALITES */
         
  .bloc_ligne1{
      width: 980px;
margin-top: -25px;

     
  }
 
  .bloc_contexte, .bloc_news{
      width: 275px;
     
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
 
  .contexte, .news{
      width: 275px;
      height: 220px;
            background-color: #aaa447; /* Pour changer la couleur du bloc contexte et du bloc news */
      margin: auto;
      position: relative;
      overflow: hidden;
  }
 
  .contexte p {
            font-family: Castellar; /* Pour changer la police d'écriture du texte contexte */
      font-size: 11px;
      line-height: 14px;
      padding: 5px;
      margin: 0px;
            color: white; /* Pour changer la couleur du texte contexte */
      text-align: center;
  }
 
  .contexte p a {
      text-decoration: none;
      font-weight: bold;
            color: white; /* Pour changer la couleur du lien contexte */
     
     
  }
 
  .contexte p a:hover{
      text-shadow: 1px 1px 3px #ffffff;
  }
 
  .contexte img{
      position: absolute;
      top: 0px;
      left: 0px;
      transition: 1s ease left;
      width: 100%;
      height: 100%;
  }
 
  .contexte:hover img{
      left: -355px;
     
  }
         
        .titre_news{
            margin: 0;
            font-size: 19px; /* Pour changer la taille du titre Actualités */
            font-family: Master Of Break; /* Pour changer la police d'écriture du titre Actualités*/
            color: white; /* Pour changer la couleur du titre Actualités */
            font-weight: normal;
            text-align: center;
          }
         
          .news{
          overflow: auto; /* CHANGER HIDDEN EN AUTO SI BESOIN DE BLOC DEROULANT */
          }
 
  .news p{
text-decoration: none;
            font-family: Castellar; /* Pour changer la police du texte dans le bloc News */
      padding: 5px 5px 5px 10px;
      font-size: 11px;
      margin: 0;
      line-height: 14px;
            color: white; /* Pour changer la couleur du texte du bloc News */
     
  }
.news p a {
      text-decoration: none;
      font-weight: bold;
            color: white; /* Pour changer la couleur des liens news */
     
     
  }
 
  .bloc_staff{
      width: 422px;
     
      height: 220px;
      display: inline-block;
 
  }


.titre_staff{
margin-top: -18px;
margin-right: 30px;
            font-family: Master Of Break; /* Pour changer l'écriture du titre Prédéfinis */
            color: white; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 19px;
margin-bottom: -20px;
          }
 
  .staff{
      width: 290px;
      height: 125px;
      text-align: center;
  }
 
  .rond_staff{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
/* Ajout de la class staff2 */

.staff, .staff2{
 width:425px;
 height: 125px;
 text-align: center;
 }
/* Ajout de la class rond_staff2 */

.rond_staff, .rond_staff2{
      height: 60px;
      width: 60px;
      border-radius: 70px;
            background-color: #bdbdbd;
      display: inline-block;
      margin-top: 20px;
      overflow: hidden;
  }
 

  .profil_staff{
     
      width: 129px;
      height: 90px;
      text-align: center;
      display: inline-block;
  }
 

  .position_G{
      position:relative;
      right: 20px;
  }
 
  .profil_staff p, .profil_staff p a{
      margin: 0px;
            font-family: 'Master Of Break'; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */
      line-height: 10px;
            color: white; /*Pour changer la couleur du texte des membres du staff */
  }
 
  .profil_staff p a{
      text-decoration: none;
  }
 
  .profil_staff p a:hover{
      text-decoration: underline;
  }
 
  .texte_rangstaff{
            font-family: 'Castellar'; /* Pour changer la police d'écriture du rang Staff */
      font-variant: small-caps;
      font-size: 14px;
  }
 
  .position_infostaff{
      position: relative;
      top: 7px;

  }
         
         
      profil_staff2{
position : relative;
bottom : 10px; /* A changer pour remonter plus haut si tu le souhaites */
margin: auto;
}   
 
 
          /* BLOCS VIDEO - PREDEFS - COUPE */
 
  .bloc_ligne2{
      width: 980px;
margin-top: 30px;
     
  }
 
  .bloc_video, .bloc_coupe{
      width: 275px;
     
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
 
  .video, .coupe{
      width: 275px;
      height: 220px;
            background-color: #aaa447; /* Pour changer la couleur des blocs video et coupe des maisons */
      margin: auto;
  }
 
  .video iframe{
      position: relative;
      top: 5px;
bottom: 5px;
  }
         
 
  .position_badges{
     
      margin: auto;
      text-align: center;
      position: relative;
            z-index: 10;
     
  }
         
        .position_badges p {
            margin: 0;
            font-size: 19px;
            font-family: Master Of Break; /* Pour changer la police d'écriture du titre Coupe des 4 Maisons */
            color: white;
          }
 
 
 
  .badge{
     
      display: inline-block;
      margin: 10px 20px;
            z-index: 10;
            position: relative;
            background-color: #aaa447; /* Pour changer la couleur de fond derrière les blasons des maisons pour cacher le texte et harmoniser avec la couleur du bloc */
            width: 75px;
            bottom: 3px;
            height: 60px;
  }
         
        .badge img{
          width: 64px;
            opacity: 1;
            transition: 500ms;
            z-index: -7;
            background-color: #aaa447; /* Pour changer la couleur derrière les blasons car image en png transparente */
        }
         
        .badge img:hover{
            opacity: 0;
          }
         
          .badge .ptsH{
            position: absolute;
            bottom: 32px;
            z-index: -3;
            color: #B91D22; /* COULEUR POINTS GRYFFONDOR */
            font-family: Castellar; /* Pour changer la police d'écriture des points de Gryffondor et Poufsouffle */
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
           
          }
         
          .badge .ptsB{
            position: absolute;
            bottom: 30px;
            z-index: -3;
            color: #016A96; /* COULEUR POINTS SERDAIGLE */
            font-family: Castellar; /* Pour changer la police d'écriture des points de Serdaigle et Serpentard*/
            font-size: 11px;
            margin-left: 10px;
            font-weight: bold;
           
          }
         
          .ptsH.couleurP{
            color: #A5860B; /* COULEUR POINTS POUFSOUFFLE */
          }
         
          .ptsB.couleurS{
            color: #204A22; /* COULEUR POINTS SERPENTARD */
         
          }
         
 
 
  .bloc_membres { width: 422px;
     
      height: 200px;
      display: inline-block;
  }
 
  .membres{
      width: 425px; /* Augmentation de la largeur */
 height: 195px;
 text-align: center;
 margin-top: 25px;
                position: relative; /* Ajout de la position relative */
                right: 15px;  /* On pousse de la droite vers la gauche pour amener vers le bloc vidéo */
 
 }
 
  .rond_membres{
      width: 50px; /* On agrandit le rond pour qu'il soit plus grand en largeur */
 height: 50px; /* On agrandit le rond pour qu'il soit plus grand en hauteur */
 border-radius: 40px;
 background-color: #C2CAC6;
 display: inline-block;
 text-align: center;
 margin: 0px 5px;
          overflow: hidden;
  }
         
          .membres a {
            text-decoration: none;
                color: white; /* Ajout de la couleur sur le lien */
          }
         
 /* Ajout de l'effet de souligné du lien au survol - Class à créer */
          .membres a:hover{
              text-decoration: underline;
          }
 
        .titre_membres{
            margin-bottom: 25px;
            font-family: 'Master Of Break'; /* Pour changer l'écriture du titre Prédéfinis */
            color: white; /* Pour changer la couleur du titre Prédéfinis */
            font-size: 19px;
margin-left: 25px;
margin-top: -20px;
          }

.membres_position{
 width: 430px; /* Augmentation de la largeur du bloc rond + texte pour qu'il prenne de la place */
 height: 195px;
 text-align: center; /* Centrage des ronds et infos dans le bloc de position */
 
 
 }
         
          .profil_membre{
            width: 90px; /* Taille de chaque carte contenant 1 rond + 1 texte */
            display: inline-block; /* Pour que les cartes se mettent sur la même ligne mais qu'ils soient considérés comme des blocs */
            vertical-align: top; /* Pour que le contenu se place en haut du bloc carte */
         
          }
         
 /* Le premier enfant contenu dans le bloc concerné donc la première carte à gauche si tu préfères */
          .membres_position:first-child{
          position: relative; /* Débloquer la position de son emplacement initial */
          right: 11px; /* Pousser la carte vers le bloc vidéo */
          }
         
          .profil_membre_texte p {
                font-size: 13px; /* Taille de tout le texte sous le rond */
              position: relative; /* Débloquer la position du texte de son emplacement initial */
              bottom: 6px; /* Monter le texte vers le haut pour qu'il se rapproche du rond */
          font-family: 'Master Of Break'; /* Police d'écriture */
          line-height: 13px; /* Pour l'espacement entre chaque ligne donc prénom + nom, rang, Liens */
          color: white; /* Couleur du texte */
         
          }
         
          .rang_membre{
          font-family: Castellar; /* Police d'écriture des rangs de membres comme le + actif par exemple */
          font-variant: small-caps; /* Ajout des petites majuscules */
          font-size: 12px; /* Taille du rang des membres */
         
          }
 
 
          /* BLOC PARTENAIRES - CREDITS */
 
  .bloc_ligne3{
      width: 980px;
      height: 60px;
      text-align: center;
margin-top: 25px;
     
  }
         
        .creditsNU, .creditsNU a {
            font-family: Tahoma; /* Pour changer la police d'écriture des crédits pour NU */
            font-size: 9px;
            margin: 0;
            color: #575757; /* Pour changer la couleur pour le texte des crédits pour NU */
          }
 
 
 
  </style>                     
<div class="bloc_pa">
                                                                                      
   <!--                      - TITRE DU FORUM -                      -->                                   
   <h1>
                                Bienvenue sur Mimbulus Mimbletonia                     
   </h1>
                                                                                      
   <!--                      - BARRE DES LIENS DE NAVIGATION (Remplacer # par les liens) -                      -->                                   
   <div class="menu_nav">
                                                                       
      <ul>
                                                                                
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t2-reglement">Règlement</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte">Contexte</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t22-bottin-des-avatars">Avatars Pris</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f9-predefinis">Prédéfinis</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f8-presentations">Présentations</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f3-annexes">Annexes</a>                           
         </li>
                                                                          
         <li>
                                            <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/f72-affiliation">Affiliation</a>                           
         </li>
                                                                              
      </ul>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne1">
                                                                                               
      <!--                      - BLOC CONTEXTE AVEC TEXTE + LIEN (Remplacer # par le lien) -                      -->                                         
      <div class="bloc_contexte">
                                                                                
         <div class="contexte">
                                                                           
            <p>
                                  <br/>                            1998. Cette date est aujourd'hui inscrite par la société sorcière anglophone aux grandes lignes de l'Histoire, dépeignant à la manière des plus grandes épopées le combat du Grand Harry Potter face à celui dont le nom n'est plus tabou.
                                  <br/> Cependant, si cette histoire est connue, reconnue, et glorifiée par les enseignements, romans découlant de ce fait historique ou documentaires retraçant les pas du Trio légendaires, on connaît bien moins tous les efforts mis en place pour reconstruire le monde sorcier. <br /> La traque des mangemorts, leurs condamnations, la reconstruction du ministère de la magie, de Poudlard, mais bien au-delà de ça, de toute la société qui, soumise au choc, craignait que cet enfer recommence.        <br/>  <a href="http://mimbulus-mimbletonia.forumactif.org/t1-contexte" target="blank">Lire la suite</a>                               
            </p>
                                                                                                                  <img src="http://auto.img.v4.skyrock.net/1896/86401896/pics/3133887922_1_2_RJoFGfks.gif" />                                 
            <!--                      - EMPLACEMENT DU LIEN GIF CONTEXTE - Dimensions 295*175px -                      -->                                                     
         </div>
                                                                          
      </div>
                                                                                     
      <!--                      - BLOC STAFF CENTRAL -                      -->                                                     
      <div class="bloc_staff">
                                                                                
         <div class="staff">
                                                             
            <p class="titre_staff">
                 Staff                         
            </p>
                <div class="profil_staff position_G">
                                                                                                                     
    <div class="rond_staff">
                                                                                                                                                                         
    <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" />                                                                                                                         
    </div>
                                                                                                                                                               
    <p>
                                          Nom Prénom <br />                                       
                                              <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                      <span class="texte_rangstaff"><b>Fondateur</b></span> <br />                                       
    <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                      <span class="position_infostaff">                                                                                        <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="_blank">Mp</a>                                         
    <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                      </span>                                                                           
    </p>
                                                                                                             
    </div>                                                                             
            <div class="profil_staff position_G">
                                                                                                                                
               <div class="rond_staff">
                                                                                                                                                                                       
                  <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://i64.tinypic.com/i2pym0.jpg" alt="membre_staff" />                                                                                                                         
               </div>
                                                                                                                                                                          
               <p>
                                                        Cassius Owell <br />                                       
                                          <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                      <span class="texte_rangstaff"><b>Fondateur</b></span> <br />                                       
                  <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                      <span class="position_infostaff">                                                                                        <a href="http://mimbulus-mimbletonia.forumactif.org/u3" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=3" target="_blank">Mp</a>                                         
                     <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                      </span>                                                                           
               </p>
                                                                                                                        
            </div>
                                                                                           
            <div class="profil_staff position_D">
                                                                                                                                
               <div class="rond_staff">
                                                                                                                                                                                     
                  <!--                      - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -                      -->                                                                                      <img src="http://s9.tinypic.com/rvj4mw_th.jpg" alt="membre_staff" />                                                                                                                       
               </div>
                                                                                                                                                                          
               <p>
                                                        Célian R. Lestrange <br />                                       
                                          <!--                      - NOM DU MEMBRE DU STAFF -                      -->                                                                                        <span class="texte_rangstaff"><b>Administrateur</b></span> <br />                                       
                  <!--                      - RANG DU MEMBRE DU STAFF -                      -->                                                                                        <span class="position_infostaff">                                                                                            <a href="http://mimbulus-mimbletonia.forumactif.org/u12" target="_blank">Profil</a> <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=12" target="_blank">Mp</a>                                         
                     <!--                      - REMPLACER # PAR LIEN PROFIL ET LIEN MP -                      -->                                                                                        </span>                                                                           
               </p>
                                                                                                                      
            </div>
                                                                                                   
         </div>
      <!-- DEBUT LIGNE STAFF 2 -->
           
            <div class="staff2">
              <div class="profil_staff2">
                                                                                                               
                      <div class="rond_staff2">
                                                                                                                                                                   
                          <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          --> 
                        <img src="http://image.noelshack.com/fichiers/2016/30/1469869003-4b17d7a64a314da08eef39b98963f91a.png" alt="membre_staff" />                                                                                                         
                      </div>
                                                                                                                                                         
                      <p>
                                                  Prénom Nom <br />                           
                          <!--          - NOM DU MEMBRE DU STAFF -          --> 
                        <span class="texte_rangstaff"><b>Modérateur</b></span> <br />                           
                          <!--          - RANG DU MEMBRE DU STAFF -          --> 
                        <span class="position_infostaff"> 
                          <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/u39">Profil</a>
                          <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=39">Mp</a>                             
                            <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->    </span>                                                               
                      </p>
                  </div>
              <div class="profil_staff2">
                                                                                                           
                  <div class="rond_staff2">
                                                                                                                                                                 
                      <!--          - REMPLACER LIEN PAR IMAGE STAFF / DIMENSIONS : 60*60 -          --> 
                    <img src="http://image.noelshack.com/fichiers/2016/30/1469869003-4b17d7a64a314da08eef39b98963f91a.png" alt="membre_staff" />                                                                                                         
                  </div>
                                                                                                                                                     
                  <p>
                                                Louis Weasley <br />                           
                      <!--          - NOM DU MEMBRE DU STAFF -          --> 
                    <span class="texte_rangstaff"><b>Modérateur</b></span> <br />                           
                      <!--          - RANG DU MEMBRE DU STAFF -          --> 
                    <span class="position_infostaff"> 
                      <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/u39">Profil</a>
                      <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=39">Mp</a>                             
                        <!--          - REMPLACER # PAR LIEN PROFIL ET LIEN MP -          -->    </span>                                                               
                  </p>
                                                                                                 
                </div>
             
            </div>
<!-- FIN LIGNE STAFF 2 -->                                                                                  
      </div>
                                                                                               
      <!--                      - BLOC ACTUALITES -                      -->                                           
      <div class="bloc_news">
                                                                                        
         <div class="news">
                                                                                                                                                 
            <h2 class="titre_news">
                                                 Actualités                               
            </h2>
                          <br/>
            <p>
                                                     <strong>01.06.16 :</strong> Ouverture du forum                                                           
                                  <br/>
                                                                                                                                                                                           
         
                                                 <strong>02.09.2016 :</strong> Nous sommes en octobre 2018   
                                  <br/>
                                                                                                 
                                 
                                  <strong>02.09.2016 :</strong> Bilan du mois d'août<a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t382-bilan-du-mois-d-aout-2016#3890"/> ici</a>                               
            
                         
            
                          <br/>  <strong> 06.09.2016 : </strong> <a target="_blank" href ="http://mimbulus-mimbletonia.forumactif.org/t385-changement-important-dans-le-staff-evolution#3955"/>Petit changement dans le staff.</a>  Scorpius Malefoy devient Administrateur et Ivory Welling Modérateur  <br/> Un article de la gazette vient de sortir <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t392-scandale-le-ministre-de-la-magie-a-ete-attaque"/> ici</a>               
          <br/> <strong> 10.09.2016 : </strong> <a target="_blank" href ="http://mimbulus-mimbletonia.forumactif.org/t401-les-pnj-partages#4148"/>Petite nouveauté, les PNJ Partagés</a>
                                                                                                                 
         </div>
                                                                                          
      </div>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne2">
                                                                                               
      <!--                      - BLOC VIDEO -                      -->                                         
      <div class="bloc_video">
                                                                                        
         <div class="video">
                                                                                                                                                 
            <!--                      - INSERER IFRAME YOUTUBE A LA PLACE DU LIEN / Dimensions : 285*210 -                      -->                                                                    <iframe style="width: 275px; height: 210px;" src="https://www.youtube.com/embed/LZtt27zVatU" allowfullscreen="" frameborder="0"></iframe>                                                                                 
         </div>
                                                                                        
      </div>
                                                                                               
      <!--            - IMAGES Membres du mois / Remplacer # par lien du Membres / Dimensions de l'image : 40*40 -            --> 
          <div class="bloc_membres">
                                                                                                               
 <div class="membres">
 
          <p class="titre_membres">
                                  Les Membres du Mois                           
 </p>
                          <div class="membres_position">
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                              <img src="http://image.noelshack.com/fichiers/2016/35/1472985578-photo.jpg" alt="predefini" />
                                </span>
                                <span class="profil_membre_texte"><p>Ginevra Potter<br />
                                  <span class="rang_membre">Le + Actif</span> <br />
                                  <a target='_blank' href="http://mimbulus-mimbletonia.forumactif.org/u45">Profil </a>
                                  <a target='_blank' href="hhttp://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=45">MP</a>
                                  </p>
                                </span>
                           
                              </div>
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                                <img src="http://image.noelshack.com/fichiers/2016/35/1472985568-oroigbavwdu.jpg" alt="predefini" />
                              </span>
                                <span class="profil_membre_texte"><p>Scorpius Malefoy<br />
                                  <span class="rang_membre">Le meilleur RPlayeur</span> <br />
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/u13" target="_blank">Profil </a>
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=13" target="_blank"> MP</a>
                                  </p>
                                </span>
                           
                              </div>
                             
                              <div class="profil_membre">
                           
                              <span class="rond_membres">
                              <img src="http://image.noelshack.com/fichiers/2016/30/1469991891-8a045080306a7cc91e67e5006074ba0b409b9acc0a9ae216bf29b0d4.png" alt="predefini" />
                              </span>
                               
                                <span class="profil_membre_texte"><p>Ivory Welling<br />
                                  <span class="rang_membre">Le Meilleur Voteur</span> <br />
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/u18" target="_blank">Profil </a>
                                  <a href="http://mimbulus-mimbletonia.forumactif.org/privmsg?mode=post&u=18" target="_blank">MP</a>
                                  </p>
                                </span>
                            </div>
          </div>
                 
         </div>
                                                      
      </div>
                                                                                               
      <!--                      - BLOC COUPE DES 4 MAISONS -                      -->                                           
      <div class="bloc_coupe">
                                                                                        
         <div class="coupe">
                                                                                           
            <div class="position_badges">
                                                                                                                                                                          
               <p>
                                                        Coupe des 4 Maisons                                   
               </p>
                                  <br/>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/griffo11.png" alt="gryffondor" />                                                                                                                                           
                  <p class="ptsH">
                                                             714 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS GRYFFONDOR -                      -->                                                                                                                                 
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/poufso11.png" alt="poufsouffle" />                                                                                                                                         
                  <p class="ptsH couleurP">
                                                             783 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS POUFSOUFFLE -                      -->                                                                               
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/serdai10.png" alt="serdaigle" />                                                                                                                                         
                  <p class="ptsB">
                                                             982 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS SERDAIGLE -                      -->                                                                                                                                 
               </div>
                                                                                                                                                  
               <div class="badge">
                                                        <img src="http://i35.servimg.com/u/f35/19/45/46/99/serpen10.png" alt="serpentard" />                                                                                                                                         
                  <p class="ptsB couleurS">
                                                             1 900 points                                     
                  </p>
                                                                                               
                  <!--                      - POINTS SERPENTARD -                      -->                                                                           
               </div>
                                                                                                  
            </div>
                                                                                       
         </div>
                                                                                    
      </div>
                                                                     
   </div>
                                                              
   <div class="bloc_ligne3">
                                                                                               
      <!--                      - BANDEAU DEFILANT DES PARTENAIRES / REMPLACER LIEN PAR LIEN DU BOUTON PARTENAIRE -                      -->                                       
      <marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="30" scrollamount="5" direction="left" behavior="scroll">
                           <a href="http://disney-recherches.forumactif.org/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/ujak10.jpg" /></a> <a href="http://bubobulb.forum-actif.net" target="_blank"><img src="http://i86.servimg.com/u/f86/12/57/58/15/bouton17.png" /></a> <a href="http://atlanticcity.forumactif.org/" target="_blank"><img src="http://i21.servimg.com/u/f21/09/03/72/35/100-3510.jpg" /></a> <a href="http://way-of-life-wayfate.forumactif.pro/" target="_blank"><img src="http://i86.servimg.com/u/f86/15/38/67/45/sfvn11.png" /></a> <a href="http://paradis-fanfictions.twilight-mania.com" target="_blank"><img src="http://i66.tinypic.com/2qxrwpf.jpg" /></a> <a href="http://magicalement.forumactif.org" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/11/1458065101-stampspart.png" /></a> <a href="http://mimbulusmimbletonia.forumetoile.com" target="_blank"><img src="http://imageshack.com/a/img922/4495/Fu6hRD.jpg" /></a><a href="http://petrificare.rpgistes.com" target="_blank"><img src="http://i84.servimg.com/u/f84/19/30/82/32/10035p10.png" /></a>  <a href="http://firebolt.forumactif.org" target="_blank"><img src="http://nsm08.casimages.com/img/2015/10/25//15102508204614296413692838.png" /></a>  <a href="http://memento-mori-rpg.forumactif.org" target="_blank"><img src="http://i67.tinypic.com/2e31iso.jpg" /></a> <a href="http://impero.superforum.fr" target="_blank"><img src="http://img11.hostingpics.net/pics/874950part10035.jpg" /></a> <a href="http://carte-maraudeur.forumactif.org"target="_blank"><img src="http://i67.tinypic.com/2h2nijc.jpg" /></a> <a href="http://amnesia.actifforum.com/"target="_blank"><img src="http://zupimages.net/up/16/29/ic0d.png" /></a>                 
      </marquee>
                                                                                               
      <!--                      - CREDITS CREATEUR ET NU -                      -->                                                   
      <p class="creditsNU">
                                     PA codée par Elenthil ★ <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a>                         
      </p>
                                                                             
</div> </div>

Tu vois bien le problème je pense rien qu'en allant sur le forum test, je ne sais pas comment arranger ça.
Tu ne pourrais pas par hasard me passer directement le code que tu as sur ton forum test ? (avec les partenaires en plus).
Sinon je pense qu'on va rapidement trouver le problème. :)

Encore merci pour ton aide

Punaise mais quelle boulette je t'ai donné x) normal que ça marche pas x)

Il manque le point pour la class de .profil_staff2 du coup ça ne pouvait pas fonctionner ^^ Et tu avais raison il manquait le inline-block (c'est bien tu commences à prendre des réflexes )

Du coup le bon code est celui là :

Code:

.profil_staff2{
    position : relative;
    bottom : 10px; /* A changer pour remonter plus haut si tu le souhaites */
  display: inline-block;
margin: 0px 5px; /* Pour augmenter l'espace entre les deux blocs profil du staff. Changer la valeur 5 */

    }

Il faut aussi que tu rajoutes quelques trucs pour que la mise en forme prenne. En gros on va rajouter la class qu'on vient de créer à côté de la première :

Code:

.profil_staff p, .profil_staff p a, .profil_staff2 p, .profil_staff2 a{
          margin: 0;
                font-family: "Master Of Break", Arial, sans-serif; /* Pour changer la police d'écriture du texte des membres du staff - Attention, si décalage du bloc suite au changement, réduire l'écriture avec un font-size */
          line-height: 10px;
                color: white; /*Pour changer la couleur du texte des membres du staff */
      }
     
      .profil_staff p a, .profil_staff2 p a{
          text-decoration: none;
      }
     
      .profil_staff p a:hover, .profil_staff2 p a:hover{
          text-decoration: underline;
      }
     

Tu vois ce que j'ai fait ? J'ai juste rajouté le .profil_staff2 à la suite du .profil_staff pour que ça prenne les mêmes priorités

Je me disais bien (je n'étais donc pas totalement folle)
Je suppose que tu peux accéder au rendu final ? Si oui, je vais juste dire qu'il y a un truc qui me perturbe xD (mais après est-ce flagrant) --> Staff, ligne deux, deuxième image, il est pas centré. Je suis une cinglée je sais. Tu en penses quoi ?

Ensuite, peux-tu me rappeler la partie dans les membres du mois qu'il est possible de régler pour les espacer d'avantage ?

Merciii, je pense que c'est bientôt fini :)

Mais naaaaaan tout va bien On arrive au bout après des semaines de travail acharné

Alors alors oui tu as raison, il y a plus de vide du côté droit sur le côté droit que le côté gauche sur la ligne 2 mais ça c'est parce que tu as rajouté un margin left qui perturbe tout

On peut déjà faire un ptit changement tout simple. Dis moi ce que tu en penses.

Tu retournes sur cette class :

Code:

    .profil_staff2{
        position : relative;
        bottom : 10px; /* A changer pour remonter plus haut si tu le souhaites */
      display: inline-block;
    margin: 0px 5px; /* Pour augmenter l'espace entre les deux blocs profil du staff. Changer la valeur 5 */

        }

Enlève le margin-top et margin-left que tu as rajouté. Si tu veux remonter les blocs, tu passes par la valeur sur bottom.

Et ensuite tu changes les réglages du margin comme ceci :

Code:

margin: 0px 32px 0 px 32px;

Si tu veux équilibrer le positionnement de tes blocs, il faut que ta valeur soit identique à gauche et à droite. Ca ne pouvait pas marcher puisque tu as rajouté un margin-left dans le réglage de la class qui perturbe tout. Si tu as déjà un margin, il faut que tu changes les données dans celui ci et pas rajouter une nouvelle ligne ^^ (car ton code ne va plus rien comprendre, d'un côté tu lui dis de prendre en compte toutes les parties du margin et de l'autre tu lui demandes de mettre 0px sur left)

Tu n'avais pas changé pour les membres du mois ? Je te l'avais mis plus haut ><

Revoici le réglage pour agrandir les blocs des membres du mois, ça permet de les élargir juste pour qu'ils prennent plus de place (et en même temps ça les espace). Tu changes juste la valeur du width. Essaie la valeur que je t'ai mise car ça devrait bien te les agrandir pour que tout tienne sur une ligne.

Code:

    .profil_membre{
    width: 125px;
    }

Pour le staff, le problème reste toujours le même :/ la ligne 2 image 2 ne veut pas se mettre comme l'image 1 :/
Bon après c'est peut-être pas si grave ?

Je m'occupe des membres toute à l'heure
Merci d'avance pour ton aide