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

Bonjour à toute et à tous,

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

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

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

Pourriez-vous m'aider ?

voici les différents codes :

CSS et HTML :

Code:

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

Code:

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

Merci d'avance pour votre aide.  :)

Coucou Gwen =)

Alors si j'ai bien compris tu souhaites rajouter donc une dernière image sur la PA (donc elle serait en dessous des deux autres) et tu veux une forme en triangle de chaque image au lieu d'un rond c'est bien ça ?

Pour ta deuxième question, il faudrait donc supprimer un des ronds et rajouter un bloc de texte sous chaque icône. Oui je vois ce que tu veux dire. Laisse moi bidouiller un peu et je te dis comment il faut faire =) (je sais pas si dan spersonnalisations faut donner le code ou bien il faut te guider par contre, je vais aller me renseigner)

Bonsoir ,

Pour l'onglet du staff, oui en partie. Mais par contre, je ne veux pas changer la forme, je sais pas comment m'expliquer. Le but c'est pas que ça "bousille" tout le code tu vois, et j'avoue que je ne sais pas comment m'y prendre de ce côté-là. Du moment que ça reste Harmonieux (vu qu'on va bientôt être trois). Voici un schéma (bizarre je sais) mais j'espère que tu vas comprendre :
https://2img.net/image.noelshack.com/fichiers/2016/28/1468699602-20160716-220045.jpg
Après est-ce qu'il n'y aurait pas une autre solution ? Quitte à changer la forme dans la partie staff ? Ou alors agrandir la PA ? (et peut-être les autres blocs)

Sinon pour la deuxième partie c'est ça :) prend ton temps et tiens moi au courant :)

Encore merci

Bouh !

Elenthil > Tu peux faire comme tu veux. Ça dépend de qui répond en fait. Je suis lâche alors j'ai tendance à donner le code tout fait alors que Nihil explique toujours tout

Ah ok je vois ce que tu veux dire ^^ C'est bon faut juste rajouter une ligne bloc en dessous et centre le bloc qui contient les infos image+texte ^^

Onyx > Merci pour les précisions

Alors Gwen, je bidouille ça de mon côté, je regarde ce que tu peux changer et je te guide pas à pas pour les explications afin que tu puisses modifier par toi même, est ce que cela te convient ? =)

Oui ça me va :) et dans le pire des cas et bien on avisera

Encore merci.

EDIT : ça n'a rien à voir, mais peut-être que tu sais la réponse. J'ai installé la PA sur un autre forum test sur lequel on pré-installe les nouveaux design, et j'essaye de comprendre pourquoi la PA n'est pas centré. Enfin bref, si tu peux m'aider de ce côté-là ça serait sympa (ou l'un de vous aussi). Je me casse la tête depuis tout à l'heure à essayer de comprendre. (http://callypso-island.forumgratuit.org/)
D'après une amie c'est mon ordinateur, oublier ce que je viens de dire, je comprends pas pourquoi il me fait ça.

Hey ^^

Alors j'ai fini la première partie mais j'attends de poser la deuxième avant de te donner les codes + explications

Il faudrait juste que tu me dises si tu souhaites mettre un titre à la place de prédéfinis ou tu veux qu'on l'enlève ?

Valà merci d'avance =)

Blop Super
à la place de prédefinis, je pensais mettre Membres du mois :)
Prend ton temps

Encore mercii

Bonjour,

Je me permets de revenir ici pour passer aux nouvelles :)

Merci encore pour votre aide :)

Salut :)

Actuellement j'en suis ici : http://testselenthil.forumgratuit.ch/

Il me manque juste à changer l'écriture des titres du dessous et éventuellement agrandir les ronds du dessous. Désolé de prendre un peu de temps mais depuis que le code a été déformé c'est assez "dur" de bien voir les différents éléments du code (difficilement lisible). Tu ne m'as pas passé ta dernière version non plus je suis donc retournée à mon ancienne parce que sinon c'était assez difficile à lire. Mais normalement ça ne devrait pas poser de problème.

Ensuite je n'ai plus qu'à te faire le mode opératoire pour remplacer les éléments et ça devrait le faire ^^

Re

Ne t'inquiète pas je comprends :). D'ailleurs, je sais pas si tu as vu, mais j'ai commencé à mettre les nouvelles couleurs/écritures sur le forum test : http://callypso-island.forumgratuit.org/ (mais ne t'en fait pas je m'en occuperai). J'ai dû agrandir les 4 cases (vidéo, actu etc...) (d'ailleurs si tu as une solution pour la vidéo, je suis preneuse vu qu'à priori, elle n'est pas bien centré dans le cadre ? (peut-être que c'est la taille de la vidéo ?))
J'attends donc que tu es terminée :)

Encore mercii
En tout cas :) merci pour ton aide (ce que tu as fait est très bien :))

Hum...

Tu fais un up pour savoir où j'en suis mais à côté tu fais déjà des modifs sans prévenir sachant que je suis en train de bosser sur ton code à côté. Tu aurais pu laisser un ptit message et me passer tes nouvelles modifications parce que là je fais mes modifs sur une version qui n'est pas à jour et les blocs risquent de rentrer en conflit entre ce que je vais te passer et ce que tu as déjà fait. (surtout par rapport au bloc du milieu où je suis obligée de serrer les éléments pour que l'écriture ne soit pas trop petite)

En plus pour la vidéo c'est normal je n'ai pas prévu un centrage horizontal et je ne pensais pas que tu allais faire des modifications personnelles dessus.

Du coup je ne sais plus trop comment réagir là

Je ne sais pas si il faut que tu me repasses ta nouvelle version et que je retravaille là dessus pour les modifs, si je dois te passer mes modifs quitte à ce qu'on modifie ce qui coince par la suite... Enfin faut voir parce que je ne sais pas quelle est la meilleure solution là :)

Vu que je n'ai pas eu le temps c'est jours-ci, je viens de le faire aujourd'hui, mais je savais pas que ça pouvait rentrer en conflit :/
Du coup tu me mets un peu le doute, je sais pas si je vais reprendre l'ancienne version du coup. :/ Qu'en penses-tu toi ? Je veux bien te passer la nouvelle version (encore désolée, je savais pas que ça aurait posé un si gros problème ) (après j'ai du agrandir à cause du bloc de la coupe).

Au cas où voici le code modifié que j'ai fait toute à l'heure :

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;
      
          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;
      
  }
  
  .bloc_contexte, .bloc_news{
      width: 320px;
      
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
  
  .contexte, .news{
      width: 295px;
      height: 180px;
            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: 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: '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;
      
  }
  
  .bloc_video, .bloc_coupe{
      width: 320px;
      
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
  
  .video, .coupe{
      width: 295px;
      height: 180px;
            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_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: 60px;
      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 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>
                                     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 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>
                                                                                
 </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>18.06.16 :</strong> Ouverture du sujet pour l'inscription à la journée d'intégration <a target="_blank" 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 target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t193-les-capacites-speciales">ici</a>. Sans oublier le sujet des clubs présents au Château <a href="http://mimbulus-mimbletonia.forumactif.org/t118-creation-de-club-a-poudlard" target="_blank">ici</a>                          
 </p>
                                                                              
 <p>
                                   <strong>01.07.2016 :</strong> Version 3 du forum & Bilan du mois de Juin <a target="_blank" href="http://mimbulus-mimbletonia.forumactif.org/t258-bilan-du-mois-de-juin-2016">ici</a>                                
 </p>
                                                                              
 <p>
                                   <strong>01.07.2016 :</strong> Nous sommes en Septembre 2018                                
 </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 style="width: 285px; height: 165px;" src="https://www.youtube.com/embed/LZtt27zVatU" allowfullscreen="" frameborder="0"></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 href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6" target="_blank">                      <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373820-wvvqzp.jpg" alt="predefini" />                                                                </span></a>                          <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373826-25ak93m.jpg" alt="predefini" />                              </span></a> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                                                                                      <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373830-2you89f.jpg" alt="predefini" />                                                                        </span></a>                          <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                                              <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373836-51scc5.jpg" alt="predefini" />                                                                  </span></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 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>
      

Mais du coup, tu viens de me mettre complètement le doute

Coucou
Sorry du double post. Du coup, tu ne m'as pas dis ce que tu préférais faire ?
Je suis prête à revenir à la première version du code si jamais quitte à ce que tu m'expliques comment on modifie un peu plus tard ?
Encore merci de t'en occuper :) (sorry du double post, si ça gêne j'édite mon message)

PS : Tu crois que ça pourrait être prêt pour Dimanche ? Si tu peux pas, ce n'est pas grave, je la mettrais un peu plus tard, lorsque tu auras totalement terminé. :) (dans tous les cas, je n'ai rien touché depuis)
(Je suis même pas sûre de pouvoir tout finaliser ce que je fais pour Dimanche alors  )

Bonne soirée.

Coucou Miss :)

Alors désolé d'avance pour mon absence de réponse mais je me suis absentée du forum pendant quelques jours, du coup je suis en train de faire mon check de sujets actuellement sur NU. J'allais passer dans le tien au cours de la soirée pour te donner des nouvelles et te dire comment on allait faire.

J'ai terminé ce que tu avais demandé, je te demande juste d'aller vérifier pour savoir si c'est bien cela que tu souhaites : http://testselenthil.forumgratuit.ch/

Voici ce que je te propose. On va travailler sur ta nouvelle version retouchée. Tant pis si il y a des choses qui buguent on va corriger cela au fur et à mesure donc ne panique pas si des choses ne se coordonnent pas comme il faut, on changera tout ceci au fur et à mesure jusqu'à ce que ta PA soit bien comme il faut.

Donc on va faire comme cela :
1) Ajout de la ligne pour le troisième membre du staff
2) Modification des prédéfs en membres du mois
3) Petites retouches supplémentaires (centrage de la PA, correction du bloc des points maison...)
4) Questions ou demandes supplémentaires (si tu souhaites encore faire quelques modifs mais que tu n'y arrives pas).

Je vais donc te fournir mes bouts de code en t'expliquant où placer et comment ça va fonctionner car je pense que tu souhaites apprendre comment faire les choses ça sera donc formateur pour toi je pense ^^

Voilà, j'attends ta confirmation pour savoir si ce que j'ai fait te convient et si cela te va pour la façon de procéder. Normalement si on va assez vite, d'ici dimanche c'est bouclé.

Alors tout d'abord,
Je souhaite te rassurer par rapport à ton absence, je comprends qu'on a tous une vie derrière l'écran :) et je suis ravie que tu ne m'ait pas oublié :)

Je viens d'aller voir sur ton forum test et c'est exactement ce que je voulais faire :) c'est parfait, je n'ai rien à redire.
Tout me va dans ce que tu me proposes (et oui ça ne pourrait que m'aider). Promit je ne paniquerais pas (enfin j'essayerais).
Je suis prête dès que tu le seras :) tu n'as juste qu'à me le dire (bon peut-être pas ce soir, vu que je vais pas tarder à aller au lit), mais disons demain dans la matinée ? ou dans la soirée ? C'est comme tu veux, après tu peux très bien commencer les explications ? et même si tu n'es pas là et bien j'essayerais de faire ce que tu me diras de faire et si j'ai un problème et bien je posterais dans le sujet ?

Je suis prête pour commencer la première étape.

Encore merciii

Coucou :)

Désolé pour le temps de réponse. On m'a embarqué à l'improviste en ville hier et je suis rentrée pas mal tard. Du coup, je n'ai pas pu te répondre comme cela était prévu et j'en suis désolée

Du coup, je me rattrape en te mettant la première partie de ta personnalisation.

Première étape : La ligne supplémentaire pour le troisième membre du staff

Alors comme tu peux le voir sur ton code, ton bloc englobant tout l'élément du staff est celui-ci :

Code:

<!--                       - 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>
                                                                                
 </div>
                      

Nous avons donc le .bloc_staff qui englobe le tout (donc le bloc qui se positionne par rapport au bloc contexte et news). Dans celui-ci, j'ai ajouté une class .staff qui est le bloc permettant de contrôler avec plus de précision le positionnement des ronds + descriptif. Il faut que tu vois ça comme une ligne ou un rectangle qui prend toute la largeur de .bloc_staff.

Ce qu'on va faire c'est rajouter une nouvelle "ligne" qui sera dans un div, au même niveau que .staff. On a envie que ce soit des enfants donc, se situant au même niveau. Et bien sûr, cette deuxième ligne se trouvera dans la class .bloc_staff qui est son parent.

Du coup, dans le code que je t'ai montré plus haut, tu vas trouver ce passage :

Code:

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

Et tu vas mettre un bout de code juste après le deuxième div. Attention ! Il y a un troisième div, il s'agit du div qui referme le .bloc_staff. Mais nous ce qu'on veut, c'est placer la ligne à l'intérieur de celui-ci. C'est pour ça que tu ne dois pas copier ton code après le troisième div mais avant.

Le code qu'on va copier, c'est simplement un c/c de .staff auquel on va attribuer une nouvelle class (pour mieux le contrôler) et qui s'appellera .staff2
Voici le code que tu dois coller :

Code:

<!-- 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://i35.servimg.com/u/f35/19/45/46/99/bouton11.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 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>
<!-- FIN LIGNE STAFF 2 -->

Donc si tu remarques bien, c'est exactement la même chose que sur la ligne 1, sauf qu'au lieu d'avoir deux éléments (pour deux membres du staff), il n'y en a qu'un. J'ai mis un .rond_staff2 aussi pour mieux gérer le rond de la ligne 2.

Une fois que c'est fait, on va placer un peu notre ligne et faire quelques modifs dans le css ^^

Nous allons d'abord réduire la hauteur du bloc de .staff. Actuellement la hauteur que j'ai mise est bien trop longue, du coup si on ne la réduis pas, la ligne du dessous risque d'être vraiment très basse (en gros tu verras un gros espace). Pour éviter ceci, on va donc changer la valeur du height (qui est à 195px) comme ceci :

Code:

.staff{
 width: 290px;
 height: 125px; /* Changement de la hauteur du bloc staff */
 text-align: center;
 }



Ensuite, nous allons placer notre class .staff2 et .rond_staff2. Pour la class .staff2, c'est exactement la même chose que pour staff, du coup, pas besoin de créer une nouvelle règle, on va l'insérer avec la class .staff puisqu'ils ont les mêmes réglages comme ceci :

Code:


/* Ajout de la class staff2 */

.staff, .staff2{
 width:290px;
 height: 125px;
 text-align: center;
 }

Pour le placement de la nouvelle ligne, à cette étape là, je trouvais qu'il y avait un peu trop d'espace entre la ligne 1 et 2. Du coup, j'ai décidé de remonter avec un margin la class du rond_staff afin que ça colle plus.

Le CSS sera modifié en 2 étapes. Il y a des réglages du .rond_staff que je souhaite garder pour mon .rond_staff2 Du coup, je vais faire comme pour .staff2, je vais le placer avec la première class pour les infos qui sont les mêmes, comme ceci :

Code:



/* 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;
  }

Comme tu le vois, il n'y a rien qui change, j'ai juste rajouté .rond_staff2 à côté du premier.

Mais, on ne veut pas que .rond_staff2 soit à 20px du haut, au contraire, on veut annuler ce réglage. Du coup, il faudra créer un réglage spécifique pour que notre rond (et tout ce qui va avec dans le texte), se remonte un petit peu. On crée donc une nouvelle règle CSS :

Code:

.rond_staff2{

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

}
          


Cette ligne te permettra de rapprocher le rond du haut. De base, il est à 20px de la marge haute. Je l'ai donc réduit et forcer à passer à 5px.

Voilà pour la première partie.

Il ne te reste plus qu'à enregistrer et d'actualiser pour voir le résultat. Si ça ne se positionne pas comme il faut, passe moi ton forum histoire que je regarde où ça coince.

Encore une fois, ne t'inquiète pas :)
Donc je viens de faire tout ce que tu m'as expliqué et voilà le résultat : http://callypso-island.forumgratuit.org/

(j'ai laissé mon autre forum test avec le code d'origine au cas où).

Qu'en penses-tu ? Personnellement je pense que c'est parfait :) Juste une petite chose, mais c'est une petite bricole, tu crois que ça serait possible d’agrandir les autres blocs afin que ce soit à "la même taille". Bien par exemple que le bloc staff soit à la même dimension que les autres ? (du moins pour la taille ?). Mais ce petit détail est minime :) J'attends du coup la suite, je suis prête :) (j'avais peur de pas y arriver xD) En attendant je m'occupe des images et des liens comme ça le changement de perso sera déjà prêt.

Encore merci de m'aider :) Je t'attends pour la suite :)

Coucou ^^

Bon bravo d'abord tu as bien réussi à mettre la première partie =)

Ensuite pour les blocs à la même taille tu veux dire que le bloc contexte et news soient plus haut pour que ça s'aligne avec la dernière ligne sur Louis Weasley ? (donc le lien profil/mp). Ca c'est possible mais il faudra que le gif soit plus grand. Là comme tu le vois tu as serré au max déjà les icônes de staff au niveau de la hauteur, le seul moyen que je vois pour améliorer la hauteur des blocs c'est changer la hauteur du bloc news et contexte. C'est ça que tu souhaites ?

Re,
Oui c'est de ça que je parlais (désolée). Changer la taille du contexte (quitte à ce que je mette un gif plus grand) et des news (et par conséquent changer aussi la taille des autres blocs : vidéos, coupes, et membres du mois (si nécessaire).
j'ai aussi pensé à ce que tu m'as dis pour les liens avec le "_blank"
Du coup, j'attends pour la suite (encore merci de m'aider)

Ok ^^ Aloooors pour ça nous allons faire uniquement deux petites modifs, tu vas voir

Déjà, si tu utilises la sélection de l'inspecteur de ton navigateur, tu verras que le bloc staff (comportant les deux lignes) est monté à 200px. Donc il va falloir changer la hauteur à 200px des autres blocs :)

Donc tu vas trouver les class correspondantes que je te montre et changer tout simplement la hauteur :

Code:



.news, .contexte{

height: 200px;

}



Code:



.video, .coupe{

height: 200px;

}


De cette manière, le remplissage des blocs sont exactement à la même dimension que celui du bloc staff pile poil. Mais si tu veux, n'hésite pas à changer cette valeur pour que ce soit un poil plus grand si l'envie te dit ^^

Ensuite, il va y avoir un truc un peu gênant. En effet comme je n'ai pas mis de margin sur les lignes, il n'y a pas d'espace entre les blocs de la première ligne, celui de la deuxième et celui de la troisième. Elles vont se chevaucher. Pour éviter ce problème, nous allons rajouter un ptit margin top sur la ligne 2 et la ligne 3 pour leur donner de l'espace.

Donc trouves les class correspondantes et ajoute à la suite le réglage du margin-top :

Code:

.bloc_ligne2{

margin-top: 15px; /* Ajoute de l'espace avec la ligne du dessus */

}

Code:

.bloc_ligne3{

margin-top: 15px; /* Ajoute de l'espace avec la ligne du dessus */

}

Là aussi tu peux modifier le margin-top à la valeur qui te convient le mieux. J'ai mis 15 px mais à toi de réduire ou d'agrandir selon tes préférences

et voilà :) (c'était pas compliqué )

Que ferais-je sans toi. J'attends la suite du coup, dès que tu as un moment.

édit : j'ai un trou de mémoire, je sais plus comment on peut régler la taille en hauteur de la PA (vu que le crédit à disparut + les partenaires sont légèrement coupés) Mais avant, j'attends de terminer :)
+ que le bloc membre du mois :) un petit réglage de la vidéo et c'est bon, je viens de rajouter un
entre le titre de la coupe des 4 maisons et les blasons, je pense que c'est bon de ce côté-là.

Oh c'est gentil J'espère en tout cas que les explications te conviennent ^^

Au moins tu as réglé le souci pour les blasons et pour la vidéo je pense que si tu changes les dimensions de l'iframe par rapport à la hauteur du bloc (donc peut être 195px), ça l'agrandira sur la hauteur pour qu'il n'y ai pas pas trop d'espace tout en se centrant. A voir ^^

Bon du coup on va attaquer la partie la plus "chiante" pour moi xD Le bloc des membres du mois. Pour celui-ci j'ai un peu rusé afin de tout faire rentrer (parce que t'as du le voir, ce n'est pas évident de mettre un prénom + nom qui est long). Je vais t'expliquer pas à pas pour que tu comprennes ma démarche mais ça va me demander un ptit peu de temps pour te rédiger tout ça ^^ Donc je te fais ça mais c'est juste pour te prévenir si je ne poste pas dans la minute

Tes explications sont parfaites :)
Normalement c'est tout bon :)
Du coup j'attends la suite
Ne t'inquiète pas, n'hésite pas à me mettre toutes les explications complètes (fait comme tu faisais avant c'est parfait). Si je ne réponds pas c'est que j'ai succombé à l'appel de mon lit.
Bonne soirée d'avance (au cas où)

Bon voici les instructions ^^

Désolé pour le temps de retard, me suis totalement endormie devant mon pc hier x) super <<

Donc tu m'installes tout ça et on regarde ensuite ensemble pour les finitions ^^

Nous allons d'abord nous occuper du html dans un premier temps. La partie concernant les prédéfinis est celle-ci :

Code:


 <!--                       - 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 href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6" target="_blank">                      <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373820-wvvqzp.jpg" alt="predefini" />                                                                </span></a>                          <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373826-25ak93m.jpg" alt="predefini" />                              </span></a> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                                                                                      <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373830-2you89f.jpg" alt="predefini" />                                                                        </span></a>                          <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                                              <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373836-51scc5.jpg" alt="predefini" />                                                                  </span></a>                                                      
 </div>
                                              
 </div>

Comme tu peux le voir, elle est assez courte. Déjà je te conseille de renommer le commentaire :

Code:

<!--                       - BLOC PREDEFINIS -                       -->    

En "Bloc Membres du mois" par exemple afin que ce soit plus clair pour toi. Ce qu'il faudra faire aussi, c'est renommer les class pour que ce ne soit pas le bazar à chercher à chaque fois. Je te laisse renommer les autres commentaires et pour les class, on va voir ça ensemble afin d'avoir la même version.

Ensuite, il y a une chose simple que nous pouvons changer. Le titre. (On peut aussi supprimer un des ronds mais je vais te filer le code tout fait en t'expliquant comment il fonctionne pour t'éviter de faire trop de manips).

Donc pour le titre tu prends ce passage :

Code:


 <p class="titre_predefs">
                                   Prédéfinis                                
 </p>

On remplace le "Prédéfinis" par "Membres du Mois" tout simple.

Une fois que cela est fait, on va un peu modifier notre code. Comme tu peux le voir, il faut rajouter du texte en dessous de chaque rond. Du coup, on va créer une div qui va englober le rond + texte pour chaque élément (c’est-à-dire les 3). Afin de pouvoir les placer et les manipuler plus facilement.

Du coup, on va reprendre tout ceci au propre et casser ce qui a été fait avant.

Cherche cette partie :

Code:


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


Sélectionne cette partie :

Code:

<a href="http://mimbulus-mimbletonia.forumactif.org/t18-famille-potter-3-6" target="_blank">                      <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373820-wvvqzp.jpg" alt="predefini" />                                                                </span></a>                          <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373826-25ak93m.jpg" alt="predefini" />                              </span></a> <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                                                                                      <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373830-2you89f.jpg" alt="predefini" />                                                                        </span></a>                          <a href="http://mimbulus-mimbletonia.forumactif.org/t19-famille-weasley-8-13" target="_blank">                                                              <span class="rond_predef">                                       <img src="http://image.noelshack.com/fichiers/2016/26/1467373836-51scc5.jpg" alt="predefini" />                                                                  </span></a>

Et tu supprimes (attention, laisse bien les deux div en dessous tranquille, ce sont celles qui ferment le bloc des prédefs et le bloc pour la ligne des deux ronds).

J'explique un peu. En gros on refait tout au propre mais de manière plus "bidouillante", c'est comme si tu enlevais les liens a et un bloc de ronds (comme on en veut que 3). Mais je pense que pour toi c'est mieux de tout supprimer et remettre la bonne version (que je vais t'expliquer), afin d'éviter les petits cafouillages.

Une fois que la suppression est faite, tu vas coller ce passage à la place :

Donc en dessous de cela :

Code:

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

Code:


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

J'explique. La class .predefs du dessous englobe la ligne du titre et la ligne des ronds. Sauf que moi je veux que les ronds se placent indépendamment du titre (si je fais une manip css, le titre se déplacera aussi mais comme on veut que celui-ci ne bouge pas, je les "sépare"). Du coup, j'ai créé une class .membres_position qui lui va prendre uniquement la partie des ronds + du texte. Je pourrais ainsi le déplacer comme je le souhaite sans que cela impacte le titre.

A l'intérieur de celui-ci, j'ai créé des fichettes. En gros chaque rond + texte sera englobé dans une div séparée (ça ressemble un peu à des cartes, tu as la carte 1, la carte 2, la carte 3). J'ai appelé cette div .profil_membre et elle se répète pour les trois "cartes".

A l'intérieur de ma carte, j'ai ma class .rond_predef (ça ne change pas car on voulait garder le rond), puis des infos pour contrôler chaque bout de texte car ils n'ont pas les mêmes options. Le texte entier est englobé par la class .profil_membre_texte (pour le placement du texte) et j'ai rajouté .rang_membre pour l'écriture des rangs (Le + actif par exemple) qui est écrit différemment.

Pour chaque carte, c'est la même chose qui se répète.

Une fois que ceci est fait, on va juste changer quelques class pour plus de clarté

.bloc_predefs => .bloc_membres
.predefs => .membres
.titre_predefs => .titre_membres

Attention à l'orthographe, il faudra que ça soit écrit pareil dans le CSS. J'ai déjà changé le rond_membres dans le html tu n'as pas besoin de le faire.

Du coup, on va s'occuper tout de suite de faire le changement dans le CSS, puisque c'est encore frais.

Code:


/* Remplacer par .bloc_membres */
.bloc_predefs{
      width: 250px;
      
      height: 200px;
      display: inline-block;
  }

Code:


/* Remplacer par .membres */
.predefs{
      width: 250px;
      height: 195px;
      text-align: center;
      margin-top: 25px;
  
  }

Code:



/*Remplacer par .rond_membres */

.rond_predef{
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #bdbdbd;
      display: inline-block;
      text-align: center;
      margin: 0px 5px;
            overflow: hidden;
  }


Code:



/* Remplacer par .membres a */

.predefs a {
            text-decoration: none;
          }


Code:


/* Remplacer par .titre_membres */
.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;
          }

Voilà, c'est déjà plus clair ^^

Maintenant on va passer aux modifications. Toutes nos modifications porteront sur l'ensemble du .bloc_membres. On va un peu ruser pour élargir ce bloc pour que tout rentre, sans que le bloc coupe passe à la ligne du dessous. C'est le passage le plus délicat du code puisque le moindre petit pixel ou oubli peut faire plantouiller le truc.

On commence donc par faire des modifs sur la class .membres
On laisse le bloc tranquille parce que, quand on essaie de changer la largeur, il pousse .coupe en dessous (pour une raison d'espace je pense) ce qui est galère. Voici la première ruse. Pour que mon bloc .membres prenne plus de place, on va lui attribuer une position relative (donc on le déplace sans tenir compte du reste, à partir de son point initial). On va lui demander de se pousser et se rapprocher du bloc de la vidéo. De cette manière, on pourra ensuite augmenter sa largeur sans problème.

Voici les modifs (je mets un comme sur les options à modifier) :

Code:


.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 */
 
 }

Code:


.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;
 }

Code:


.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;
          }

Maintenant on va passer aux nouvelles class qui sont créées. Du coup tu peux tout copier/coller pour rajouter car elles ne sont pas encore dans ton css. Je te mets des informations pour que tu comprennes à l'intérieur du CSS.

Code:


.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 */
          
          }

Et voilà une fois que c'est fait on a terminé. Alors comme tu peux le voir parfois les tailles ne sont pas forcément cohérentes. C'est à force de bidouiller que je suis arrivée à ce résultat. Donc je te dirais, c'est peut être pas la solution "optimale" et "propre" qu'on peut attendre d'un code, je suis sûre qu'il y a mieux mais malheureusement je n'ai pas encore trouvé la bonne solution. :)


Du coup, tu installes tout ça et on regarde ensemble si il y a des blocs qui ne se placent pas comme il faut. Comme je te l'ai expliqué, c'est réglé au pixel près chez moi donc à voir comment ça s'interprète chez toi. Mais il ne faut pas que tu t'inquiètes, je corrigerais sur le tas avec l'inspecteur si il y a des choses qui ne se placent pas comme il faut.