lien sous forum qui se cache derrière l'image

[Yurei Paum Morino]

Bonjour,

J'ai modifier l'apparence de mon forum et depuis je rencontre un petit soucis malgré ma précaution d'avoir bien respecter les dimentions des anciennes images du forums. Mes liens de sous forum dans mes forums sont cacher par mon image qui montre s'il y a oui ou non un nouveau message. Je vous envoie l'image pour mieux illustrer mon soucis.



Quand le titre de ce sous forume est court aucun soucis c'est dès qu'il commence à être un peu plus long....

Je vous remercie pour votre aide.

[MlleAlys]

Bonjour,
La structure et le css ne semblent pas optimaux pour le résultat cherché.
Les sous-forums passent par dessus l'image parce que celle-ci est en position absolue, donc sa place est non prise en compte par les éléments statiques.
Pour avoir des éléments côtes à côtes, il vaudrait mieux passer par du flex, du grid ou même du inline-block plutôt que par du float et des marges et positionnements compliqués.
Le fait que l'image soit après les sous-forums dans le template, mais que vous souhaitiez l'afficher avant ceux-ci ne facilite pas non plus le positionnement ^^"
(du plus, ce n'est pas relié directement au problème énoncé, mais vous avez un bloc "forums" qui encadre chaque bloc "TheForum", ce qui me semble avoir peu d'intérêt, n'était-il pas sensé contenir l'ensemble des forums de la catégorie ? )

Bref, pourriez-vous partager votre template et votre css ? Nous devrions pouvoir arranger un peu tout ça

[Yurei Paum Morino]

Voici le CSS

CSS:

[Yurei Paum Morino]

J'ai déjà tenter des première modification mais ce n'est pas encore ça. Vous avez besoin de quel template? J'en ai modifier plusieurs...

[MlleAlys]

Celui "affichage des catégories"

[Yurei Paum Morino]

Le voici! 

template index_box:

[Yurei Paum Morino]

Est-ce que je peux en profiter pour demander comment modifier les couleur de ce que je viens d'entourer aussi svp? Je n'arrive pas à le trouver dans le CSS ... Merci encore pour votre aide!

1er image:

2eme image:

[MlleAlys]

Essayez ainsi (il y aura sans doute quelques petits réglages à faire encore en css) :

Template :

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>

<div class="categorieS">
<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="TopCategorie">
  <div class="CategorieTitle">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="MidCategorie">
  <!-- END tablehead -->
  
  <!-- BEGIN forumrow -->
  <div class="TheForum">
    
    <div class="ForumDescription genmed">{catrow.forumrow.FORUM_DESC}</div>
    
    <div class="ForumTitle"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    
    <div class="ForumStats gensmall">
      <img class="ForumIcone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      <div class="ForumSous" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
      <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');</script>
      <div class="ForumLast">
        {catrow.forumrow.TOPICS} Sujets et {catrow.forumrow.POSTS} Messages
        <br />{catrow.forumrow.LAST_POST}
      </div>
    </div>
  
  </div>
  <!-- END forumrow -->
  
  <!-- BEGIN tablefoot -->
  <div style="clear: both"></div>
</div>
<div class="FootCategorie"></div>
<!-- END tablefoot -->

<!-- END catrow -->
</div>

Css (juste la partie des catégories) :

Code:

              /*Début CATEGORIES*/

/*largeur des catégories*/
.categorieS {
  width: 865px;
  margin: auto; /*centrage*/
}

/* Corps Catégorie */
.TopCategorie {
  background: url('https://images2.imgbox.com/4a/6a/6fOMPPi0_o.png') top center no-repeat;
  background-size: 100%;
  height: 110px;
  margin-top: 15px; /* Annule le margin: auto pour la marge extérieure du haut */
}

.FootCategorie {
  background: url('https://images2.imgbox.com/b7/5f/JzCFO6ac_o.png') bottom center no-repeat;
  background-size: 100%;
  height: 110px;
}

/* Titre des catégories */
.CategorieTitle {
  padding-top: 20px;
  text-align: center;
}

/* Affichage des Forums */


/*affichage côte à côte des forums*/
.MidCategorie {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: stretch;
}


.TheForum {
  background-image: url('https://i.servimg.com/u/f59/19/33/44/09/20061011.png');
  width: 389px;
  margin: 20px;
  margin-bottom: 50px;
}

/* Description */

.ForumDescription {
  min-height: 100px;
}
.ForumDescription>br {
  display: none;
}
.ForumDImg {
  margin: 5px;
  float: left;
  border-right: 2px solid #053c5b;
  padding-right: 5px;
}

.ForumDText {
  max-height: 100px;
  overflow: auto; /*Barre de défilement */
  padding: 5px 5px 5px 0;
  text-align: justify;
  font-size: 11px;
}

/* Boite titre du Forum */
.ForumTitle a {
  display: block;
  background-color: #0b0e31;
  font-size: 12px;
  font-weight: bold;
  font-family: 'Georgia', 'Arial', serif;
  text-transform: uppercase; /* Lettres capitales */
  text-align: center; /*Texte centré */
  text-shadow: 0px 0px 2px #000; /* Ombre sur le texte */
  color: #ebe7e8 !important;
  transition: 1s all;
}
.ForumTitle a:hover {
  color: #887867 !important;
}


/*ensemble image + ss-forums + derneir message*/
.ForumStats {
  margin: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
}

/* Sous-Forums */
.ForumSous {
  max-height: 78px;
  overflow: overlay;
  text-align: right;
  padding-right: 25px;
  padding-left: 5px;
  text-transform: lowercase;
  flex-grow: 1;
  height: 75px;
}


/* Boite des Derniers Messages */
.ForumLast {
  background-color: #021925;
  border: 1px solid #053c5b;
  width: 140px;
  height: 68px;
  text-align: center;
  padding: 2px;
  box-shadow: 0px 0px 3px #000;
  border-radius: 5px;
  flex-shrink: 0;
  margin-left: 10px;
}

               /*Fin CATEGORIES*/


EDIT : Il vaudrai mieux ouvrir un sujet par problème, et attention il n'est pas autorisé de poster plusieurs messages à la suite en moins de 24h, pensez à éditer le message précédent si vous avez quelque chose à ajouter, au lieu de poster un nouveau message.
Pour ce problème de couleur, il me semble qu'il faut aller la modifier directement dans les options du champ du profil :
dans Utilisateurs et groupes > profil > modifier les champs voulus pour changer leur couleur.

[Yurei Paum Morino]

D'accord! Désolée ><

Je teste ce que vous m'avez envoyer pour mon second soucis je verrais l'autre plus tard. Pardon pour ma négligence. Je vous tiens informé si ça a régler mon soucis ou pas. 

Merci beaucoup

Edith: Le soucis est réglé! Merci beaucoup!