Soucis avec le qui est en ligne

[Argimpasa]

Détails techniques

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

Voir l'image:

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

Description du problème

Bonjour,

Comme vous le voyez, j'ai un souci avec mon QEEL. Celui-ci se coupe en deux et ne se place pas correctement.
Une partie est comme vous pouvez le voir sur la première image, en bas et tous se juxtapose et la seconde partie se met tout en haut du forum.
Merci de votre aide.

Mes codes :

Code:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
 <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
 <br />
 <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <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>
            <!-- END switch_social_login -->
 </div>
 </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
 <div class="pourtester" style="text-align:center;">
<div class="welcometoi">bienvenue</div>
<span id="dernier_membre">{NEWEST_USER}</span>
<script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est /g," ");</script>
</div>


<div class="totalqeel">

  <div class="blokco">
    <h1>Parcourant le forum...</h1>
    <div class="totalusers">{TOTAL_USERS_ONLINE}</div>
    <div id="jambon">{LOGGED_IN_USER_LIST}</div><script type="text/javascript">document.getElementById('jambon').innerHTML=document.getElementById('jambon').innerHTML.replace(/Utilisateurs enregistrés :/g," ");</script>
    <script type="text/javascript">document.getElementById('jambon').innerHTML=document.getElementById('jambon').innerHTML.replace(/Moteurs de recherche :/g," ");</script>
  </div>
 
  <div class="bloklast">
 
 <div class="premier">
<div id="membresqeel">{TOTAL_USERS}</div>
  <script type="text/javascript">document.getElementById('membresqeel').innerHTML=document.getElementById('membresqeel').innerHTML.replace(/Nous avons/g," ");</script>
 <script type="text/javascript">document.getElementById('membresqeel').innerHTML=document.getElementById('membresqeel').innerHTML.replace(/membres enregistrés/g," ");</script>
  <div id="messagesqeel">{TOTAL_POSTS}</div>
  <script type="text/javascript">document.getElementById('messagesqeel').innerHTML=document.getElementById('messagesqeel').innerHTML.replace(/Nos membres ont posté un total de/g," ");</script>
  <script type="text/javascript">document.getElementById('messagesqeel').innerHTML=document.getElementById('messagesqeel').innerHTML.replace(/messages/g," ");</script>
  <span id="avatar_dernier_membre"></span>
  </div>
 
    <div class="groupsqeel">
      <a target="_blank" href="http://half-god-rpg.forums-actifs.net/g6-pnj"><img src="https://zupimages.net/up/19/43/aipf.png"/></a>
      <a target="_blank" href="http://half-god-rpg.forums-actifs.net/g3-sang-melees-grecs"><img src="https://i.imgur.com/F1qSUgS.png"/></a>
      <a target="_blank" href="http://half-god-rpg.forums-actifs.net/g4-sang-meles-romains"><img src="https://i.imgur.com/viqFE5r.png"/></a>
      <a target="_blank" href="http://half-god-rpg.forums-actifs.net/g5-chasseresses"><img src="https://i.imgur.com/uI1J7bf.png"/></a>
      <a target="_blank" href="http://half-god-rpg.forums-actifs.net/g7-autres-creatures"><img src="https://i.imgur.com/fibVccI.png"/></a>
    </div>
 
  </div>
 
  <div class="bloklastco">
    <h1>Il y a 48 heures</h1>
    <div id="mayonnaise"><table>{L_CONNECTED_MEMBERS}</table></div>
    <script type="text/javascript">document.getElementById('mayonnaise').innerHTML=document.getElementById('mayonnaise').innerHTML.replace(/Membres connectés au cours des 48 dernières heures : /g," ");</script>
  </div>

</div>
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
 <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
 <br />
 <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_social_login -->
            <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>
            <!-- END switch_social_login -->
 </div>
 </form>
</div>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
 <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" loading="lazy" />{L_NEW_POSTS}</li>
 <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" loading="lazy" />{L_NO_NEW_POSTS}</li>
 <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" loading="lazy" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

CSS

Code:

.bannorange img {
 width : 900px;
display : block;
margin : auto;;
 
}
.navbarr {
   background: #cb8a48;
   position: absolute;
   left: 0px;
   color: black;
   list-style: none;
   padding: 10px;
   text-align: center;
   width: 62px;
   top: 0;
}
.navbarr img{
 width:25px;
}
.arrowdown {
   width: 0px;
   height: 0px;
   border-left: 31px solid transparent;
   border-right: 31px solid transparent;
   border-top: 20px solid #cb8a48;
   position: absolute;
   margin-top: 10px;
   left: 0;
}
.menuposition a[href="/"]:after {
 content: "home";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href="/faq"]:after {
 content: "f.a.q";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href="/search"]:after {
 content: "search";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href="/memberlist"]:after {
 content: "membres";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href="/groups"]:after {
 content: "groupes";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href*="/profile"]:after {
 content: "user";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href*="/privmsg"]:after {
 content: "message";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href*="/login"]:after {
 content: "leave";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.menuposition a[href*="/register"]:after {
 content: "join us";
 color:black;
 font:8px arial;
 text-transform:uppercase;
}
.sep {
   width: 100%;
   height: 2px;
   background: #2e2c29;
   margin: 5px 0px 5px 0px;
}
.firsty {
   padding: 10px 0px 10px 0px;
}
.firsty img {
   width: 40px !important;
   height: 40px;
   border: 5px solid black;
   outline: 2px solid #000;
   outline-offset: 2px;
}
.second {
   text-transform: uppercase;
   letter-spacing: 1px;
   font: 8px arial;
}
.topsite {
   border-radius: 100%;
   width: 38px;
   border: solid 2px black;
   height: 38px;
   padding: 10px;
   margin: 5px 0px 10px 2px;
}
.topsite a {
   color: black;
   font: 15px arial;
   font-weight: bold;
}
.copyrighttruc {
   text-align: justify;
   font: 8px arial;
   color: black;
   line-height: 9px;
   width: 42px;
   text-transform: uppercase;
}
.titlefo {
   top: 88px;
   position: absolute;
   left: 55%;
   padding: 150px 10px 20px 10px;
   border: solid 10px #2e2c29;
   font: 50px quicksand;
   text-transform: uppercase;
   text-align: center;
   background: rgba(250, 250, 250, 0.2);
}
.title2 {
   font: 20px ptlight;
}
.contexteuh {
   padding: 0px 20px 20px 20px;
   text-align: justify;
   color: #2e2c29;
   font: 11px arial;
   line-height: 17px;
   height: 190px;
   overflow: auto;
   border-left: solid 50px #cb8a48;
}
.linksut {
   padding: 20px 0px 20px 0px;
   text-align: center;
 color: #2e2c29;
   font-size:25px;
}
.linksut a {
   padding: 20px 0px 20px 0px;
   text-transform: uppercase;
   color: #2e2c29;
   font: 34px quicksand;
}
.linksut a:hover {
 color:#cb8a48;
 font-style:italic;
}
.titcate {
   padding: 20px;
   border: solid 10px #2e2c29;
   letter-spacing: 2px;
   text-transform: uppercase;
   text-align: center;
   background: rgba(250, 250, 250, 0.4);
   margin: 100px 0px 20px 0px;
}
.titcate h2 {
 font:30px quicksand;
}
.categorie {
 width:100%;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
}
.lastpost {
   padding-left: 50px;
   color: #b5b5b5;
   font: 8px arial;
   text-transform: uppercase;
   margin-top: 40px;
}
.lastpost a{
   font: 10px quicksand;
   color: #2e2c29;
}
.lastpost strong {
   position: absolute;
   margin: 1px 0px 0px -64px;
   font: 22px quicksand;
   opacity: 0.4;
   font-style: italic;
   text-align: right;
}
.lastpost img {
   width: 20px;
}
.iconcat {
   width: 130px;
   height: 300px;
}
.restecate {
   width: 660px;
   padding-left: 10px;
}
.lastpost br {
 display:none;
}
#titlecategorie {
   padding: 20px 10px 10px 80px;
   text-transform: uppercase;
}
#titlecategorie a {
   letter-spacing: 2px;
   color: #2e2c29 !important;
   font: 25px quicksand;
}
.statcat {
   display: inline-block;
   vertical-align: top;
   width: 273px;
   margin: 7px 7px 7px 45px;
   padding: 10px 0px 10px 0px;
   text-align: center;
   background: #2e2c29;
   color: #eeeeee;
   text-transform: uppercase;
   letter-spacing: 2px;
}
.forumdesc {
   height: 90px;
   overflow: auto;
   text-align: justify;
   margin-bottom: 20px;
   padding: 0px 10px 0px 50px;
   color: #2e2c29;
   font: 11px calibri;
   line-height: 10px;
}
/**** QEEL MYRDDIN ****/

#page-footer {
   margin-bottom: 10px !important;
   font: 9px roboto;
   color: #dad9df;
   padding: 5px;
   line-height: 0;
   position: absolute;
   text-align: center;
   background: #f6f5f8 !important;
   width: 100%!important;
}
#page-footer a {
   color: #dad9df;
   letter-spacing: 1px;
   font:9px roboto;
}

.welcometoi {
   font: 55px Hamilton;
   text-align: center;
   color: #c07c59;
   margin: 80px 0px -40px 0px;
}
#dernier_membre {
   text-align: center;
}
#dernier_membre strong {
   font: 30px DM Serif Display;
   text-transform: uppercase;
}
#dernier_membre a {
 color: #262929;
}
.totalqeel {
   background: #f1f0f4;
   padding: 10px;
   width: 100%;
   margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.blokco {
   width: 300px;
}
.blokco h1 {
   color: #262929;
   font: 20px DM Serif Display;
   text-transform: uppercase;
}
.totalusers{
   font: 8px roboto;
   color: #c07c59;
}
#jambon {
   width: 300px;
   padding: 10px 10px 10px 0px;
   height: 90px;
   overflow: auto;
   text-align: justify;
   font-size: 11px;
}
#jambon br {
display:none;
}
.bloklast {
   width: 230px;
}
.premier {
   width: 64px;
   height: 64px;
   padding: 16px 10px 10px 10px;
   background: #c07c59;
   text-align: center;
   color: #f6f5f8;
   margin: -35px auto;
   font: 10px roboto;
   vertical-align: middle;
   border-radius: 100%;
   transition: 1.2s linear;
   border: solid 2px #f6f5f8;
   box-shadow: 1px 1px 10px #f1f1f1;
}
#avatar_dernier_membre {
   width: 60px;
   height: 60px;
   overflow: hidden;
   border-radius: 100%;
   opacity: 0;
   margin: -42px -30px -30px -30px;
   position: absolute;
   transition: 1.2s linear;
}
.premier:hover #avatar_dernier_membre {
 opacity:1;
 transition-duration: 1s;
 transition-timing-function: ease;
}
#avatar_dernier_membre img {
 width:100%;
}
.groupsqeel {
   padding: 10px;
   text-align: center;
   margin-top: 40px;
}
.groupsqeel img {
 padding:0px 5px 0px 5px;
}
.bloklastco {
   width: 300px;
}
.bloklastco h1 {
   color: #262929;
   font: 20px DM Serif Display;
   text-transform: uppercase;
}
#mayonnaise {
   width: 300px;
   padding: 0px 10px 10px 0px;
   height: 90px;
   overflow: auto;
   text-align: justify;
}

#mayonnaise a {
font-size: 11px;
}

#jambon a {
font-size: 11px;
/**** FIN QEEL MYRDDIN ****/
}
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {
   overflow-x: hidden;
   padding: 0;
   margin-left: 62px !important;
}
::-webkit-scrollbar-thumb {
   background-color:#cb8a48;
}
::-webkit-scrollbar {
   width: 7px;
   height: 8px;
   border: 3px solid #eeeeee;
   background-color: #cb8a48;
}
.panel {
   box-shadow: none !important;
}
@font-face {
 font-family: ptlight;
 src:url('https://files.jcink.net/uploads/noctuary/Skin___Historia/FuturaPTLight.otf');
 format("opentype");
}
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px 12px 5px 12px;
background-color: #2e2c29;
 letter-spacing:1px;
font:9px arial;
text-transform: uppercase;  
color:#eeeeee;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
#page-footer {
   border-radius: 15px;
   text-transform: uppercase;
   font: 9px calibri;
   font-weight: 700;
   margin: 0px auto;
   padding: 1px;
   width: 100%;
   background: #eeeeee !important;
   color: black !important;
}
#page-footer a {
   color: black;
   font: 9px calibri;
   text-transform: uppercase;
}


[MlleAlys]

Bonjour,
Vous avez des codes redondants dans votre css :

- Ligne 251 :

Code:

#page-footer {
  margin-bottom: 10px !important;
  font: 9px roboto;
  color: #dad9df;
  padding: 5px;
  line-height: 0;
  position: absolute;
  text-align: center;
  background: #f6f5f8 !important;
  width: 100%!important;
}
#page-footer a {
  color: #dad9df;
  letter-spacing: 1px;
  font:9px roboto;
}

- Et ligne 420, quasiment le même :

Code:

#page-footer {
  border-radius: 15px;
  text-transform: uppercase;
  font: 9px calibri;
  font-weight: 700;
  margin: 0px auto;
  padding: 1px;
  width: 100%;
  background: #eeeeee !important;
  color: black !important;
}
#page-footer a {
  color: black;
  font: 9px calibri;
  text-transform: uppercase;
}

A priori, vous pouvez remplacer le premier par le deuxième, et ça devrait régler également votre problème de positionnement des liens de bas de page en supprimant position:absoulte;

[Argimpasa]

Alors pour le QEEL en ligne en deux parties, c'était bien ça, je vous en remercie.
Toutefois, j'ai maintenant une immense bande beige "derrière" le QEEL et les écritures sont toujours juxtaposées ainsi que les "box" des statistiques, ect...

[MlleAlys]

Concernant la longue bande beige des liens de bas de page (qui ne font pas partie du qeel), vous pouvez supprimer ce code :

Code:

#page-footer {
  border-radius: 15px;
  text-transform: uppercase;
  font: 9px calibri;
  font-weight: 700;
  margin: 0 auto;
  padding: 1px;
  width: 100%;
  background: #eee!important;
  color: #000!important;
}

Et le remplacer par :

Code:

#page-footer {
  margin: auto;
  background: #eee;
}

Pour les écritures juxtaposées, je ne comprends pas bien ce que vous voulez dire, et comment votre qeel est sensé être normalement :

Parlez vous du texte du qeel "bienvenue admin" qui ne devraient pas se superposer ?
Dans votre css, localisez ".welcometoi" et supprimez la marge de -40px qui lui est associées.

Parlez vous des 3 blocs en dessous, dont le dernier est en dessous des autres au lieu qu'ils soient tous les uns à côté des autres ?

[Argimpasa]

Merci ^^
Pour les écritures, j'aurai du m'en douter mais pour les blocs, j'ai supposé que cela venait de la taille de mon forum puisque le qeel devrait ressembler à ça :

Je pense donc qu'il faudrait juste que je réduise leurs tailles mais avant de faire une erreur, est-ce bien la bonne procédure ?

[MlleAlys]

avec le flex on peut faire autrement :

- Localisez ce code :

Code:

.totalqeel {
  background: #f1f0f4;
  padding: 10px;
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

- Remplacez-le par :

Code:

.totalqeel {
  background: #f1f0f4;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  margin-top: 27px;
}

- localisez ce code :

Code:

.bloklast {
  width: 230px;
}

- remplacez-le par :

Code:

.bloklast {
  flex-grow: 1;
}

[Argimpasa]

Je retiens pour le flex. C'est effectivement plus pratique ^^

Merci infiniment de votre aide.

Je mets que l'aide est terminée.