Souci d'affichage de la PA (modernbb)

[Argimpasa]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 17/03/2024
Lien du forum : https://mydearjane.forumactif.com/

Description du problème

Bonjour,

Je refais mon forum avec normalement un thème préfait car mes membres se plaignaient de beaucoup de bug (j'ai tenté de coder par moi même et je n'aurai pas dû je crois). Sauf que j'ai encore un souci et je m'excuse.
Comme vous le voyez, la PA ne s'affiche pas correctement alors qu'il devrait ressembler à ça : https://zupimages.net/up/24/11/5k92.png
Je sais que je dois sûrement changer les grid pour avoir une largeur de 900 px mais je ne sais pas comment faire.
Les Codes CSS :

Code:

.whisper-regular {
  font-family: "Whisper", cursive;
  font-weight: 400;
  font-style: normal;
}
/* COULEURS LIENS TAGS */
    .mentiontag {
    background-color: #a8967e;
    color: white;
  ...
    }

.infos-profil img {
  max-width: 100%;
}
.headerbar { background : none; height:488px; }
#headerbar-top { height:auto; }

#logo img {
  max-width: 100%;
  margin-top: 72px;
}
/* CATEGORIES */
.cat_title > h2{ /* titre des catégories */
  margin-bottom:-15px;
  padding-right:30px;
  text-align:right;
  font-family:'Cookie', serif;
  font-size:37px;
  color:#6c3651;
  text-shadow:1px 1px 0px #fff;
}
.main_cat ::-webkit-scrollbar{
  margin-left:5px;
  width:5px;
  height:5px;
  background:#f1f1f1;
}
.main_cat ::-webkit-scrollbar-thumb:vertical,
.main_cat ::-webkit-scrollbar-thumb:horizontal{
  height:30px;
  background-color:#6c3651;
}
.main_cat{ /* bloc des categories */
  width:868px;
  margin:0 0 20px;
  padding:30px;
  background-color:#e7e7e7;
  border-top:8px solid #5a2c43;
  box-shadow:0 0 7px rgba(43, 43, 43, 0.11);
  font-family:'Spectral', serif;
  font-size:12px;
  color:#000c24;
}
.main_cat a{ /* liens des catégories */
  color:#6c3651;
}
.cat_display{ /* bloc des forums */
  display:flex;
  justify-content:space-between;
  margin-bottom:30px;
  padding:11px;
  background-color:#e3e3e3;
  background-size:70%;
  background-repeat:no-repeat;
  background-position:right top;
  box-shadow:0 0 7px rgba(43, 43, 43, 0.09);
}
.cat_display:last-of-type{
  margin-bottom:0;
}
.cat_left{ /* bloc du titre du forum et derniers messages */
  width:255px;
  height:93px;
  padding:11px 0;
  overflow:auto;
  text-align:center;
}
.cat_forumtitle{ /* titre des forums */
  margin-bottom:7px;
  font-family:'Cinzel', serif;
  font-size:18px;
  font-weight:bold;
}
.cat_topictitle{ /* titre du dernier sujet */
  font-weight:bold;
}
.cat_subforums{ /* bloc des sous forums */
  width:140px;
  height:93px;
  padding:10px;
  background-color:rgba(230, 230, 230, 0.81);
  box-shadow:0px 0px 5px rgba(23, 23, 23, 0.09);
  text-align:center;
  font-family:'Cinzel', serif;
  font-size:0;
  font-weight:bold;
  text-transform:uppercase;
}
.cat_subforums a{ /* liens des sous forums */
  display:block;
  font-size:11px;
}
.cat_description{ /* bloc de description des forums*/
  width:330px;
  height:93px;
  padding:10px;
  background-color:rgba(230, 230, 230, 0.81);
  box-shadow:0px 0px 5px rgba(23, 23, 23, 0.09);
  text-align:justify;
}
.cat_description > div,
.cat_subforums > div{
  height:73px;
  padding-right:5px;
  overflow:auto;
}
.cat_stats{ /* bloc des statistiques des forums */
  width:25px;
  margin:-5px -5px 0 0;
  text-align:center;
  line-height:15px;
}
/*---------- DÉBUT QEEL KAYL SUR EPICODE ----------*/

.conteneur_container_IE {
  background-image: url(https://images2.imgbox.com/e6/3e/gz2lUQgQ_o.png)!important;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
  min-height: 800px!important;
}

#wrap{
  background: none;
}

.background_qeel {/*bloc général*/
    background: rgba(239, 239, 239, 0.81);
    box-shadow:0 0 7px rgba(43, 43, 43, 0.11);
    height: 382px;
    margin: auto;
    width: 868px;
}
.qeel_sides {/*Cadres côtés gauche et droite*/
    width: 241px;
    height: 312px;
    overflow: hidden;
    display: inline-block;
    background: #e3e3e3;
    box-shadow:0 0 7px rgba(43, 43, 43, 0.09);
    margin-left: 20px;
    margin-top: 35px;
}

.qeel_middle {
    display: inline-block;
    margin-left: 23px;
    width: 300px;
    overflow: hidden;
    height: 312px;
}

.qeel_middle > div { /*Cadres du milieu*/
    width: 299px;
    height: 146px;
    background: #e3e3e3;
    box-shadow:0 0 7px rgba(43, 43, 43, 0.09);
}
 
.qeel_middle > div:last-of-type {
    margin-top: 20px;
    text-align: center;
}

.background_qeel h2 {/*Tous les titres*/
    font: 28px Cookie;
    text-align: center;
    padding-top: 5px;
    color: #6c3651;
}
/* PA */

:root {
    --accc1: #000;
    --accc2:#DD9F8C;
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --background: #f1f1f1;
    --degrag: #ccc9c7;
}

/**************** CORPS DE LA PA AVEC GRID *****************/

.pa_1 {          background-color: var(--white);
    border-radius: 10px;
    display: grid;
text-align:center;
    grid-gap: 7px;
    grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
    padding: 10px;}


/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/

/* CONTAINER ACTUALITÉ */
.item_13 {  border: 1px solid var(--border);
    border-radius: 4px;
    grid-area: 1 / 1 / span 3 /span 1;
    padding: 4px 4px 0;
    text-align: justify;}

.texte_4 {      height: 69px;
    line-height: 15px;
    overflow: auto;}

/* PARTIE STAFF ET ONGLETS */

/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}

/*container des onglets*/
.onglets_pa { display: flex;
    flex-direction: column;
    height: 75px;
    position: relative;
    text-align: justify;
    width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}

/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}

/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff {      border-radius: 50px;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    object-fit: cover;}

/*décide de la largeur de la séparation entre les images*/
.lab {    cursor: pointer;
    margin-left: 8px;
}
.lab:hover {
    opacity:0.8;
}

/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu { 
      border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    margin-top: 5px;
    opacity: 0;
    padding: 4px 0;
    position: absolute;
    scrollbar-width: none;
    text-align: center;
    visibility: hidden;
    width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
    height: 36px;
}

.contenu.visible {
  opacity: 1;
  visibility: visible;
}

/*balise déco du prénom, nom*/
h {    color: var(--accc1);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;}

/*balise de la partie admin / profil*/
.sous_titre {    font-size: 9px;
  letter-spacing: 1px;}

/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}

/*container déco de la partie optimisée pour*/
.titre_3 {
        background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 500;
    margin-bottom: 3px;
    padding: 3px 0;
}


/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/


/*CONTEXTE ET HOVER*/

/* corps du contexte (container en gros qui tient tout*/
.gif_pa {    border: 1px solid var(--border);
    border-radius: 7px;
    display: inline-block;
    grid-area: 1 / 2 / span 5 /span 2;
    height: 192px;
    line-height: 110%;
    overflow: auto;
    padding: 3px;
    width: 216px; } /* à modifier si vous modifiez la largeur de la grid */

/*container de l'image du contexte*/
.img_pa {
    width: 100%;
margin: 0 auto;
position: relative;
      overflow: hidden;
  border-radius:7px;
}

/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
    height: 192px;
    object-fit: cover;
    width: 216px; /* même largeur que gif_pa*/
}

/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt {  background-color: var(--white);
    height: 192px;
    left: 108px;
    line-height: 16px;
    overflow: auto;
    padding: 5px;
    position: absolute;
    scrollbar-width: none;
    text-align: justify;
    top: 96px;
    transform: translate(-50%,-50%);
    width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */

/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
    bottom: 0;
    height: 0;
    left: 0;
    overflow: hidden auto;
    position: absolute;
    scrollbar-width:none;
    right: 0;
    transition: .5s ease;
    width: 100%;
}
.img_pa:hover .overflow {
  height: 100%}

/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar  {width:0px;height:0px;}


/*PARTIE NAVIGATION / LIENS*/

.item_1 {    grid-area: 1 / 4 / span 5 /span 1;}

/*liens navigation*/
.link_pa {        background-color: var(--background);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
  text-transform:uppercase;
    margin-bottom: 6px;
    line-height: 10px;
    padding: 1px 0;}

/*container avec les règles*/
.item_5 {      border: 1px solid var(--border);
    border-radius: 4px;
    height: 77px;
    line-height: 15px;
    overflow: auto;
    padding: 5px 7px 3px;
    text-align: justify;
    margin: 8px 0;}



/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/

/*TIMELINE*/

/*container timeline*/
.item_8 {      border: 1px solid var(--border);
    border-radius: 5px;
    grid-area: 1 / 5 / span 2 /span 2;
    height: 57px;
    padding: 2px 5px;
    text-align: justify;}

/*container texte timeline*/
.texte_1 {  height: 43px;
    line-height: 13px;
    overflow: auto;
    text-align: justify;}

/*partie premiere version signée xx*/
.titre_4 {    background-color: var(--background);
    border-radius: 4px;
    color: var(--accc1);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;}


/*PARTIE PÉRIODE DE JEU*/

/*container période de jeu*/
.item_9 {      border-bottom: 1px solid var(--border);
    color: var(--accc1);
    font-size: 11px;
    font-weight: 600;
    grid-area: 3 / 5 / span 1 /span 2;
    letter-spacing: 1px;
    margin-top: -2px;
    text-transform: uppercase;}

/*déco de texte pour rendre rose*/
j {color:var(--accc2);
  font-style: italic;
}


/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/

/*container du tout*/
.item_10 {  grid-area: 4 / 5 / span 2 /span 2;}

/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}

/*container des membres du mois (colonne gauche)*/
.float_pa1 {    float: left;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
    height: 56px;}

/*style des images des membres du mois*/
.mdm1, .mdm2 {
          border: 1px solid var(--border);
    border-radius: 10px;
    height: 30px;
    object-fit: cover;
    padding: 3px;
    width: 21px;
}
.mdm2 {margin:0 5px;}

/*container de la partie nous soutenir*/
.float_pa2 {float: left;
    height: 56px;
    margin-left: 4px;
    line-height: 12px;
    width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}

/*icons discord et tumblr*/
.discord_pa {    width: 21px;}

/*PARTIE PARTENARIATS*/

/*container de la partie partenariats*/
.item_11 {          border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 3px;}

/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
  border-width: 1px;
  border-radius: 5px;
  border: 1px solid var(--border);
  width: 175px;
  letter-spacing: 1px;
  font-size: 8px;
  text-transform: uppercase;}


/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/

.titre_1, .titre_2 {
  border-radius: 4px;
    color: var(--white);
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/

w,y {font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
  text-transform:uppercase;
}

w {  color: var(--accc2);}
y {  color: var(--accc1);}

/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {    grid-area: 6 / 1 / span 1 /span 6;
    font-size: 7px;
    border-top: 1px solid var(--border);
    letter-spacing: 1px;
    padding-top: 5px;
  color: #d1d1d1;}
/*==================================== DÉBUT AFFICHAGE PROFIL BY KAYL ========================= */
.profile_top {
  height: 70px;
  padding-top: 10px;
  margin-top: 100px;
  box-shadow: 0 0 7px rgba(43, 43, 43, 0.34);
}

.profile_top p, .profile_top > div {
  display: inline-block;
  height: 70px;
}
.profile_name span strong{
    font: 20px Cinzel;
    color: #e7e7e7;
    font-weight: bold;
}
.profile_top p:first-of-type {
    font: 12px Spectral;
    color: #e7e7e7;
    margin-left: 240px;
}

.profile_top .profile_rank {
  display: block;
  width: 420px;
}

.profile_top > div:first-of-type{
  margin-left: 70px;
}

/*---------- MSG ET PROFILS : AVATAR ET TEXTE ----------*/

.profile_bloc {
    background: #e3e3e3;
    min-height: 370px;
    box-shadow: 0 0 7px rgba(43, 43, 43, 0.11);
    margin-bottom: 320px;
}

/*Bloc de l'avatar et champs du profil*/
.profile_avatar {
    float: left;
    margin-top: -50px;
    margin-left: 10px;
    height: 320px;
    overflow: hidden;
}

/*Bloc du message*/
.profile_text {
  width: 600px;
  margin-left: 220px;
  padding-top: 3px;
}

.profile_text .topic-title {
  border-bottom: 1px solid #d0d1d2;
  padding-bottom: 5px;
  margin-left: 15px;
  width: 100%;
}

/*Système onglets*/

.profil_title{
  margin: 10px auto 5px;
  text-align: center;
}
.click {
  display:inline-block;
  margin-left:3px;
  margin-right:3px;
  padding:3px;
  cursor:pointer;
}
.click_1 {
  font: 23px Cinzel;
  color: #6c3651;
}
.click_0 {
  font: 23px Cinzel;
  color: #F3F3F3;
}
.contenu_profil {
    background: #e7e7e7;
    margin: auto;
    width: 581px;
    padding: 15px;
    height: 170px;
    display:none;
}

/*Contenu Infos et Détails*/
.profil_champ div{
  display: inline;
}
.profil_champ {
  width: 48%;
  display: inline-block;
  height: 25px;
  font: 12px Spectral;
  color: #000c24;
}
.profil_champ .label {
  text-transform: uppercase;
  font-weight: bold;
}
.profil_champ .field_editable.invisible {
  display: none;
}

.contenu_profil input {
  background: #e7e7e7;
  margin-top: -13px;
  padding: 3px;
  font: 15px Cinzel;
  color: #6c3651;
  box-shadow: 0 0 7px rgba(43, 43, 43, 0.11);
}
.contenu_profil .label span {
  font: 12px Spectral;
  font-weight: bold;
}
.contenu_profil span {
  font: 12px Spectral;
}
.contenu_profil textarea {
    max-width: 200px;
    max-height: 70px;
    min-width: 200px;
    min-height: 70px;
}

/*Dernier bloc*/
.profil_msgsub {
  width: 581px;
  margin: 40px auto 0;
  background: #e7e7e7;
  padding: 5px;
  text-align: center;
  font: 12px Spectral;
  color: #000c24;
}
.profil_msgsub p{
  font: 12px Cinzel;
  color: #6c3651;
}

#tabs {
  line-height: 35px;
  margin-top: 80px;
}

table#memberlist .posts > img {
  width: 185px;
}


/*==================================== FIN AFFICHAGE PROFIL BY KAYL ========================= */
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */

#wrap-topic {
    width: 900px;
    margin: auto;
    display: flex;
    flex-flow: wrap;
}

#header-topic {
    background-color: #f1f0f4;
    width: 100%;
    color: #c07c59;
    font-size: 11px;
    font-style: italic;
    line-height: 27px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-flow: wrap;
    justify-content: center;
}

#header-topic .sousligne {
    font: 11px 'Cookie', serif;
    font-style: italic;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header-topic a:not(:first-of-type) {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: -0.5px;
}

#header-topic a:first-of-type {
    color: #262929;
    font-family: "Whisper", cursive;
    font-size: 23px;
    text-transform: uppercase;
    font-style: normal;
    line-height: 30px;
    width: 100%;
    text-align: center;
}

.new-reply-topic,
.topic-pagination {
    display: flex;
    align-content: center;
    flex-flow: wrap;
}

.topic-pagination,
#pagination_memberlist {
    margin-left: auto;
    text-transform: uppercase;
    font-family: initial;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -1px;
    color: transparent;
}

.topic-pagination>div,
#pagination_memberlist>div {
    margin: 20px 0 5px;
}

.topic-pagination>div a,
#pagination_memberlist>div a {
    color: #c07c59;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -0.5px;
}

.new-reply-topic a {
    padding: 28px 17px 28px 25px;
}

.topic-pagination span strong,
#pagination_memberlist strong {
    padding: 0 0 0 5px;
}

.topic-pagination span,
#pagination_memberlist span {
    color: #262929;
}

.topic-pagination strong,
#pagination_memberlist strong {
    color: #c07c59;
    padding: 0 2px;
}

.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
    display: none;
}

.header-message {
    width: 100%;
    height: 86px;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    align-content: center;
    position: relative;
    padding: 0 50px 0 0;
    color: #f6f5f8;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
    background-color: #262929;
}

.header-message div {
    position: absolute;
    left: 35px;
    bottom: 22px;
}

.header-message span,
.header-message a[href*="/u"] {
    width: 100%;
    text-align: right;
}

.header-message span {
    font: 20px 'DM Serif Display', serif;
    font-style: normal;
    margin-right: -20px;
}

.header-message span,
.header-message>a {
    width: 100%;
}

.header-message strong {
    color: #f6f5f8;
    font-weight: 100;
}

.header-message>div img {
    padding: 0 2px;
}

.wrap-topic-content {
    background-color: #F1F0F4;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    padding: 19px 0;
}

.topic-content {
    width: 538px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: flex-start;
    padding-top: 6px;
}

.topic-content,
.topic-content>a {
    color: #C3C3C3;
    font: 10px 'Roboto', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

.topic-content>div a {
    font-weight: bold !important;
}

.topic-content>div {
    color: #262929;
    font-style: normal;
    text-align: justify;
    font-weight: normal;
    font-size: 12px;
    border-top: 1px solid #C3C3C3;
    padding: 18px 0;
    margin-top: 8px;
    width: 100%;
}

.topic-content>div img {
    max-width: 100%;
}

.topic-avatar {
    border: 2px solid #F6F5F8;
    overflow: hidden;
    width: 200px;
    height: 320px;
    position: relative;
}

.topic-avatar>div img {
    max-width: 100%;
}

.topic-avatar>a img {
    width: 196px;
}

.topic-avatar>div {
    position: absolute;
    top: 396px;
    background-color: #ffffffe0;
    width: 200px;
    height: 400px;
    transition: all 1s;
    padding: 5px 20px 10px;
    font: 11px 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.topic-avatar:hover>div {
    top: 0;
}

.feuille-de-perso a[href*="/u"],
.title-profil {
    font: 30px "Whisper", cursive;
    color: #c07c59;
    text-align: right;
    display: block;
    height: 32px;
    text-transform: lowercase;
  white-space: nowrap;
}

.topic-avatar .label {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
    color: #262929
}

.topic-avatar>div .label span,
.feuille-de-perso {
    color: #262929 !important;
}

.feuille-de-perso textarea {
    min-width: 100%;
    max-width: 100%;
    display: block;
    height: 50px;
    background-color: #F6F5F8;
    padding: 6px;
    overflow: auto;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 12px;
}

/*.feuille-de-perso br { display: none; }*/

.topic-avatar .contact_link_p {
    position: sticky;
    bottom: 5px;
    margin: 10px -10px 0 0;
    font-size: 0;
    text-align: right;
}

.topic-avatar .contact_link_p a:first-child {
    padding-right: 7px;
}

.separation {
    width: 555px;
    margin: auto;
    height: 1px;
    background-color: #C3C3C3;
    margin: 15px 0 2px;
}

.signature-topic {
    width: 100%;
    max-height: 280px;
    padding: 5px;
    overflow: auto;
}

.signature-topic img {
    max-width: 100%;
}

#wrap-topic a[name="quickreply"]+.h3 {
    display: none;
}

#wrap-topic form#quick_reply {
    width: 100%;
}

#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
    background-color: #F1F0F4 !important;
    width: 100% !important;
    font-family: 'Roboto', sans-serif;
}

#wrap-topic #quick_reply #textarea_content {
    box-shadow: none;
}

#wrap-topic #quick_reply #textarea_content+div input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 15px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0px 10px 10px 10px;
    height: 35px;
    padding: 0 15px;
}

#topic-form label {
    font-size: 0;
}

#topic-form select {
    background-color: #F1F0F4;
    border: none;
    font-size: 10px;
    padding: 3px 5px;
}

#topic-form fieldset {
    margin: 55px 0 28px;
}

#topic-form input {
    background-color: #ECEBF0;
    box-shadow: none;
    border-radius: 0;
    font: 12px 'DM Serif Display', serif;
    color: #c07c59;
    text-transform: uppercase;
    margin: 0 5px;
    height: 21px;
    padding: 0 5px;
}

/* Affichage du bloc des permissions */
.permissions {
    width: 100%;
    background-color: #F1F0F4;
    padding: 20px 25px;
    font: 11px 'Roboto', sans-serif;
}

.permissions a {
    color: #c07c59;
}

.permissions .h3 {
    border: none;
    font: 13px 'DM Serif Display', serif;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
    margin: 0 0 20px;
    background: none;
    font: 12px 'Roboto', sans-serif;
    padding: 0;
    border: none;
}

blockquote {
    padding: 10px 30px;
}

dl.codebox code,
.spoiler dd,
.hidecode {
    background-color: #F6F5F8 !important;
    padding: 10px 30px !important;
}

.hidecode dt,
dl.codebox::before,
blockquote::before {
    display: none !important;
}

dl.codebox dt,
cite {
    border: none;
    color: #C38567;
    font: 11px 'Roboto', sans-serif;
    text-transform: uppercase;
    margin: 5px 0 8px 11px;
    font-weight: 500;
}

.spoiler dt {
    margin-bottom: 3px !important;
}

dl.codebox code {
    font-size: 12px;
}
  /* --------- FIN AFFICHAGE MESSAGES --------- */
}

et dans la PA

Code:

<div class="pa_1">
                                                                                                                                  
   <div class="item_13">
                                                                                                                                 
      <div class="texte_4">
          Ici un texte sur l'actualité ou l'intrigue du forum.                                           
      </div>
                                                                                                                           
      <div class="titre_1">
                                                                   WHAT'S GOING ON?                                                           
      </div>
                                                                                                                             
   </div>
                                                                                                                                  
   <div class="item_14">
                                                                                                               
      <div class="onglets_pa">
                                                                                                      
         <div class="boutons_pa">
                                                                                                           
            <div class="lab onglet1 visible">
                                                                   <img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" />                                                 
            </div>
                                                                                                           
            <div class="lab onglet2">
                                                               <img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" />                                                       
            </div>
                                                                                                           
            <div class="lab onglet3">
                                                               <img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" />                                                       
            </div>
                                                                                               
            <div class="lab onglet4">
                                                               <img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" />                                                       
            </div>
                                                                                               
            <div class="lab onglet5">
                                                               <img src="https://images2.imgbox.com/d1/1b/v1XgkDZB_o.png" class="staff" />                                                       
            </div>
                                                                                                         
         </div>
                                                                                                      
         <div class="interne">
                                                                                                           
            <div class="contenu onglet1 visible">
                                                                 <h>PRÉNOM <j>NOM</j></h>                                         
               <div class="sous_titre">
                                                        ADMINISTRATEUR — <a href="uc">PROFIL</a>                                     
               </div>
                                                                                                  
            </div>
                                                                                                           
            <div class="contenu onglet2">
                                                                   <h>PRÉNOM <j>NOM2</j></h>                                         
               <div class="sous_titre">
                                                        ADMINISTRATEUR — <a href="uc">PROFIL</a>                                     
               </div>
                                                                                            
            </div>
                                                                                                           
            <div class="contenu onglet3">
                                                                 <h>PRÉNOM <j>NOM3</j></h>                                         
               <div class="sous_titre">
                                                        ADMINISTRATEUR — <a href="uc">PROFIL</a>                                     
               </div>
                                                                                      
            </div>
                                                                                 
            <div class="contenu onglet4">
                                                                 <h>PRÉNOM <j>NOM4</j></h>                                         
               <div class="sous_titre">
                                                        ADMINISTRATEUR — <a href="uc">PROFIL</a>                                     
               </div>
                                                                                              
            </div>
                                                                                 
            <div class="contenu onglet5">
                                                                 <h>PRÉNOM <j>NOM5</j></h>                                         
               <div class="sous_titre">
                                                        ADMINISTRATEUR — <a href="uc">PROFIL</a>                                     
               </div>
                                                                                            
            </div>
                                                                                                         
         </div>
                                                                                                  
      </div>
                                                                                                                     
   </div>
                                                                                                                                  
   <div class="item_15">
                                                                                                                                 
      <div class="titre_3">
                                                                         FORUM OPTIMISÉ POUR CHROME & SAFARI                                                                 
      </div>
                                                                                                                                                                                     
   </div>
                                                                                                                                                  
   <div class="item_1">
                                                                         
      <div class="link_pa">
                                       <a href="LIEN ICI" class="link1">LIEN 1</a>                                     
      </div>
                                                                       
      <div class="link_pa">
                                       <a href="LIEN ICI" class="link2">LIEN 2</a>                                     
      </div>
                                                                     
      <div class="link_pa">
                                       <a href="LIEN ICI" class="link1">LIEN 3</a>                                 
      </div>
                                                                     
      <div class="item_5">
                                 Partie règles du forum (avatar, initiales, réservations, etc.)                                   
      </div>
                                                               
      <div class="link_pa">
                                       <a href="LIEN ICI" class="link2">LIEN 4</a>                                     
      </div>
                                                                     
      <div class="link_pa">
                                       <a href="LIEN ICI" class="link1">LIEN 5</a>                                 
      </div>
                                                                     
      <div class="link_pa">
                                       <a href="LIEN ICI" class="link2">LIEN 6</a>                                     
      </div>
                                                                                           
   </div>
                                                                                                                                                                                                                                
   <div class="gif_pa">
                                                                                                                                                                   
      <div class="img_pa">
                                                                                               <img src="METTRE ICI L'IMAGE DU CONTEXTE" class="paimg" />                                                                                                     
         <div class="overflow">
                                                                                                                                                                             
            <div class="container_txt">
                Ici mettre le contexte.                                                                           
            </div>
                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                                                                                
      </div>
                                                                                                                                                                   
   </div>
                                                                                                                                                                                              
   <div class="item_8">
                                                     
      <div class="texte_1">
                                     ici mettre la timeline (ouverture, maintenance, etc.)           
      </div>
                                     
      <div class="titre_4">
                           1ÈRE VERSION SIGNÉE XXX.                   
      </div>
                                                                                                                                                                                                                                                                                                                       
   </div>
                                                                                                                                        
   <div class="item_9">
                                                                            période de jeu: <j>mois 2xxx</j>                                                                 
   </div>
                                                                                                                                        
   <div class="item_10">
                       
      <div class="float_pa">
                            
         <div class="float_pa1">
                                                                                                                                                       
            <div class="titre_2">
                                                                                   membres du mois                                                                     
            </div><a href="LIEN PROFIL MDM 1"><img class="mdm1" src="IMG ICI" /></a><a href="LIEN PROFIL MDM2"><img class="mdm2" src="IMG ICI" /></a><a href="LIEN PROFIL MDM 3"><img class="mdm1" src="IMG ICI" /></a>           
         </div>
                            
         <div class="float_pa2">
                               
            <div class="titre_1">
                                                                                   nous soutenir                                                                   
            </div><a href="LIEN DISCORD"><img src="IMG DISCORD ICI" class="discord_pa" /></a> <a href="LIEN TUMBLR"><img src="IMG TUMBLR ICI" class="discord_pa" /></a><br />votez <a href="LIEN SUJET VOTES" targer="_blank">ici</a>.       
         </div>
                          
      </div>
                                                                                                                                                                           
      <div class="item_11">
                                               <a target="_blank" href="LIEN LISTE PARTENAIRES"><w>NOS PARTENAIRES &</w></a> <a target="_blank" href="LIEN SUJET DEMANDES"><y>DEMANDES</y></a> <br />                  <select class="select_pa" onchange="location = this.value">  <option selected="selected">NOS PARTENAIRES D'AILLEURS</option>  <option value="LIEN FORUM">FORUM</option> </select>                                                                                                                                                                   
         <div class="vote_pa">
                                                                                                                                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                                          
      </div>
                                                   
   </div>
        
   <div class="item_12">
        PAGE D'ACCUEIL CRÉÉE PAR ICE AND FIRE. (2021)   
   </div>
    
</div>

Si besoin je peux fournir le javascript

[MlleAlys]

Bonjour,
Si tous les codes que vous utilisez se basent sur une largeur de 900px, je vous conseille d'ajouter ce code-ci à votre css :

Code:

#wrap {
    box-sizing: content-box;
}

En effet, le problème est le même que dans ce sujet :
https://forum.forumactif.com/t409910-centrer-le-corps-du-forum-categories-et-qeel#3414079

Avec ce code, vous aurez bien une largeur disponible de 900px pour les éléments de votre forum.

[Argimpasa]

Bonjour,

Je me doutais que c'était quelque chose d'assez simple mais ne connaissant pas ce qu'était le "wrap" je ne risquais pas d'aller loin.
Je vous remercie sincèrement.