[css/html] Dissocier l'image et la description des catégories dans les templates

[P-Summers]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://elwanrpg.forumactif.com/

Description du problème

Bonjour! Comme le titre du sujet l'explique, j'essaye de dissocier l'image des descriptions des catégories mais n'y arrive pas.

Sur la capture, vous pouvez voir qu'il y'a un vide à gauche des catégories. Dans le template, c'est supposé être l'espace qui contient les îcones New/No New avec un masque en css (je n'ai pas d'image New/No New, c'est pour ça qu'elle sont vides). Ce que j'aimerais faire, c'est remplacer ces images par l'image des catégories (que je personnaliserai à partir du menu de ces dernières). J'aimerai, cependant, garder la description là où elle est.

Voici mon template index_box.

Code:

<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Dancing+Script' rel='stylesheet' type='text/css' />
<link href="https://fonts.googleapis.com/css?family=Alegreya|Euphoria+Script|Roboto+Condensed&display=swap" rel="stylesheet">
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td class="liens_cate" align="center">
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> ▬ <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> ▬ <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<br />
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cate_title">
  {catrow.tablehead.L_FORUM}
</div>
<div class="cate_bloc">
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  <div class="cate_forum">
    <img class="old_new_lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    <div class="cate_forum_middle">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      <div class="forum_desc">
      <div class="forum_sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
       {catrow.forumrow.FORUM_DESC}
      </div>
    </div>
    <div class="cate_forum_last">
      <div class="forum_last_stats">
        Sujets:{catrow.forumrow.TOPICS} | Messages : {catrow.forumrow.POSTS}
      </div>
      <div class="forum_last_mess">
        {catrow.forumrow.LAST_POST}
      </div>
    </div>
  </div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->

CSS:

Code:

/************************************************** DÉBUT DES CATÉGORIES **************************************************/

/*Bloc des titres des catégories*/
.cate_title {
  width: 800px;
  height: 75px;
  padding-top: 10px;
  margin: auto;
  text-align: center;
  background-image: url('https://2img.net/r/hpimg15/pics/520024nuage.png');
  background-repeat: no-repeat;
  background-position: top center;
  margin-bottom: -10px;
}
/*Titres des catégories*/
.cate_title h2 {
  display: block;
  padding-top: 15px;
  height: 60px;
  margin: 0px;
  font-family: "Euphoria Script", cursive;
  text-shadow: 1px 1px 3px #E198BA;
  font-size: 55px;
  letter-spacing: 1px;
  color: #E49231;
}
.cate_title h2 img {
  margin-top: -25px;
  margin-left: 20px;
}
.cate_title h2 span {
  display: none;
}
a.nav img {
  display: none;
}


/*Bloc des catégories*/
.cate_bloc {
  background-color: #ffffff;
  width: 800px;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 10px;
  padding-top: 50px;
  padding-bottom: 1px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: #544b51;
}


/*Bloc des forums*/
.cate_forum {
  height: 100px;
  width: 800px;
  margin-bottom: 20px;
}


/*Image Old New Lock*/
.old_new_lock {
  float: left;
  margin-left: 15px;
  margin-top: 21px;
  width: 130px; /*Largeur des images*/
  height: 57px; /*Hauteur des images*/
}
/*Masque*/
.old_new_lock {
  -webkit-mask: url(http://www.aht.li/2552618/nuage.svg) center center / 130px 57px;
  mask: url(http://www.aht.li/2552618/nuage.svg) center center / 130px 57px;
}


/*Bloc gris du mileu*/
.cate_forum_middle {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  width: 420px;
  height: 53px;
  padding: 10px;
  padding-top: 17px;
  background-color: #e4e1e2;
  border-radius: 10px;
}

/*Titres des forums*/
.forumlink {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 28px;
  font-size: 28px;
  font-family: 'Alegreya', cursive;
  color: gray!important;
  font-weight: normal;
}
/*Titres survolés des forums*/
.forumlink:hover {
  color: #EDB0AC!important;
  text-decoration: none!important;
}
/*Désactiver les images des titres*/
.forumlink img {
  display: none;
}

/*Description des forums*/
.forum_desc {
  height: 53px;
  overflow-y: auto;
  padding-right: 5px;
  text-align: justify;
}


/*Bloc gris des statistiques et du dernier message*/
.cate_forum_last {
  position: relative;
  float: left;
  margin-top: 10px;
  width: 160px;
  height: 70px;
  padding: 5px;
  background-color: #F5E9F1;
  border-radius: 10px;
  text-align: center;
}
/*Statistiques*/
.forum_last_stats {
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 10px;
  padding-bottom: 3px;
  font-size: 9px;
  border-bottom: 1px dashed #DA3B73;
}
/*Police du dernier message*/
.forum_last_mess, .forum_last_mess a.gensmall {
  font-size: 11px;
  font-family: "Roboto Condensed", sans-serif;
}
/*Couleur des liens du dernier message*/
.forum_last_mess a {
  color: #E49231;
}


/*Les barres de défilement dans les catégories*/
.forum_desc::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
.forum_desc::-webkit-scrollbar-thumb {background:rgba(237, 176, 172, 1); height:30px; border-radius:30px;}
.forum_desc::-webkit-scrollbar-corner {background:none;}

/************************************************** FIN DES CATÉGORIES **************************************************/

Merci !

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[P-Summers]

Je me permets un petit up ! Des idées ?

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[P-Summers]

Un autre up...

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.