QEEL rétréci sur firefox + lien incliquable

[Oz-Chan]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 07.10.2022 23h30
Lien du forum : https://nova-aurora.forumactif.com/

Description du problème

Bonjour,

Me voilà avec deuxproblèmes un peu bizarre !

Mon qui est en ligne se rétrécit à la même taille que mes catégories quand on fait un retour sur la page uniquement quand on le fait en bas et sur firefox. Cela doit être un problème de navigateur, mais je ne le trouve pas...
De plus, le petit carré rose est censé être un lien, mais il ne fonctionne pas ???

Mon CSS

Code:

:root {
 --police-texte: "Arial", sans-serif; /** police du texte **/
 --police-titres: "Bebas Neue", sans-serif; /** police des titres **/
 --couleur-1: #bb4141; /** couleur rouge par défaut **/
 --couleur-2: #4a4a4a; /** couleur foncée par défaut **/
 --couleur-texte: black; /** couleur du texte foncé par défaut **/
 --couleur-fond: #f9f9f9; /** couleur clair du qeel et des textes clairs **/
 --couleur-titre-qeel : #696969; /** couleur du titre du qeel et de son bloc **/
 --couleur-gr: #bb4141; /** couleur rouge par défaut des groupes **/
}

.titre-qeel {
 width: 100%;
 margin: 0;
 text-align: right;
 font: 65px var(--police-titres);
 color: var(--couleur-titre-qeel);
 position: relative;
}

.titre-qeel > span {
 display: inline-block;
 font: 10px var(--police-texte);
 background: var(--couleur-titre-qeel);
 color: var(--couleur-fond);
 text-transform: uppercase;
 box-sizing: content-box;
 padding: 2px 5px;
 position: absolute;
 right: 10px;
 top: 40%;
}

#contenuqeelarte,
#contenuqeelarte * {
 box-sizing: border-box;
}

#contenuqeelarte {
 width: 100%;
 display: grid;
 grid-template-columns: 3fr 2fr;
 gap: 10px;
 background-color: var(--couleur-fond);
 border: 1px solid rgba(0, 0, 0, 0.2);
 margin: -23px auto 0;
 font-family: var(--police-texte);
 font-size: 12px;
 position: relative;
}

#contenuqeelarte::before {
 background-image: url(https://zupimages.net/up/21/31/zyg5.jpg); /** image de fond visible sur la partie gauche du qeel **/
 background-size: 150%;
 background-position: center;
 -webkit-filter: grayscale(100%) contrast(85%);
 filter: grayscale(100%) contrast(85%);
 opacity: 0.20;
 content: " ";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
}

.bloc-stats-gauche {
 grid-column: 1/2;
 display: grid;
 grid-template-columns: 35% 1fr 1fr;
 grid-template-rows: 90px 120px;
 gap: 10px 10px;
 padding: 15px;
 position: relative;
 z-index: 99;
}

.derniers-connectes {
 grid-column: 1/2;
 grid-row: 1/3;
 border: 1px solid var(--couleur-1);
 padding: 20px;
}

.derniers-connectes > h2 {
 font: 30px var(--police-titres);
 margin: 0;
 line-height: 25px;
 color: var(--couleur-1);
}

.derniers-connectes > div {
 height: 85px;
 margin: 10px auto;
 overflow: auto;
 text-align: justify;
 color: var(--couleur-texte);
}

.derniers-connectes > div td.row1, td.row3.over:hover {
    background-color: transparent;
}

.derniers-connectes > div .gensmall {
    font-size: 12px;
    font-family: var(--police-texte);
}

#contenuqeelarte a {text-decoration: none;}

.en-ligne-maintenant {
 grid-column: 2/4;
 grid-row: 1/2;
}

.en-ligne-maintenant > h4 {
 font: 24px var(--police-titres);
 color: var(--couleur-1);
 margin: 0;
 position: relative;
 padding-left: 45px;
 padding-top: 17px;
 box-sizing: border-box;
}

.en-ligne-maintenant > h4::before {
 content: " ";
 width: 40px;
 height: 40px;
 background: var(--couleur-1);
 position: absolute;
 left: 0;
 top: 0;
}

.en-ligne-maintenant > p {
 margin: 3px auto;
 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 padding: 0 0 5px 0;
 max-height: 40px;
 font-size: 0;
 overflow:auto;
}

.en-ligne-maintenant > p > strong {
 font-weight: 300;
}

.en-ligne-maintenant > p > br {
 display: none;
}

.en-ligne-maintenant > p a {
  font-size: 12px;
  font-family: var(--police-texte);
}

.stats-gauche {
 text-align: center;
 padding: 0 10px;
 font-size: 11px;
}

.stats-gauche span i {
 font-size: 40px;
 color: var(--couleur-2);
 transition: all 0.2s;
}

.stats-gauche span i:hover {
 color: var(--couleur-1);
}

.stats-gauche > p {
 text-align: justify;
 height: 70px;
 overflow: auto;
 font-family: var(--police-texte);
 font-size: 12px;
}

.stats-gauche > p > strong {
 color: var(--couleur-1);
}

.stats-membres {
 grid-column: 2/3;
 grid-row: 2/3;
 border-right: 1px solid rgba(0, 0, 0, 0.1)
}

.stats-messages {
 grid-column: 3/4;
 grid-row: 2/3;
}

.bloc-groupes-droit {
 grid-column: 2/3;
 -webkit-clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
 clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
 background: var(--couleur-2);
 position: relative;
 padding: 5% 5% 5% 22%;
 z-index: 99;
  margin-right: -1px;
}

.bloc-groupes-droit::before {
 background-image: url(https://zupimages.net/up/21/31/zyg5.jpg); /** image de fond visible sur la partie droite du qeel **/
 background-size: 200%;
 background-position: center;
 -webkit-filter: grayscale(100%) contrast(125%);
 filter: grayscale(100%) contrast(125%);
 opacity: .075;
 content: " ";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
}

.contenu-bloc-groupe {
 position: relative;
 z-index: 99;
}

.boutons_onglets {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.bloc-onglet {
 flex: 1 1 auto;
 display: block;
 margin: 4px 3px;
 min-height: 20px;
 text-align: center;
 color: var(--couleur-fond);
 text-transform: uppercase;
 font-size: 10px;
 line-height: 20px;
}

/*** Mise en forme de la description des groupes ***/
.contenu_onglet {
 text-align: right;
 display: none;
}

.contenu_onglet > h2 {
 font: 23px var(--police-titres);
 text-transform: uppercase;
 position: relative;
 padding-right: 40px;
 letter-spacing: 1px;
 padding-top: 7px;
 margin: 10px auto 0;
}

.contenu_onglet > h2::after {
 width: 30px;
 height: 30px;
 content: " ";
 position: absolute;
 top: 0;
 right: 0;
}

.contenu_onglet > p {
 text-align: justify;
 margin: 5px 0 0 -15%;
 color: var(--couleur-fond);
 max-height: 65px;
 overflow: auto;
 padding-right: 5px;
 width: 115%;
 font-family: var(--police-texte);
 font-size:12px;
}

.onglet {flex: 1 1 auto;}

.bloc-onglet {
 background-color: var(--couleur-gr);
 text-decoration: none;
 color: var(--couleur-fond) !important;
}
.contenu_onglet > h2 {color: var(--couleur-gr);}
.contenu_onglet > h2:after {background-color: var(--couleur-gr);}

/** Ici pour la modification des couleurs de chaque groupe **/
.gr1 {--couleur-gr: #b26bd6;} /** couleur attachée au groupe 1 **/
.gr2 {--couleur-gr: #b26bd6;} /** couleur attachée au groupe 2 **/
.gr3 {--couleur-gr: #b26bd6;} /** couleur attachée au groupe 3 **/
.gr4 {--couleur-gr: #b26bd6;} /** couleur attachée au groupe 4 **/
.gr5 {--couleur-gr: #b26bd6;} /** couleur attachée au groupe 5 **/

Index_body

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
  <h2 class="titre-qeel">Qui est en ligne ? <span>Ces dernières 24 heures ?</span></h2>
<div id="contenuqeelarte">
 <div class="bloc-stats-gauche">
 <div class="derniers-connectes">
 <h2>
 Ils
 <br/>
 etaient
 <br/>
 connectés
 </h2>
 <div>
                          <table>{L_CONNECTED_MEMBERS}</table>
 </div>
 </div>
 <div class="en-ligne-maintenant">
 <h4>Ils sont là</h4>
 <p>
 {LOGGED_IN_USER_LIST}
 </p>
 </div>
 <div class="stats-membres stats-gauche">
 <span><i class="cp cp-user"></i></span>
 <p>
 Il y a
 <strong>{TOTAL_USERS}</strong>
 ; l'utilisateur enregistré le plus récent est
 <strong>{NEWEST_USER}</strong>
 &nbsp; !
 </p>
 </div>
 <div class="stats-messages stats-gauche">
 <span><i class="cp cp-envelope"></i></span>
 <p>
 Le forum compte
 <strong>{TOTAL_POSTS}</strong>
 , nous sommes de vraies pipelettes !
 </p>
 </div>
 </div>
 <div class="bloc-groupes-droit">
 <div class="contenu-bloc-groupe">
 <div class="systeme_onglets">
 <div class="boutons_onglets">
 <span class="onglet" id="onglet_NomOnglet1" onmouseover="change_onglet('NomOnglet1');"><a href="#" class="bloc-onglet gr1">Nom du groupe 1</a></span>
 <span class="onglet" id="onglet_NomOnglet2" onmouseover="change_onglet('NomOnglet2');"><a href="#" class="bloc-onglet gr2">Nom du groupe 2</a></span>
 <span class="onglet" id="onglet_NomOnglet3" onmouseover="change_onglet('NomOnglet3');"><a href="#" class="bloc-onglet gr3">Nom du groupe 3</a></span>
 <span class="onglet" id="onglet_NomOnglet4" onmouseover="change_onglet('NomOnglet4');"><a href="#" class="bloc-onglet gr4">Nom du groupe 4</a></span>
 <span class="onglet" id="onglet_NomOnglet5" onmouseover="change_onglet('NomOnglet5');"><a href="#" class="bloc-onglet gr5">Nom du groupe 5</a></span>
 </div>
 </div>
 <div class="conteneur_onglets">
 <div class="contenu_onglet gr1" id="contenu_onglet_NomOnglet1">
 <h2>Nom du groupe</h2>
 <p>
 1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus sapien, ultrices in lacinia ac, molestie ornare ipsum. Nam euismod commodo lorem, eget porta diam accumsan nec. Ut suscipit vitae sapien quis ornare. Mauris accumsan malesuada mauris non dictum. Praesent porta consequat lacus eget imperdiet.
 </p>
 </div>
 <div class="contenu_onglet gr2" id="contenu_onglet_NomOnglet2">
 <h2>Nom du groupe</h2>
 <p>
 2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus sapien, ultrices in lacinia ac, molestie ornare ipsum. Nam euismod commodo lorem, eget porta diam accumsan nec. Ut suscipit vitae sapien quis ornare. Mauris accumsan malesuada mauris non dictum. Praesent porta consequat lacus eget imperdiet.
 </p>
 </div>
 <div class="contenu_onglet gr3" id="contenu_onglet_NomOnglet3">
 <h2>Nom du groupe</h2>
 <p>
 3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus sapien, ultrices in lacinia ac, molestie ornare ipsum. Nam euismod commodo lorem, eget porta diam accumsan nec. Ut suscipit vitae sapien quis ornare. Mauris accumsan malesuada mauris non dictum. Praesent porta consequat lacus eget imperdiet.
 </p>
 </div>
 <div class="contenu_onglet gr4" id="contenu_onglet_NomOnglet4">
 <h2>Nom du groupe</h2>
 <p>
 4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus sapien, ultrices in lacinia ac, molestie ornare ipsum. Nam euismod commodo lorem, eget porta diam accumsan nec. Ut suscipit vitae sapien quis ornare. Mauris accumsan malesuada mauris non dictum. Praesent porta consequat lacus eget imperdiet.
 </p>
 </div>
 <div class="contenu_onglet gr5" id="contenu_onglet_NomOnglet5">
 <h2>Nom du groupe</h2>
 <p>
 5Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus sapien, ultrices in lacinia ac, molestie ornare ipsum. Nam euismod commodo lorem, eget porta diam accumsan nec. Ut suscipit vitae sapien quis ornare. Mauris accumsan malesuada mauris non dictum. Praesent porta consequat lacus eget imperdiet.
 </p>
 </div>
 </div>
 </div>
 </div>
  <a href="http://labyrinthofmagic-rpg.actifforum.com/"><img src="https://i.servimg.com/u/f74/20/14/12/09/156.jpg"/></a>
</div>

<script type="text/javascript">
      document.getElementById('contenuqeelarte').innerHTML=document.getElementById('contenuqeelarte').innerHTML.replace(/Membres connectés au cours des 24 dernières heures : /g," ")
      .replace(/Membres connectés au cours des 48 dernières heures : /g," ")
      .replace(/Utilisateurs enregistrés :/g," ")
      .replace(/Utilisateurs enregistrés :/g," ")
      .replace(/Nos membres ont posté un total de /g," ")
      .replace(/Nous avons /g," ")
      .replace(/enregistrés/g," ")
      .replace(/L'utilisateur enregistré le plus récent est /g," ");
</script>
 
<script type="text/javascript">function change_onglet(name){document.getElementById('onglet_'+anc_onglet).className='onglet_0 onglet'; document.getElementById('onglet_'+name).className='onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display='none'; document.getElementById('contenu_onglet_'+name).style.display='block'; anc_onglet=name;}</script>
<script type="text/javascript">var anc_onglet = 'NomOnglet1'; change_onglet(anc_onglet);</script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" loading="lazy" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" loading="lazy"  /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>&nbsp;&nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" loading="lazy"  /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

Merci d'avance pour votre précieuse aide

['Christa]

Hello !

En général, quand il s'agit d'obtenir de l'aide sur un LS trouvé sur un forum d'entraide (en l'occurence ici celui d'Artemis sur Epicode) c'est plus utile pour la communauté de demander de l'aide sur le forum en question (parce que la personne qui a proposé le code peut corriger les potentiels bugs rencontrés).

Ceci étant dit, tes bugs étranges s'expliquent assez facilement ^^

Pour l'histoire du QEEL "qui fait la largeur des catégories", c'est parce qu'il s'adapte à la largeur de ton forum. Or, celle-ci est influencée par la largeur de ton header. Et - sur firefox, du moins - l'image du header n'est chargée que si tu scrolles de manière à le faire apparaitre. Tant que l'image n'est pas chargée, ton forum fait la largeur des catégories car c'est le seul autre élément à la largeur fixée.

Pour le lien du carré rose qui ne fonctionne pas, c'est parce que le QEEL d'Artemis est construit de telle façon que son fond a tendance à "recouvrir" ton lien, qui ne fait pas partie du QEEL d'origine. Il faudrait plutôt rajouter un bloc complet en dessous du QEEL ou recoder cette partie pour obtenir un résultat qui fonctionne correctement.

Une solution rapide consistera donc à remplacer ton lien :

Code:

<a href="http://labyrinthofmagic-rpg.actifforum.com/"><img src="https://i.servimg.com/u/f74/20/14/12/09/156.jpg"/></a>

Par :

Code:


<div class="bloc-qeel-bonus">
    <a href="http://labyrinthofmagic-rpg.actifforum.com/"><img src="https://i.servimg.com/u/f74/20/14/12/09/156.jpg"/></a>
</div>

Et rajouter ceci dans le CSS :

Code:

.bloc-qeel-bonus {
  grid-column: 1/-1;
  position: relative;
  z-index: 10;
}

[Oz-Chan]

Bonjour et je vous remercie pour votre réponse !

Je suis de base d'accord avec vous, mais vu que la personne n'est pas présente en ce moment, je préférais ne pas déranger. ;v;

Le bug du carré rose a été corrigé, merci bien ! J'avais tenté cette technique, mais je faisais tout exploser... xD

Par contre, j'avoue ne pas comprendre le bug pour la taille du QEEL. Comment puis-je faire en sorte que la taille reste comme celle du header et ne prenne pas celle des catégories comme sur google chrome ?

Encore une fois, je vous remercie pour votre aide !

[MlleAlys]

Bonjour,

Si vous souhaitez que votre forum fasse par défaut 1000px de large et non 850 comme c'est le cas sans la bannière, alors rendez vous dans général > configuration > largeur du forum et indiquez 1000px.

Si vous souhaitez qu'à l'avenir la bannière ne déforme plus votre forum, vous pouvez ajouter le code suivant dans votre css :

Code:

/*dimensions bannière*/
#i_logo {
  max-width: 100%;
  height: 700px;


max-width:100%; l'empêchera d'élargir le forum ;
height: 700px; correspond à la hauteur à couvrir en fonction de l'image mise en fond.

['Christa]

Salut ! Juste pour information, nous avons une section "Problème avec un code" sur Epicode pour ce genre de soucis avec un LS d'Epicode.

Pour en revenir à ton souci (je transmettrai à Artemis), il te suffit de chercher ceci dans ton CSS :

Code:

#contenuqeelarte {
 width: 100%;

Remplace le 100% par la largeur en pixels que tu souhaites. Cela donnera au QEEL une largeur fixe plutôt que la largeur "disponible".

Je pars du principe que le reste de la largeur du forum (les catégories) est voulue, raison pour laquelle je donne une solution différente de celle donnée ci avant par MlleAlys.

[Oz-Chan]

Bonjour !

C'est exactement ce que je voulais, merci Christa et aussi merci MlleAlys pour ta proposition.
Je note pour la section aide, désolé je ne l'avais pas vu.. ;v; Je passerai par là si je trouve encore un soucis

[MlleAlys]

@'Christa : La solution que j'ai proposée ne change pas la largeur des catégories
Pour ma part j'étais plutôt partie du principe que comme la bannière déforme la largeur du forum à 1000px, l'ensemble du forum avait dû être codé à partir de cette largeur de 1000px... Donc pour éviter d'autres problèmes de ce genre dans le futur, autant mettre directement la largeur du forum à 1000px. ^^
Cela ne change pas les catégories qui étaient déjà et restent donc limitées à 850px.

Par contre avec ta proposition, cela règle le problème du qeel, mais pour chaque page où la bannière ne sera pas chargée, on risque de retrouver à nouveau le même problème avec d'autres éléments que le qeel non ?