Problème de codage QEEL.

[Eleniel]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://shinobi-no-seiki.forumactif.be/

Description du problème

Bonjour,

Je poste suite à un soucis de codage.

https://www.zupimages.net/up/20/01/ierj.png

J'aimerai agrandir en grandeur les cases il y a "Nos membres ont posté un total de 4110 messages.
Nous avons 128 membres enregistrés..."

Ainsi que celle avec "Membres connectés au cours des 99 dernières heures " afin qu'elles puissent avoir la même longueur que la colonne du milieu avec les groupes du forum.

Voici mon CSS, et je n'arrive pas à trouver les balises height à modifier. ^^"

Code:

qeel {
        background: url('https://d1peeob7q8vyd1.cloudfront.net/uploads/produtos/238/capas/media-revestimento-pointer-neutra-classico-branco-ret-60X60-brilho-40845-capa.jpeg');
        margin: auto;
        padding: 2.5rem 2rem 1rem;
        width: 99%;
   font-family: 'Arial', sans-serif;
   font-size: 10px;
   color: #8f8a9e;
}

.qeel_content {
        display: flex;
        background: #fdfdfd;
        padding: 1rem 2rem;
        border: 1px solid #ededed;
}

.qeel_bloc:nth-child(2) {
        width: 26%;
        margin: 0 2%;
}

.qeel_bloc {
     width: 35%;
}

/* Titres */
.qeel_content h2 {
        background: #cfcfcf;
        color: #f3f3f3;
        font-family: Arial, asns;
        font-size: 12px;
        font-weight: 700;
        padding: .3rem 0;
        text-align: center;
        text-transform: uppercase;
}

/* Blocs texte */
.qeel_content p {
        background: #f4f4f4;
        border: 1px solid #ededed;
        font-size: 10px;
        padding: .5rem;
        text-align: justify;
        margin: .5rem 0;
   font-size: 9px;
        color: #8f8a9e;
}

/* Dernier inscrit */
.qeel_dernier {
        background: #f4f4f4;
        border: 1px solid #ededed;
        font-size: 10px;
        padding: .5rem;
        text-align: center;
        margin: 0;
        color: #8f8a9e;
        text-transform: uppercase;
}

.qeel_dernier strong {
     font-weight: normal;
}

/* Groupes */
.qeel_groupes a {
        color: #f3f3f3;
        display: block;
        font-weight: 700;
        margin: .8rem 0;
        padding: .5rem 0;
        text-align: center;
        text-transform: uppercase;
        transition: .5s all;
}

.qeel_groupes a:hover {
     color: #fff !important;
}

a#q_basic {background: #9E3C3C;}
a#q_magic {background: #AB8C55;}
a#q_wizard {background: #5D90A3;}
a#q_vagabonds {background: #58755A;}

/* Derniers connectes */
p.qeel_derniers_co {
        width: 100%;
        height: 98px;
        overflow: auto;
}

p.qeel_derniers_co a span strong {
     font-weight: normal;
}

/* En ligne */
span.scroll_online {
        width: 100%;
        height: 37px;
        display: block;
        overflow: auto;
}

span.scroll_online a span strong {
     font-weight: normal;
}


/* CREDIT */
a.qeel_credit {
        color: #8f8a9e;
        font-family: 'Times New Roman', sans-serif;
        font-size: 10px;
        font-style: italic;
        text-transform: lowercase;
        display: block;
        text-align: right;
}


Merci bien !

Bonne journée

[*Splash*]

Hi,
Pour bien faire le codage du template serait un plus

[Eleniel]

Code:

 <!-- BEGIN disable_viewonline -->
<div class="qeel" id="fo_stat">
     <div class="qeel_content">
             <div class="qeel_bloc">
                     <h2>
                             Informations
                     </h2>
                 
                     <p>
                             {TOTAL_POSTS}. <br>
                         
                             {TOTAL_USERS}.
                         
                             <br />
                             
                             {TOTAL_USERS_ONLINE}
                         
                             <br />
                         
                             <span class="scroll_online">
                                     {LOGGED_IN_USER_LIST}
                             </span>
                     </p>
             </div>
         
             <div class="qeel_bloc">
                     <div class="qeel_dernier">
                             {NEWEST_USER}
                     </div>
                 
                     <div class="qeel_groupes">
                             <a href="#" id="q_basic">
                                     Contrée du Feu
                             </a>
                         
                             <a href="#" id="q_magic">
                                     Contrée du Vent
                             </a>
                         
                             <a href="#" id="q_wizard">
                                     Contrée de l'Eau
                             </a>
                          <a href="#" id="q_vagabonds">
                                     Vagabonds
                             </a>
                     </div>
             </div>
         
             <div class="qeel_bloc">
                     <h2>
                             Ils errent sur nos terres...
                     </h2>
                 
                     <p class="qeel_derniers_co">
                             {L_CONNECTED_MEMBERS}
                     </p>
             </div>
     </div>
 
     <a href="https://shinobi-no-seiki.forumactif.be" target="_blank" class="qeel_credit">
             Shinobi no Seiki - 2020.
     </a>
</div>


   <!-- BEGIN switch_chatbox_activate -->
      <div class="block">
         <div class="h3">
            <a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
            <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
                  insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
            <!-- END switch_chatbox_popup -->
         </div>
         {TOTAL_CHATTERS_ONLINE}: {CHATTERS_LIST}
      </div>
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline --> 

[*Splash*]

Tu voudrais obtenir ceci ?

[Eleniel]

Oui c'est ça.

[*Splash*]

OK !
Dans ta CSS, remplace les blocs /* En ligne */ et /* Derniers connectes */ par ceux-ci :

Code:

/* En ligne */
span.scroll_online {
        width: 100%;
        height: 125px;
        display: block;
        overflow: auto;
}


Code:

/* Derniers connectes */
p.qeel_derniers_co {
        width: ;
        height: 175px;
        overflow: auto;
}

Ajuste selon tes besoins

[Eleniel]

Super, merci beaucoup à toi

[*Splash*]

Super, bonne journée