Problème d'affichage page d'accueil forum codes CSS et HTML

Bonjour à tous,

Je viens tout récemment de créer le forum suivant : https://marveldimensions.forumactif.com/ avec un ami.

C'est moi qui m'occupe du codage et j'ai tenté de faire une page d'accueil. Pour le moment, cela donne quelque chose d'intéressant vu que je suis débutante ^^ (on ne s'improvise pas codeur du jour au lendemain)

Le seul problème que je rencontre c'est que les blocs ne s'affichent pas correctement (je n'ai pas le fond blanc ni la barre de défilement sur le bloc news). Les écritures s'affichent en vrac sur la PA.

Pour vous donner un aperçu du rendu, voici le résultat actuel qui s'affiche :

Spoiler:

Voici ce que j'aimerais obtenir (schéma de disposition des blocs) : les blocs doivent avoir un fond blanc transparent et l'image en background ne devra pas changer et rester violette telle qu'actuellement disposée sur le forum :

Spoiler:

Et voici mes codes :

- Le code HTML utilisé (onglet généralités de la page d'accueil panneau d'administration forumactif) :

Code:

<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,500&display=swap" rel="stylesheet" />       
<div class="titlePA">
                 Bienvenue sur Marvel Dimensions           
</div>
   
<div class="fondPA">
                              
   <div class="menuPA">
                                       
      <div rel="nofollow" target="_blank" href="lien règlement Marvel Dimensions" <a="" class="blocliensPA">
                             Règlement• <a rel="nofollow" target="_blank" href="lien contexte Marvel Dimensions" class="lienspa">Contexte et Chronologie</a>• <a rel="nofollow" target="_blank" href="lien groupe Marvel Dimensions" class="lienspa">Groupes</a>• <a rel="nofollow" target="_blank" href="lien prédéfinis Marvel Dimensions" class="lienspa">Prédéfinis</a>               
      </div>
                                   
   </div>
                              
   <div class="blocinfos">
                      Forum déconseillé aux -16 ans • Avatars 200*320 pixels • 1 RP/mois demandé • 100 mots/RP <br />             
   </div>
                            
   <div clas="bloccontPA">
                      Contexte du forum         
   </div>
                            
   <div class="blocstaffPA">
                                     
      <div class="staff-PA">
                         <img src="lien de l'image Jarvis" />                 
         <div>
                                <strong>Jarvis</strong><br /><em>Compte Admin</em><br /><a target="_blank" href="lien message privé Jarvis">MP</a><br />               
         </div>
                                      
      </div>
                                 
      <div class="staff-PA">
                         <img src="lien de l'image Magnéto" />               
         <div>
                              <strong>Erik Lehnsherr</strong><br /><em>Co-fondateur</em><br /><em>Dc : Ryu Tatsumoto</em>               
         </div>
                                      
      </div>
                             
   </div>
                        
   <div class="blocinfosrecrue">
                                 
      <div class="recruePA">
                         Dernière recrue<br /><a href="lien de la fiche de la dernière recrue" target="_blank"></a>               
         <div class="img" personnage");"="" présentation="" fiche="" la="" de="" haut="" en="" gif="" du="" lien="" style="background-image: url(">
                                               
         </div><a href="lien de la fiche de la dernière recrue" target="_blank"></a>             
      </div>
                             
   </div>
                      
   <div class="bloctopsite">
                  Top sites<br />         
   </div>
                      
   <div class="blocpredefinis">
                           
   </div>
                      
   <div class="blocmeteo">
                  En jeu, nous sommes <br />le 01.01.2022 <br />Il fait : 12°C <br /><img src="image png soleil et nuages" />         
   </div>
                    
   <div class="bloccalendrier">
                         
   </div>
                    
   <div class="blocnews">
                         
   </div>
        
</div>

- Code CSS utilisé :

Code:

.titlePA { width: auto;
  height: 40px;
  position: relative;
  background: #FFFFF;
  background-image: url("https://64.media.tumblr.com/69fc0c791e9eee0a1aee0282a52a63c9/e426514bc62bf2e1-87/s1280x1920/17048a02762f0a02efece79bc82f45e4ae5841e5.jpg");
  background-size: cover;
  color: #FFFFF;
  font-size: 36px;
  text-align: center;
  letter-spacing: 5px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-family: 'Bebas Neue';
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  }

.fondPA { width: auto;
  height: 510px;
  background-image: url("https://64.media.tumblr.com/b83fbb570335f75ef20acdb54e125fe8/16d0733d742e2d66-89/s1280x1920/404c10f35491ddad1b6097b7aae25c63ff8e4c75.jpg");
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  position: relative;
  font-family: calibri;
  font-size: 11px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  }

.menuPA { width: auto;
  height: 25px;
  color: #FFFFF;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1px;
  padding-top: 5px;
  font-family: 'Bebas Neue';
  text-transform: upper-case;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 2px;
  }

.blocinfos { width: auto;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 2px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  text-align: center;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  font-size: 14px;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 3px;
  padding-left: 0px;
  font-family: 'Bebas Neue';
  text-transform: uppercase;
  }

.bloccontPA { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 2px;
  position: absolute;
  top: 60px;
  left: 10px;
  text-align: justify;
  overflow-x: auto;
  overflow-y: auto;
  font-family: 'Bebas Neue';
  font-weight: 100px;
  font-size: 13px;
  }

.blocstaffPA { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 172px;
  left: 10px;
  }

.blocinfosrecrue { width: 160px;
  text-align: justify;
  position: absolute;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  top: 60px;
  left: 330px;
  overflow-x: auto;
  overflow-y: auto;
  }

.bloctopsite { width: 160px;
  height: 120px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  font-size: 18px;
  text-align: center;
  position: absolute;
  top: 195px;
  left: 330px;
  letter-spacing: 1px;
  font-family: 'Bebas Neue';
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2em;
    }

.blocpredefinis { width: 275px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 60px;
  left: 510px;
  z-index: 1px
    }

.blocmeteo { width: 133px;
  height: 105px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  font-size: 16px;
  text-align: center;
  font-family: 'Bebas Neue';
  font-weight: 100;
  top: 250px;
  left: 510px;
  overflow-x: auto;
  overflow-y: auto;
  }

.bloccalendrier { width: 130px;
  height: 114px;
  position: absolute;
  top: 250px;
  left: 664px;
  text-align: center;
  overflow-x: auto;
  overflow-y: auto;
  background-image: url(image à insérer);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  }

- Autres informations :

Navigateur utilisé : Firefox
Version forum utilisée : PHPBB3

Merci d'avance à toutes les personnes qui pourront m'aider à résoudre ce fameux mystère des blocs disparus

Bonjour !

Puisque je suis dans les parages, je pense que je peux tenter de te répondre :3

Alors déjà pour les "blocs disparus", si j'en crois le code source que je peux voir sur ton forum, ils sont bien présents, mais il n'y a aucun sélecteur .blocnews dans ton code CSS, ce qui doit sans doute contribuer à tes soucis.

Quant au fond des différents blocs, un petit background-color:rgba(255,255,255,0.75) serait sans doute un bon départ pour commencer.

Sinon, je me permets de te suggérer d'éviter d'utiliser le positionnement absolu et relatif pour agencer tes blocs, c'est assez traitre comme méthode parce que ça nécessite de tout calculer au pixel près et il suffit de vouloir faire un simple ajustement pour que tout parte en vrille.

Ça prendra du temps, mais je t'invite très vivement à explorer la question de flexbox en CSS, qui pourrait t'aider à avoir de meilleurs résultats (Les grid CSS seraient encore mieux, mais c'est pas simple à appréhender).

Compte tenu de ton schéma, une solution d'agencement avec flexbox pourrait être ceci :

Code:

    .conteneurPA {
        width:1200px; margin:auto;
        background: url(https://64.media.tumblr.com/b83fbb570335f75ef20acdb54e125fe8/16d0733d742e2d66-89/s1280x1920/404c10f35491ddad1b6097b7aae25c63ff8e4c75.jpg) center center no-repeat;
        background-size:cover;
        height:510px;
        color:#fff;
    }
    .headerPA {

    }
    .navPA {

    }
    .contenuPA {
        /* avec display:flex; les blocs enfants seront côte à côte, donc dans ce code ce seront les blocs qui ont les classes .PA-colonne1, .PA-colonne2 et .PA-colonne3 */
        display:flex;
        /* avec un petit espacement entre les blocs */
        gap:10px;
        /* et on s'assure que le tout prenne bien la largeur disponible */
        width:100%;
    }
   
    .PA-colonne1, .PA-colonne2, .PA-colonne3 {
        /* chaque colonne prend un tiers de la largeur disponible, pour l'exemple */
        flex:1;
        /* avec display:flex; les blocs enfants seront côte à côte... */
        display:flex;
        /* ...avec un petit espacement entre les blocs... */
        gap:10px;
        /* ...mais on s'arrange pour qu'ils soient l'un au dessous de l'autre */
        flex-direction:column;
    }

    /* Bon les pseudo-éléments :is() et :not() sont un peu techniques mais grosso modo on cible tous les éléments div qui sont directement enfants de .PA-colonne1, .Pa-colonne2 et .Pa-colonne3, à l'exception de celui qui a la classe blocMeteoCalendrier */
    :is(.PA-colonne1, .PA-colonne2, .PA-colonne3) > div:not(.blocMeteoCalendrier),
    /* et pour le cas du blocMeteoCalendrier, c'est sur ses enfants à lui qu'on veut appliquer cet effet */
    .PA-colonne3 .blocMeteoCalendrier > div {
        /* on s'arrange pour que tous ces blocs aient un fond blanc transparent */
        background:rgba(255, 255, 255, 0.75);
        /* et d'autres ajustements si nécessaire : */
        padding:10px;
        flex:1;
    }

    /* Le cas particulier du bloc météo + calendrier */
    .PA-colonne3 .blocMeteoCalendrier {
        /* display:flex pour que les blocs enfants soient côte à côte */
        display:flex;
        /* avec un petit espacement qui va bien */
        gap:10px;
    }

    /* pour la suite il n'y a plus qu'à appliquer des propriétés spécifiques à chaque bloc si nécessaire */
    .blocContexte {}
    .blocStaff {}
    .blocVide1 {}
    /* etc ... */


Code:

<div class="conteneurPA">
    <div class="headerPA"> (le titre ici) </div>
    <div class="navPA"> (la navigation) </div>
    <div class="contenuPA">
        <div class="PA-colonne1">
            <div class="blocContexte">le contexte</div>
            <div class="blocStaff">le staff</div>
            <div class="blocVide1">un bloc vide</div>
        </div>
        <div class="PA-colonne2">
            <div class="blocRecrue">les recrues</div>
            <div class="blocTops">les tops</div>
            <div class="blocVide2">un bloc vide</div>
        </div>
        <div class="PA-colonne3">
            <div class="blocPredefs">les prédefs</div>
            <div class="blocMeteoCalendrier">
                <div class="blocMeteo">la météo</div>
                <div class="blocCalendrier">calendrier</div>
            </div>
            <div class="blocNews">les news</div>
        </div>
    </div>
</div>

Bon, c'est juste un truc fait vite fait (et c'est moins cool que du grid XD), je ne peux que te conseiller de t'entrainer, c'est pas simple mais à la fin t'as quelque chose de beaucoup plus simple à manipuler que du positionnement absolu.

Sur ce, je redisparais dans les limbes !

Super, merci beaucoup pour ta réponse ! Je me penche sur le code de mon forum et je te dis si ça marche

Désolé pour le double post, mais je galère pas mal, j'ai l'impression de tourner autour de la solution mais malgré tout, les blocs ne s'affichent toujours pas. J'ai beau retourner le problème dans tous les sens, je vois vraiment pas la solution, malgré tes explications relativement claires. ça doit être moi qui écrit mal quelque chose dans le code.

Voici le code HTML que j'ai mis :

Code:

<div class="conteneurPA">
                    
   <div class="headerPA">
            Bienvenue sur Marvel Dimensions     
   </div>
                    
   <div class="navPA">
                 
      <div rel="nofollow" target="_blank" href="lien règlement Marvel Dimensions" <a="" class="blocliensPA">
             Règlement• <a rel="nofollow" target="_blank" href="lien contexte Marvel Dimensions" class="lienspa">Contexte et Chronologie</a>• <a rel="nofollow" target="_blank" href="lien groupe Marvel Dimensions" class="lienspa">Groupes</a>• <a rel="nofollow" target="_blank" href="lien prédéfinis Marvel Dimensions" class="lienspa">Prédéfinis</a>                     
      </div>
               
   </div>
        
   <div class="blocinfos">
                            Forum déconseillé aux -16 ans • Avatars 200*320 pixels • 1 RP/mois demandé • 100 mots/RP <br />                 
   </div>
                    
   <div class="contenuPA">
                           
      <div class="PA-colonne1">
                                  
         <div class="blocContexte">
                  Contexte 
            <div align="left">
                
               <p>
                    Blablabla 
               </p>
                
            </div>
               
         </div>
                                  
         <div class="blocStaff">
                  Le staff     
            <div align="left">
                
               <p>
                    Blablabla 
               </p>
                
            </div>
               
         </div>
                                  
         <div class="blocVide1">
                  Bloc vide 
            <div align="left">
                
               <p>
                    Blablabla 
               </p>
                
            </div>
                 
         </div>
                              
      </div>
                           
      <div class="PA-colonne2">
                                  
         <div class="blocRecrue">
                  Dernière recrue     
            <div align="left">
               
               <p>
                   Blablabla
               </p>
               
            </div>
            
         </div>
                                  
         <div class="blocTops">
                  Top Sites
            <div align="left">
               
               <p>
                   Blablabla
               </p>
                  
            </div>
               
         </div>
                                  
         <div class="blocVide2">
                  Bloc vide     
            <div align="left">
               <p>
                   Blablabla
               </p>
            </div>
               
         </div>
                              
      </div>
                           
      <div class="PA-colonne3">
                                  
         <div class="blocPredefs">
                  les prédefs     
         </div>
                                  
         <div class="blocMeteoCalendrier">
                                         
            <div class="blocMeteo">
                     Météo     
               <div align="left">
                  <p>
                     Blablabla
                  </p>
               </div>
               
            </div>
                                         
            <div class="blocCalendrier">
                     Calendrier     
               <div align="left">
                  <p>
                     Blablabla
                  </p>
               </div>
               
            </div>
                                     
         </div>
                                  
         <div class="blocNews">
                  Latest News 
            <div align="left">
               <p>
                  Blablabla
               </p>
                
            </div>
             
         </div>
                              
      </div>
                       
   </div>
</div>

Et voici le code CSS : le problème vient sans doute de la partie .PA-colonne1, .PA-colonne2 et .PA-colonne 3 que j'ai pas trop vraiment su agencer, de même la partie calendrier/météo et la partie is où j'ai essayé d'interpréter le truc mais bon

Code:

.conteneurPA {
  width:1000px; margin:auto;
  background: url(https://64.media.tumblr.com/b83fbb570335f75ef20acdb54e125fe8/16d0733d742e2d66-89/s1280x1920/404c10f35491ddad1b6097b7aae25c63ff8e4c75.jpg) center center no-repeat;
  background-size:cover;
  height:510px;
  color:#fff;
    }

.headerPA { width: auto;
  height: 40px;
  position: relative;
  background: #FFFFF;
  background-image: url("https://64.media.tumblr.com/69fc0c791e9eee0a1aee0282a52a63c9/e426514bc62bf2e1-87/s1280x1920/17048a02762f0a02efece79bc82f45e4ae5841e5.jpg");
  background-size: cover;
  color: #FFFFF;
  font-size: 36px;
  text-align: center;
  letter-spacing: 5px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-family: 'Bebas Neue';
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  }

.fondPA { width: auto;
  height: 510px;
  background-image: url("https://64.media.tumblr.com/b83fbb570335f75ef20acdb54e125fe8/16d0733d742e2d66-89/s1280x1920/404c10f35491ddad1b6097b7aae25c63ff8e4c75.jpg");
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  position: relative;
  font-family: calibri;
  font-size: 11px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  }

.navPA { width: auto;
  height: 25px;
  color: #FFFFF;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1px;
  padding-top: 5px;
  font-family: 'Bebas Neue';
  text-transform: upper-case;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 2px;
  }

.blocinfos { width: auto;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 2px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  text-align: center;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  font-size: 14px;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 3px;
  padding-left: 0px;
  font-family: 'Bebas Neue';
  text-transform: uppercase;
  }

.contenuPA { display:flex;
  gap:10px;
  width:100%;
  }

.PA-colonne1, .PA-colonne2, .PA-colonne3 { flex: 1;
  display: flex;
  gap:10px;
  flex-direction:column;
  background:rgba(255, 255, 255, 0.75);
  }

 :is(.blocContexte, .blocStaff, .blocVide1, .blocRecrue, .blocTops, .blocVide2, .blocPredefs, .blocNews) > div:not(.blocMeteoCalendrier)

.PA-colonne3 .blocMeteoCalendrier > div {
  background:rgba(255, 255, 255, 0.75);
  padding:10px;
        flex:1;
    }

.PA-colonne3 .blocMeteoCalendrier { display:flex;
  gap:10px;
  }

.blocContexte { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 2px;
  position: absolute;
  top: 60px;
  left: 10px;
  text-align: justify;
  overflow-x: auto;
  overflow-y: auto;
  font-family: 'Bebas Neue';
  font-weight: 100px;
  font-size: 13px;
  }

.blocStaff { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 172px;
  left: 10px;
  }

.blocVide1 { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 172px;
  left: 10px;
  }

.blocRecrue { width: 160px;
  text-align: justify;
  position: absolute;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  top: 60px;
  left: 330px;
  overflow-x: auto;
  overflow-y: auto;
  }

.blocTops { width: 160px;
  height: 120px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  font-size: 18px;
  text-align: center;
  position: absolute;
  top: 195px;
  left: 330px;
  letter-spacing: 1px;
  font-family: 'Bebas Neue';
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2em;
    }

.blocVide2 { width: 160px;
  height: 120px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  font-size: 18px;
  text-align: center;
  position: absolute;
  top: 195px;
  left: 330px;
  letter-spacing: 1px;
  font-family: 'Bebas Neue';
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2em;
    }

.blocPredefs { width: 275px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 60px;
  left: 510px;
  z-index: 1px
    }

.blocMeteo { width: 133px;
  height: 105px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  font-size: 16px;
  text-align: center;
  font-family: 'Bebas Neue';
  font-weight: 100;
  top: 250px;
  left: 510px;
  overflow-x: auto;
  overflow-y: auto;
  }

.blocCalendrier { width: 130px;
  height: 114px;
  position: absolute;
  top: 250px;
  left: 664px;
  text-align: center;
  overflow-x: auto;
  overflow-y: auto;
  background-image: url(image à insérer);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  }

.blocNews {
  width: 275px;
  height: 113px;
  padding: 5px;
  font-size: 10.5px;
  text-align: justify;
  position: absolute;
  top: 375px;
  left: 510px;
  overflow: auto;
  font-family: 'Oswald';
  font-size: 12px;
  font-weight: 100;
  line-height: 1.3em;
}

Ben... je t'ai conseillé de retirer le positionnement absolu et relatif et tu les as conservés, du coup tes blocs sont en balade ailleurs sur ta page et l'affichage avec flexbox ne fonctionne pas (parce qu'ils sont retirés du flux).

C'est pour ça que je t'ai dit de prendre ton temps pour t'entrainer, notamment c'est important de te renseigner sur le fonctionnement de flexbox, c'est pas non plus super simple pour un débutant. J'ai juste donné un code de démonstration pour te donner quelques pistes mais je n'ai pas la motivation de faire beaucoup plus malheureusement.

Pour en savoir plus sur Flexbox :
A complete Guide to Flexbox - CSSTricks (en anglais)
Les concepts de base de Flexbox - MDN
Flexbox Froggy - un petit jeu qui t'apprend les bases de Flexbox

ça marche, merci en tout cas pour ton aide et les liens que tu viens de me donner.

Effectivement, en remplaçant le "relative" ou "absolute" par "static" ça rend déjà plus propre. Maintenant il me reste surtout à pouvoir séparer les blocs car pour le moment les 3 colonnes s'affichent séparément mais les blocs sont tous confondus ^^