[résolu]Code d'une PA en LS qui ne rend pas pareil sur mon forum de test.

Bonjour NU,

J'ai opté pour la PA en LS ici.
Je n'ai quasi rien modifié pour l'instant et pourtant le code semble corrompu. En effet la colonne centrale avec les croix verticales de navigation sont hors cadre.
Je n'ai pas touché à la partie CSS juste HTML.

Voici le lien de mon forum de test : http://forum-test-kallindra.forumactif.org/
et le lien de ce que c'est censé donner : https://i.servimg.com/u/f39/17/14/00/25/pa_hov10.png

Merci d'avance de votre assistance,
Cordialement,

Kallindra

Code:

             
<div id="fond_PA">
                      
 <h1 id="titre_PA">
      Bienvenue sur la symphonie Crépusculaire      
 </h1>
                      
 <h3 id="soustitre_PA">
      Ce forum est inspiré des légendes autours des vampires et autres créatures surnaturelles      
 </h3>
                      
 <div class="cadre_PA staff">
       <span class="titre_cadre titre_staff">STAFF</span>                  
 <div class="bouton_croix">
       <img class="image_staff un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix">
       <img class="image_staff deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix">
       <img class="image_staff trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                      
 </div>
                      
 <div id="contexte_titre">
       <span class="titre_cadre titre_contexte">CONTEXTE</span>                  
 <div class="cadre_PA contexte">
                          
 <p>
       Depuis des siècles et des siècles les vampires - et en particulier l'aristocratie vampirique - était sur le devant de la scène. Mais les choses ont été bouleversées à cause de la remise en cause de cette autorité. La création du Conseil (un groupe de contrôle et de surveillance des surnaturels et des humains), la volonté de certains vampires d'enfreindre les règles de l'anonymat, la progression des groupes humains et de leurs possibilités ont causé de profondes mutations.      
 </p>
                          
 <p>
      Les vampires étaient déjà conscients de l'existence d'autres surnaturels mais ils ne s'en occupaient pas. De même, pour eux, les fils de Caïn hors faction n'existaient pas, ils préféraient occulter le problème. Or il apparaît que d'autres vampires émergent, que des varous existent hors la faction des Loups Noirs et surtout que d'autres surnaturels ont accès au monde des "humains"... Pour suivre leurs aventures, changez leur Destin... venez ajouter vos notes à la partition de cette nouvelle ère !    
 </p>
                        
 </div>
                      
 </div>
                      
 <div class="cadre_PA postes_vacants">
       <span class="titre_cadre titre_pv">POSTES              VACANTS</span>                  
 <div id="pv">
       <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>                  
 </div>
                      
 </div>
                      
 <div id="partenaires_PA">
       <span class="titre_cadre titre_partenaires">TOP              PARTENAIRES</span>                  
 <div class="img_partenaires">
       <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>                  
 </div>
                  <span id="nous_lier"> <a href="#">NOUS LIER</a> // <a href="#">PLUS </a>//              <a href="#">VOUS</a> </span>            
 </div>
                      
 <div class="cadre_PA navigation_PA">
       <span class="titre_cadre titre_navig">NAVIGATION</span>                  
 <div class="bouton_croix_navig">
       <img class="image_navig un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix_navig">
       <img class="image_navig deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix_navig">
       <img class="image_navig trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix_navig">
       <img class="image_navig quatre" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix_navig">
       <img class="image_navig cinq" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                        
 <div class="bouton_croix_navig">
       <img class="image_navig six" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                  
 </div>
                      
 </div>
                <span style="color: #434142; display:block; text-align: center; margin-top: 15px;">(c) Lihuén sur <a href="http://www.never-utopia.com/">Never-Utopia</a></span>        
</div>
        <link href="//fonts.googleapis.com/css?family=Cinzel:400,700,900" rel="stylesheet" type="text/css" />

Up please

up

Hey!

J'ai peut-être trouvé une solution à ton problème mais je ne sais pas si c'est la solution miracle, c'est plus du bidouillage, mais on peut essayer quand même
Pour t'aider, j'aurais besoin du CSS correspondant au code html que tu as posté plus haut


Ryukaï.

Bonjour Ryukaï

Tout d'abord, merci de t'être penché sur ma demande.
Ensuite, voici le CSS. C'est celui du LS. Je n'y-ai fait aucune retouche ^^

Code:

/* PA */
    /* ------------ MISE EN FORME PA ------------ */
    /* ------------ MISE EN FORME PA ------------ */
    #fond_PA {
      height: 515px;
      width: 900px;
      background-color: #100e0f;
    }
    #titre_PA {
      color: #5a0e0f;
      font-family: Cinzel;
      font-size: 48px;
      text-shadow: 0px 0px 15px #4c3436;
      margin-bottom: -25px;
      text-align: center;
    }
    #soustitre_PA {
      color: #434142;
      font-family: Cinzel;
      opacity: 0.5;
      text-align: center;
    }
    .cadre_PA {
      background: rgba(35, 30, 33, 0.5);
      box-shadow: 2px 2px 2px black;
      font-family: Arial;
      font-size: 11px;
      position: relative;
      display: inline-block;
      z-index: 0;
    }
    .titre_cadre {
      color: #5a0e0f;
      font-family: Cinzel;
      font-weight: bold;
      font-size: 30px;
      z-index: 2;
      text-align: left;
      display: inline-block;
      position: absolute;
    }
    /* MISE EN FORME DU CADRE STAFF */
    .staff {
      width: 268px;
      height: 143px;
      float: left;
      margin-left: 10px;
    }
    .titre_staff {
      width: 15px;
      word-wrap: break-word;  
      top: -10px;
      left: -5px;
      line-height: 32px;
    }
    .bouton_croix {
      display: inline-block;
      margin: 150px auto 20px auto;
      overflow: visible;
      width: 31px;
      height: 28px;
    }
    .bouton_croix .image_staff {
      position: absolute;
      width: 200px;
      height: 120px;
      z-index: 1;
      visibility: hidden;
    }
    .bouton_croix .un {
      margin: -140px 0px 0px 0px;
    }
    .bouton_croix .deux {
      margin: -140px 0px 0px -34px;
    }
    .bouton_croix .trois {
      margin: -140px 0px 0px -68px;
    }
    .bouton_croix .quatre {
      margin: -140px 0px 0px -102px;
    }
    .bouton_croix .cinq {
      margin: -140px 0px 0px -136px;
    }
    .bouton_croix:hover .image_staff {
      visibility: visible;
    }
    /* MISE EN FORME DU CONTEXTE */
    .contexte {
      width: 416px;
      height: 160px;
      padding: 5px;
      text-align: justify;
      overflow: auto;
      left: -10px;
      top: 17px;
      font-family: Cinzel;
      color: #b6b4b4;
    }
    .contexte p {
      font-family: Cinzel;
      color: #b6b4b4;
    }
    .titre_contexte {
      width: 416px;
      margin-left: -20px;
    }
    #contexte_titre {
      overflow: visible;
      display: inline-block;
      width: 430px;
      height: 160px;
    }
    /* MISE EN FORME POSTES VACANTS */
    .postes_vacants {
      width: 92px;
      height: 381px;
      float: right;
      margin-right: 30px;
    }
    .titre_pv {
      width: 15px;
      word-wrap: break-word;
      top: -20px;
      right: -5px;
      line-height: 32px;
    }
    #pv {
      margin-top: 30px;
    }
    .img_pv {
      margin: 2px 0px 2px 0px;
    }
    /*MISE EN FORME PARTENAIRES */
    #partenaires_PA {
      position: relative;
      display: inline-block;
      margin: 80px 0px 0px 20px;
      width: 300px;
      height: 150px;
      float: left;
    }
    .titre_partenaires {
      width: 320px;
      left: 5px;
      top: -30px;
    }
    .img_partenaires {
      margin-top: 10px;
    }
    .img_partenaires img {
      margin: 1px 1px 0px 0px;
    }
    #nous_lier {
      color: #5a0e0f;
      text-align: center;
      font-size: 13px;
      display: block;
      padding: 10px;
    }
    #nous_lier a {
      text-decoration: none;
      color: #5a0e0f;
      font-family: Cinzel;
      font-weight: bold;
    }
    /* MISE EN FORME NAVIGATION */
    .navigation_PA {
      width: 326px;
      height: 191px;
      margin-top: 42px;
    }
    .titre_navig {
      right: -20px;
      top: -15px;
    }
    .bouton_croix_navig {
      margin: 3px 0px 3px -370px;
      display: block;
      width: 31px;
      height: 28px;
    }
    .image_navig {
      width: 326px;
      height: 191px;
      display: inline-block;
      position: absolute;
      visibility: hidden;
    }
    .bouton_croix_navig .un {
      margin: -2px 0px 0px 38px;
    }
    .bouton_croix_navig .deux {
      margin: -33px 0px 0px 38px;
    }
    .bouton_croix_navig .trois {
      margin: -64px 0px 0px 38px;
    }
    .bouton_croix_navig .quatre {
      margin: -95px 0px 0px 38px;
    }
    .bouton_croix_navig .cinq {
      margin: -126px 0px 0px 38px;
    }
    .bouton_croix_navig .six {
      margin: -157px 0px 0px 38px;
    }
    .bouton_croix_navig:hover .image_navig {
      visibility: visible;
    }


Bonne soirée,

Kallindra


Je remet le code HTML comme ça y-a tout dans un seul post :)

Code:

            <div id="fond_PA">
                                                   
 <h1 id="titre_PA">
                    Bienvenue sur la Symphonie Crépusculaire                   
 </h1>
                                                   
 <h3 id="soustitre_PA">
                    Ce forum est inspiré des légendes autours des vampires et autres créatures surnaturelles                   
 </h3>
                                                   
 <div class="cadre_PA staff">
                      <span class="titre_cadre titre_staff">STAFF</span>                               
 <div class="bouton_croix">
                      <img class="image_staff un" src="http://data.photofunky.net/output/image/c/8/b/7/c8b767/photofunky.gif" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix">
                      <img class="image_staff deux" src="http://67.media.tumblr.com/4f108fa75503aed0afd542092766a3fe/tumblr_n6ibn07brv1sl6w0so5_250.gif" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix">
                      <img class="image_staff trois" src="http://67.media.tumblr.com/tumblr_m5ak8pOMks1ql9rca.gif" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                   
 </div>
                                                   
 <div id="contexte_titre">
                      <span class="titre_cadre titre_contexte">CONTEXTE</span>                               
 <div class="cadre_PA contexte">
                                                       
 <p>
                      Depuis des siècles et des siècles les vampires - et en particulier l'aristocratie vampirique - était sur le devant de la scène. Mais les choses ont été bouleversées à cause de la remise en cause de cette autorité. La création du Conseil (un groupe de contrôle et de surveillance des surnaturels et des humains), la volonté de certains vampires d'enfreindre les règles de l'anonymat, la progression des groupes humains et de leurs possibilités ont causé de profondes mutations.                   
 </p>
                                                       
 <p>
                    Les vampires étaient déjà conscients de l'existence d'autres surnaturels mais ils ne s'en occupaient pas. De même, pour eux, les fils de Caïn hors faction n'existaient pas, ils préféraient occulter le problème. Or il apparaît que d'autres vampires émergent, que des varous existent hors la faction des Loups Noirs et surtout que d'autres surnaturels ont accès au monde des "humains"... Pour suivre leurs aventures, changez leur Destin... venez ajouter vos notes à la partition de cette nouvelle ère !                   
 </p>
                                                     
 </div>
                                                   
 </div>
                                                   
 <div class="cadre_PA postes_vacants">
                      <span class="titre_cadre titre_pv">POSTES              VACANTS</span>                               
 <div id="pv">
                      <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>              <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png" /></a>                               
 </div>
                                                   
 </div>
                                                   
 <div id="partenaires_PA">
                      <span class="titre_cadre titre_partenaires">TOP              PARTENAIRES</span>                               
 <div class="img_partenaires">
                      <a href="http://totemique.forumactif.org">  <img src="http://www.imabox.fr/15/09/251133pcQz4828.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>              <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png" /></a>                               
 </div>
                                <span id="nous_lier"> <a href="#">NOUS LIER</a> // <a href="#">PLUS </a>//              <a href="#">VOUS</a> </span>                         
 </div>
                                                   
 <div class="cadre_PA navigation_PA">
                      <span class="titre_cadre titre_navig">NAVIGATION</span>                               
 <div class="bouton_croix_navig">
                      <img class="image_navig un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix_navig">
                      <img class="image_navig deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix_navig">
                      <img class="image_navig trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix_navig">
                      <img class="image_navig quatre" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix_navig">
                      <img class="image_navig cinq" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                     
 <div class="bouton_croix_navig">
                      <img class="image_navig six" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg" />              <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg" /></a>                               
 </div>
                                                   
 </div>
                              <span style="color: #434142; display:block; text-align: center; margin-top: 15px;">(c) Lihuén sur <a href="http://www.never-utopia.com/">Never-Utopia</a></span>       
</div>
        <link href="//fonts.googleapis.com/css?family=Cinzel:400,700,900" rel="stylesheet" type="text/css" />

Pour information,je suis absente du 14 au 21 aout inclus donc ne vous inquiétez si je ne répond pas durant cette période :)

Je suis de retour donc je UP ^^

Petit up

no one ?

Je crois que ton problème vient de ton titre qui est trop long. (:
Enfin, je n'ai pas encore regarder ton code, mais test ça et tu verras. (Tu peux aussi tenter de réduire la taille du texte)

Hello Yukiji,

D'abord, merci de te pencher sur la question.
Ensuite, j'ai supprimé "Bienvenue sur" pour voir, toujours pareil puis réduit la police de 48 à 30 et pas d'amélioration non plus. Je laisse en l'état pour que tu puisses juger

Bonne soirée,

Kallindra

Re-bonjour,
déjà j'ai été moi-même tester sur mon propre forum test et il n'y a aucun problème .. Pourtant, j'arrive moi-même à apercevoir les bugs quand je clique sur ton forum test... Je pense que c'est (comme je me doutais) un problème venant des modifications de FA. Ils ont tendance à ajouter des espaces ce qui vient souvent faire buger le code.

Il y a deux solutions:
Tenter de recopier une nouvelle fois l'HTML de ton LS.
Ou de passer par une feuille HTML.

OK.
Merci à toi d'avoir essayé. ^^
Je vais essayer de trouver une autre PA parce que même en remettant le code vierge ça fait pareil et je ne saurais pas créer une page html. Je suis nulle en codage ^^

Tu es sûre ?
Je m'aurais fait un plaisir de t'expliquer comment passer par une feuille HTML et ce n'est pas si compliqué (: