Problème avec les sous-forums

[Sara]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 12.02.2023
Lien du forum : http://miroirdesreves.forumactif.com

Description du problème

Bonjour,

Je viens de m'apercevoir que certains sous-forums dépassent du codage des catégories, serait-il possible de résoudre ce problème ?

HTML

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
      <center>
        <div class="fondcateg_heavtrois"><div class="titrecateg_heavtrois">{catrow.tablehead.L_FORUM}</div>
        <!-- END tablehead -->
        <!-- BEGIN forumrow -->
        <div class="wrap-forum">
          <div class="titreforum_catgheavtrois"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
          <div class="blocmess_catgheavtrois">{catrow.forumrow.LAST_POST}</div>
          <div class="sujetmessage_catgheavtrois">{catrow.forumrow.TOPICS} {L_TOPICS} : {catrow.forumrow.POSTS} {L_POSTS}</div>
          <div class="blocimg_catgheavtrois"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
          <div class="blocdescr_catgheavtrois">{catrow.forumrow.FORUM_DESC}</div>
          <div class="titresousforum_catgheavtrois">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        </div>
 
      <!-- END forumrow -->
  <!-- BEGIN catfoot -->
          <!-- END catfoot -->
 
  <!-- BEGIN tablefoot -->
        </div></center>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS

Code:

/*Début catégories*/
.fondcateg_heavtrois{width: 800px;
  background: #EEDBE3;
  height: auto;
  margin: 10px 0px;
}
.titrecateg_heavtrois{width: 800px;
  height: 30px;
  background: linear-gradient(90deg,#beddeb, #d2ceed);
  text-align: center;
  margin:auto;
  display: flex;
}
.titrecateg_heavtrois h2{font-family: 'Orelega One', cursive;
  color: #434450;
  font-size: 22px;
  margin:auto;
}
.wrap-forum{width: 800px;
  margin: auto;
  height: 145px;
  position: relative;
}
.titreforum_catgheavtrois{width: 460px;
  height: 30px;
  font-family: 'Orelega One', cursive;
  text-align: center;   
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.titreforum_catgheavtrois a{text-decoration: none;
  color: #6D659F!important;
  font-size: 20px;
} 
.blocmess_catgheavtrois{width: 200px;
  height: 70px;
  background: #FBEAE9;
  padding-top: 15px;
  position: absolute;
  top: 30px;
  left: 10px;
  font-size: 13px;
}
.blocmess_catgheavtrois a{text-decoration: none;
  color: #434450!important;
}
.blocmess_catgheavtrois strong{font-family: 'Cinzel', serif;
  font-size: 16px;
}
.sujetmessage_catgheavtrois{width: 200px;
  height: 20px;
  background: linear-gradient(90deg,#beddeb, #d2ceed);
  position: absolute;
  top: 115px;
  left: 10px;
  font-size: 12px;
  color: #434450;
}
.blocdescr_catgheavtrois{width: 470px;
  height: 75px;
  background: #FBEAE9;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-align: justify;
  position: absolute;
  top: 30px;
  left: 220px;
  overflow: auto;
  padding: 5px;
}
.titresousforum_catgheavtrois{width: 565px;
  height: 20px;
  background: linear-gradient(90deg,#beddeb, #d2ceed);
  font-size: 0;
  position: absolute;
  top: 115px;
  left: 220px;
  text-align: justify;
  padding-left: 5px;
  display: flex;
}
.titresousforum_catgheavtrois a{font-size: 12px;
  color: #434450!important;
  margin: auto 4px;
}
.blocimg_catgheavtrois{width: 80px;
  height: 85px;
  position: absolute;
  top: 30px;
  right: 10px;
}
.blocimg_catgheavtrois img{width: 80px;
  height: 85px;
}
/* Fin des catégories*/

Merci d'avance pour votre aide,

Sara.

[MlleAlys]

Bonjour,
Il me semble que c'est la jumpbox qui élargit les pages des forums, qui débordent donc du fond.
Vous pouvez limiter leur largeur avec un code css de ce genre :

Code:

form[name="jumpbox"] select {
  max-width: 170px;
}

[Sara]

Bonjour MlleAlys

Merci pour votre aide ! Pourriez-vous juste me dire où je peux mettre ce code dans le CSS, s'il vous plaît ? Est-ce qu'il a une place spécifique dans le codage des catégories ?

[MlleAlys]

Dans la feuille de style du forum :
Affichage > couleurs & css > onglet feuille de style css ;
Rendez-vous tout en bas de la feuille de style si vous avez déjà des codes, passez quelques lignes, collez le nouveau.

[Sara]

Merci mais ça n'a rien changé à première vue :/

Le souci persiste et est visible ici : https://zupimages.net/up/23/06/cuja.png

[MlleAlys]

Ah pardon, nous ne parlions pas de la même chose, j'avais un autre débordement.
Tout dépend de ce que vous souhaitez à la place : une ligne bleue plus haute, quitte à ce qu'elle ne soit plus à la même hauteur que celle à gauche ? Les deux plus hautes, quittes à ce qu'elles ne soient plus à la même hauteurs que celles des autres forums ? Une barre de défilement, qui risque d'être minuscule ?

Pour la petite barre de défilement, localisez dans votre css le code suivant :

Code:

.titresousforum_catgheavtrois {
  width: 565px;
  height: 20px;
  background: linear-gradient(90deg,#beddeb,#d2ceed);
  font-size: 0;
  position: absolute;
  top: 115px;
  left: 220px;
  text-align: justify;
  padding-left: 5px;
  display: flex;
}

Remplacez par :

Code:

.titresousforum_catgheavtrois {
  text-align: left !important;
  width: 565px;
  height: 20px;
  background: linear-gradient(90deg,#beddeb,#d2ceed);
  overflow: auto;
  position: absolute;
  top: 115px;
  left: 220px;
  padding-left: 5px;
}

[Sara]

Je suis désolée de ne pas l'avoir précisé, je n'avais pas vu l'autre débordement =/

Je pense que c'est bien comme correction, vous en pensez quoi ?

[MlleAlys]

avantage : esthétique préservée ;
inconvénient : flèche peu visible, les utilisateurs peuvent ne pas la remarquer.

Autre possibilité : le bloc s'agrandit au survol :
Remplacez le code css précédent par :

Code:

.titresousforum_catgheavtrois {
  text-align: left!important;
  width: 565px;
  background: linear-gradient(90deg,#beddeb,#d2ceed);
  overflow: hidden;
  position: absolute;
  top: 115px;
  left: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px;
  line-height: 12px;
}

Puis ajoutez ce code-ci qui permet l'agrandissement au survol :

Code:

.titresousforum_catgheavtrois:hover {
  height: auto;
  white-space: normal;
}

inconvénient : la gestion du "survol" est forcément plus délicate sur un écran tactile

[Sara]

Merci, je préfère ça.

Je vais noter le précédant, en cas de problème si quelqu'un utilise un écran tactile

Mon problème est résolu !