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.  :)

Hey,

Je sais pas ce que j'ai dû faire mais le bloc de la coupe ne remonte pas (http://callypso-island.forumgratuit.org/). Regarde mon code :

HTml

Code:

<!--             - IMAGES Membres du mois / Remplacer # par lien du Membres / Dimensions de l'image : 40*40 -             -->  
                          <div class="membres_position">
                              
                              <div class="profil_membre">
                            
                              <span class="rond_membres">
                              <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" />
                                </span>
                                <span class="profil_membre_texte"><p>Marina Bellagua Swane<br />
                                  <span class="rang_membre">Le + Actif</span> <br />
                                  <a href="#" target="_blank">Profil </a>
                                  <a href="#" target="_blank">MP</a>
                                  </p>
                                </span>
                            
                              </div>
                              
                              <div class="profil_membre">
                            
                              <span class="rond_membres">
                                <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" />
                              </span>
                                <span class="profil_membre_texte"><p>Marina Bellagua Swane<br />
                                  <span class="rang_membre">Le meilleur RPlayeur</span> <br />
                                  <a href="#" target="_blank">Profil </a>
                                  <a href="#" target="_blank"> MP</a>
                                  </p>
                                </span>
                            
                              </div>
                              
                              <div class="profil_membre">
                            
                              <span class="rond_membres">
                              <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" />
                              </span>
                                
                                <span class="profil_membre_texte"><p>Marina Bellagua Swane<br />
                                  <span class="rang_membre">Le Meilleur Voteur</span> <br />
                                  <a href="#" target="_blank">Profil </a>
                                  <a href="#" target="_blank">MP</a>
                                  </p>
                                </span>
                            
                  
 </div>
                                              
 </div>

CSS

Code:

.bloc_membres { width: 250px;
      
      height: 200px;
      display: inline-block;
  }
  
  .membres{
       width: 287px; /* 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: #707070; /* 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: 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;
          }

.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: 11px; /* 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: 'Oswald', sans-serif; /* Police d'écriture */
          line-height: 13px; /* Pour l'espacement entre chaque ligne donc prénom + nom, rang, Liens */
          color: #707070; /* Couleur du texte */
          
          }
          
          .rang_membre{
          font-family: Tahoma; /* Police d'écriture des rangs de membres comme le + actif par exemple */
          font-variant: small-caps; /* Ajout des petites majuscules */
          font-size: 10px; /* Taille du rang des membres */
          
          }
  

Ensemble du code :

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 */
          
          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'; /* Pour changer la police du titre Bienvenue sur le forum */
            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-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: #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: -10px;

      
  }
  
  .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: -20px; /*=> 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: 12px;
  }
  
  .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: 287px; /* 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: #707070; /* 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: 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;
          }

.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: 11px; /* 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: 'Oswald', sans-serif; /* Police d'écriture */
          line-height: 13px; /* Pour l'espacement entre chaque ligne donc prénom + nom, rang, Liens */
          color: #707070; /* Couleur du texte */
          
          }
          
          .rang_membre{
          font-family: Tahoma; /* Police d'écriture des rangs de membres comme le + actif par exemple */
          font-variant: small-caps; /* Ajout des petites majuscules */
          font-size: 10px; /* 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">Fondateur</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">Administrateur</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">Modérateur</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é ici, tout comme la journée d'intégration que vous retrouverez ici même                
 </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                                  
 </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="membres_position">
                              
                              <div class="profil_membre">
                            
                              <span class="rond_membres">
                              <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" />
                                </span>
                                <span class="profil_membre_texte"><p>Marina Bellagua Swane<br />
                                  <span class="rang_membre">Le + Actif</span> <br />
                                  <a href="#" target="_blank">Profil </a>
                                  <a href="#" target="_blank">MP</a>
                                  </p>
                                </span>
                            
                              </div>
                              
                              <div class="profil_membre">
                            
                              <span class="rond_membres">
                                <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" />
                              </span>
                                <span class="profil_membre_texte"><p>Marina Bellagua Swane<br />
                                  <span class="rang_membre">Le meilleur RPlayeur</span> <br />
                                  <a href="#" target="_blank">Profil </a>
                                  <a href="#" target="_blank"> MP</a>
                                  </p>
                                </span>
                            
                              </div>
                              
                              <div class="profil_membre">
                            
                              <span class="rond_membres">
                              <img src="http://i35.servimg.com/u/f35/19/45/46/99/bouton10.jpg" alt="predefini" />
                              </span>
                                
                                <span class="profil_membre_texte"><p>Marina Bellagua Swane<br />
                                  <span class="rang_membre">Le Meilleur Voteur</span> <br />
                                  <a href="#" target="_blank">Profil </a>
                                  <a href="#" target="_blank">MP</a>
                                  </p>
                                </span>
                            
                  
 </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">
                                         539 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">
                                         535 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">
                                         556 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 416 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>
                                                        

Tu peux peut-être m'éclairer ai-je fait une bêtise ?

édit : faudrait remonter le titre et les images je pense mais je sais pas comment :/ et je sais pas pourquoi le bloc de la coupe s'est barrée :/ écoute, j'ai déjà fait la MAJ du forum, mais j'ai prévenu les membres pour la PA, je ne suis pas pressée, du moment que c'est bien fait.

Ah d'accord ^^ C'est un peu ce que je craignais, je n'étais pas sûre de l'avoir bien expliqué. Tu as effacé la class .bloc_membres et la class .membres ainsi que le titre :

Tu vois l'endroit où ça devrait être ?

En gros tu as ton comm :

Code:

 <!--            - IMAGES Membres du mois / Remplacer # par lien du Membres / Dimensions de l'image : 40*40 -            -->

Mais il te manque le bout des divs qui permettent d'afficher le bloc entier juste au dessus.

Donc du coup tu vas rajouter au dessus de ce commentaire :

Code:

<!--                      - BLOC PREDEFINIS -                      -->                                           
 <div class="bloc_membres">
                                                                                                               
 <div class="membres">
                                                                                                                         
 <p class="titre_membres">
                                  Membres du mois                               
 </p>

Qu'est-ce que je peux être con (pardon je me parle toute seule)
J'ai dû mal comprendre à un moment (tête en l'air que je suis)
Je viens de faire les modif (heureusement que tu es là)
Quelques petites minutes que je mette les images et les liens (+ une petite remontée du titre et je te tiens au courant) (je ferais un double post au cas où)

Non pas de soucis t'inquiète ^^ Je n'étais pas sûre, pendant un moment j'ai pensé au risque que tu allais peut être tout supprimer sans faire gaffe. J'aurais dû te mettre un warning à cet endroit là ^^

J'attends la modif alors.

Donc c'est parfait, mais est-ce qu'il y a moyen d’agrandir les blocs en largeur sans que ça bouge tout ? Comme tu peux le voir, ça dépasse un peu, mais je veux pas réduire la taille car sinon on va rien voir du tout.
j'ai essayé de grossir les blocs : staff et membres du mois, mais ça bouge le bloc actualité :/ (peut-être qu'il faut agrandir la PA en largeur ?
Mais comment faire sans tout faire foirer. (Sinon ça sera tout bon :))
Encore merci

Qu'est ce qui dépasse ? Là je n'ai pas compris. Si tu pouvais détailler ça m'aiderait à comprendre ^^

Tu veux agrandir quels blocs ? Tous les blocs ou bien un seul uniquement ?

A cause de l'écriture choisi. L'écriture justement dépasse un peu dans le bloc vidéo. J'aurais donc voulu agrandir ce bloc sans bouger les autres. (Il y a aussi un décalage sur le deuxième membre avec le nom de famille )
Quitte à ce que jaggrandisse toute la PA en largeur. Et lesi deux blocs staff et membres du Mois pour qu'il ait les même tailles (et ce sans que l'actualité saute).
Tu comprends ? (Moi et mes explications)

Hum...

Fais moi un screen parce que dans le bloc vidéo il n'y a pas d'écriture et que ce soit sur Chrome ou Firefox, le texte du membre ne rentre pas dans celui-ci. Si on agrandit ce bloc, il y a plusieurs problèmes qui se posent. J'ai fait des tests déjà donc oui faudrait agrandir la PA pour que ça passe mais même quelques pixels ça fait très juste. J'ai essayé de pousser au max sur les côtés avec l'inspecteur pour dégager de la place, ça reste très minime.

Pour le décalage sur le deuxième membre, c'est normal, c'est tellement compacté qu'il est très difficile de faire tenir un nom long sur une seule ligne. Avec mon écriture ça passait, mais la tienne est trop grosse pour que ça tienne bien.

La seule solution que je vois c'est un agrandissement de la PA à + de 900px, pousser les blocs sur les côtés au maximum pour dégager la place et agrandir la largeur du bloc des membres (ainsi que ceux qui sont emboîtés dedans)

Pas sûr que ce soit prêt pour ce soir puisqu'il faut que je bidouille pour voir comment arranger ça.

Je suis pas pressée prend ton temps. Je vais aller me coucher pour le boulot demain. (Je commence tôt).
Comme je le disais plus haut j'ai bien précisé aux membres que la PA n'était pas terminée.
Désolée de tabandonner maintenant bonne nuit et encore merci :)

Ok pas de soucis =)

Mais tu me confirmeras juste que c'est bien ça que tu veux et tu me feras un screen pour me montrer ton soucis.

Il me faudra aussi ton code complet histoire que je fasse des retouches dessus et que je vois à combien il faut que je monte dans la taille pour que ça passe et que ça s'aligne comme tu le veux.

Bonne nuit du coup =)

Merci :) et bonsoir :)

Est-ce que cette capture te suffit ? https://2img.net/image.noelshack.com/fichiers/2016/31/1470073662-image2.png
Donc, j'aimerais agrandir la PA en largeur afin de pouvoir toucher aux largeurs du bloc STAFF et du bloc Membres du mois sans que cela cafouille l'ensemble du code. Tu comprends ?
Voici le code :

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 */
         
          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'; /* Pour changer la police du titre Bienvenue sur le forum */
            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-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: #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: -10px;

     
  }
 
  .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: -20px; /*=> 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">
                                                             539 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">
                                                             535 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">
                                                             556 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 416 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>

As-tu besoin d'autres choses ?

Encore mercii :)

Coucou et désolé pour ce retard, je suis vraiment incorrigible

Ah d'accord je comprends ^^

En fait tu dois avoir la police installée sur ton PC donc tu es la seule à la voir actuellement. Pour que les autres utilisateurs puissent l'avoir, il faut que tu utilises un code d'intégration et le placer au début de ton code comme j'ai fait pour Grand Hotel par exemple :

Code:

<link href="https://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet" type="text/css" />      <style type="text/css">

Ta police c'est "Master of Break" ?

Du coup, il va falloir voir d'où elle provient, si on a les droits dessus pour l'utiliser (faut pas qu'il y ait un copyright dessus quoi) et l'installer sur internet afin de récupérer un code d'intégration qui permettra à tous les internautes de la lire sur ton forum. Tu comprends ?

J'ai donc fait ma petite recherche et apparemment elle est 100% gratuite ^^ (c'est bien celle là : http://www.dafont.com/fr/master-of-break.font ?) Donc je m'occupe de l'héberger sur un site qui permet de récupérer le code d'intégration pour te le transmettre.

Attention quand même, ça marche pour celle ci car elle est gratuite. Mais si il y avait un message comme quoi il ne fallait pas l'utiliser sans autorisation (à part usage personnel), bah on n'aurait pas pu l'intégrer. Garde bien ça à l'esprit pour les prochaines.

Pour ta demande, je comprends ce que tu veux dire. Donc tu veux que ça fasse comme sur ma version mais avec ton écriture à la place et que ce ne soit pas trop serré ou collé aux autres blocs (et que chaque donnée tienne en une ligne)

Du coup ça ne te dérange pas un agrandissement de la PA ? Comme il va falloir jouer sur l'agrandissement du bloc, forcément va falloir prendre plus d'espace pour que ça tienne avec cette écriture précise.

Ca sera tout pour les questions ^^

300 ans plus tard (sorry)
Pour l'écriture, oui c'est master of break. (c'est bien celle que tu m'as envoyé).
Pour que tout rentre, un agrandissement de la PA ne me gêne pas du tout :)
Revoilà le code vu que j'ai mis les membres du mois :

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 */
          
          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'; /* Pour changer la police du titre Bienvenue sur le forum */
            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-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: #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: -10px;

      
  }
  
  .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: -20px; /*=> 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">
                                         539 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">
                                         535 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">
                                         556 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 416 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>

Encore merci :) (j'ai rien oublié ?)

Bonne soirée

Coucou

Nan c'est tout bon ^^

Par contre tu as fait une toute petite faute dans ton code pour les liens dans le bloc news. Tu as mis

Code:

<a target="_blank" href="LIEN" /></a>

Tu peux enlever le slash, il rend ton code en rouge

Autre petite question :



Sur le screen que tu m'as envoyé, les écritures sont en minuscules. Moi je les ai en majuscules. Donc je voulais savoir si tu avais là aussi une police spécifique.

J'ai regardé pour l'intégration du texte par contre, je pense qu'il vaut mieux que tu le fasses toi même ^^ (je parle de l'installation). Car il faut un compte Dropbox (ça va vite à créer) et si tu veux changer de polices de ce genre, il vaut mieux que tu apprennes à le faire toi même

Donc je t'invite à suivre l'astuce de Nihil donnée dans ce problème :

https://www.never-utopia.com/t59745-probleme-avec-police-d-ecriture

Et tu me donneras l'url du fichier dropbox où se trouve ta police. Ca sera plus simple pour toi si tu veux procéder à de futurs changements de polices de savoir comment ça fonctionne et d'avoir un compte pour gérer les polices intégrées

Hey,

Pour l'histoire du "/" je m'en occupe :)
Les titres sont "Master Of Break et le reste en Castellar (si c'est ça que tu me demandes)
Donc si j'ai compris, je me créais un compte Dropbox, j'essaye de télécharger la police dessus et je te repasse le lien ?
(Si c'est le cas, j'essaye de faire ça dans la journée ou dans la semaine, sorry, c'est un peu compliqué vu que je viens de reprendre le boulot).

merci

Hello :)

D'accord merci =) Me semble que c'est bon alors.

Oui tu vas te créer un compte Dropbox, et tu suis les instructions dans le message de Nihil pour installer la police dessus. Moi je souhaite juste récupérer le lien de Master of Break pour pouvoir l'intégrer dans ton code .

Pour Castellar faudra juste intégrer la police grâce à google fonts car tout le monde ne risque pas de la voir.

Re,

J'essaye de faire ça sans faute ce Week-end (je suis en congés). Je te tiens au courant.

Bonne soirée :)

Coucou, pas de soucis pour faire ça ce week end ^^

Hello

Donc je vais m'y mettre aujourd'hui, je viens de voir que j'ai déjà un compte Dropbox, mais le seul soucis est que je ne sais pas comment m'y prendre : la police vient d'être télécharger sur Dafont, mais comment faire ensuite ? Dois-je l'installer sur Windows ? J'avoue être bloquée pour le coup, car dans le tuto que tu m'as donné, la personne a déjà mis la police sur dropbox, mais je ne sais pas comment faire :/

Merci d'avance (si tu peux m'aider)

EDIT: j'ai pas vraiment compris le tuto
j'ai fait ça : https://www.dropbox.com/s/ahjnxk3xn579vox/stylesheet.css?dl=0

et dedans :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on August 14, 2016 */
 
 
 
@font-face {
    font-family: 'master_of_breakregular';
    src: url('master_of_break-webfont.woff2') format('woff2'),
         url('master_of_break-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
 
}

Hello :)

Je me tape l'inscrustation quelques minutes :3
Si j'ai bien compris, Elenthil a besoin du lien de la police transformée seulement.

Je rappelle la manière de procéder :

1 / On va sur Font Squirrel
https://www.fontsquirrel.com/tools/webfont-generator

2 / On clique sur "Upload fonts", tu sélectionnes ton fichier de police.

3 / Tu coches  "Yes, the fonts I'm uploading are legally eligible for web embedding.". Bien évidemment, si ce n'est pas autorisé par l'auteur, le mieux c'est de respecter la décision de l'auteur et ne pas mettre la police...
4 / Tu laisses " OPTIMAL" coché, et ensuite tu peux cliquer sur le bouton de téléchargement :)

Ca va te donner un fichier zip, que tu peux dézipper.

Dedans, on ne va garder que certains fichiers, le reste tu peux le supprimer. On garde :
- stylesheet.css
- tous les fichiers de police (ceux avec -webfont à la fin)

Les fichiers de police sont à héberger, je ne sais pas si Elenthil les veut tous ou bien seulement un ^____^
Ensuite, pour chaque fichier dont Elenthil a besoin, tu partages le lien du fichier de la police :)
En attendant qu'Elenthil réponde, je te conseille de faire ceci et lui fournir tous les liens de polices, elle fera le trie ensuite si elle veut ^^

Si tu as des éléments que tu ne comprends pas dans la procédure, tu peux poser des questions

Bonsoir,

Du coup pour l'instant voici ce que j'ai fait :

- J'ai télécharger ma police sur DAFONT (format zip) (à l'intérieure, il y a deux types de fichiers : un fichier format otf et un ttf)
-Je viens de les Upload toutes les deux sur fontsquirrel. J'ai téléchargé les deux KITS.
dans le fichier zip (je dis tout comme ça vous pourrez me dire si j'ai fait une erreur) :
- un dossier "specimen-files" --> "grid_12-825-55-15.css" et "specimen_stylesheet.css" que j'ai d'ailleurs supprimer.
- generator_config.txt --> Que je supprime aussi
master_of_break-demo.html - Idem
- master_of_break-webfont.woff, master_of_break-webfont.woff2 et stylesheet.css = que j'ai donc gardé.
- fichier dézipper et héberger sur dropbox.
En voici d'ailleurs le lien : https://www.dropbox.com/s/ahjnxk3xn579vox/stylesheet.css?dl=0
Je crois que pour cette police c'est tout bon ? (par pitié dites-moi que oui xD)



Encore merci pour votre aide :) (je prie mentalement pour que ce que j'ai fait soit correcte)

En fait là tu donnes le lien du fichier CSS, il faudrait plutôt partager le lien des polices (master_of_break-webfont.woff, master_of_break-webfont.woff2) ^^

Au fait, pour Dafont, même s'il te donne 2 fichiers, en mettre un seul sur FontSquirrel suffisait normalement, désolée j'ai oublié de le préciser :)

Au fait, pour Dafont, même s'il te donne 2 fichiers, en mettre un seul sur FontSquirrel suffisait normalement, désolée j'ai oublié de le préciser :)

Je viens de remarquer que c'est exactement la même chose (je suis trop forte)

Je suis consciente d'avoir partagé le fichier CSS.
Mais ce que je ne comprends pas c'est comment partager le lien des polices. (est-ce tout simplement ça : "master_of_break-webfont.woff2" et "master_of_break-webfont.woff" ou bien ce n'est peut-être pas ça mais alors comment faire ?)

Je sais pas si je suis claire dans ce que je dis. J'ai l'impression d'être totalement bête pour le coup car je suis sûre que c'est très simple à faire.

Hum, tu as réussi à partager le fichier CSS. Il faut faire comme tu as fait, mais pour les polices.

Du coup, il faut mettre les fichiers au même endroit que le fichier CSS.
Et ensuite, tout comme tu as réussi à partager le lien du fichier CSS, il faut partager le lien de chacun des fichiers de police

Est ce plus clair comme ça ?

T'inquiète pas, on va y arriver xD

Comme ça (oui on va y arriver) :

https://dl.dropbox.com/s/ux3jil1hqhvhdfu/master_of_break-webfont.woff2?dl=0

https://dl.dropbox.com/s/kpcaau2l39yhiks/master_of_break-webfont.woff?dl=0

(Je pense que c'est ça ?)

Après, je sais pas si c'est normal qu'on ne peut pas voir ce qu'il y a à l'intérieure :)

(Encore merci )

S'il  y a un problème, j'éditerais ce message :)