problème affichage catégorie/description

[energiesombre]

Bonjour !

Je monte actuellement un forum et je rencontre un souci qui me laisse plutôt perplexe, en gros en fonction de qui poste sur la catégorie la description n'est pas aligné au même endroit ... Je me retrouve ainsi avec des descriptifs décalés les uns des autres

photo à l'appuie pour comprendre mon problème :



voici mon css :

Code:

/* CATÉGORIES */


/*Titre de la catégorie*/

.cat_titre { background: url('https://images2.imgbox.com/7d/24/zbJMv4Sp_o.jpg');
    letter-spacing: 3px;
    margin-top: 40px;
    margin-bottom: 10px;
    padding: 9px 20px;
    text-transform: uppercase;
    text-align: right;
    height: 80px;
    border-radius: 0px;}

.cat_titre h2 {color: #fff;
    font-size: 9px;
    font-family: 'Neutro';
    font-weight: 300;
    padding-top: 20px;
}

/*Corps des catégories*/

.cat_container {  background: rgba(255, 255, 255, 0.5);
    outline: 1px solid #fcfcfc;
    height: 125px;/*à modifier seulement si vous la voulez plus haute*/
    padding: 10px;
    margin: 0 0 4px;
    display: flex;
    font-size:10px;
    font-color: #686868;
    margin-bottom: 20px;
}

/*Partie liens forums*/

.liensforums { font-size: 11px;
    overflow: auto;
    width: 18%;
    padding: 5px;
    text-align: left;}

#liensforums2 a {
display: block;
    text-transform: uppercase;
    font-size: 11px;
}

#liensforums2 a::before {
    color: #DD9F8C;
    content: " ● ";
}

/*Partie image new, no new etc.*/

.imgnew { position: relative;
    width: 50px;
    height: 50px;
    border: solid 10px #fafafa;
    border-radius: 50px;
    left: -100px;
    top: 40px;
    outline: 1px solid #ffffff;
}

.imgnew  img { border-radius: 50px;
    height: 40px;
    object-fit: cover;
    width: 40px;
    position: relative;
    bottom: 5px;
    right: 5px;}

/*Partie titre du forum et description*/

.titredescriforum {  
    width: 65%;}

/*titre forum*/
.titreforum { position: relative;
    right: 85px;
    top: 5px;
    text-transform: uppercase;
    text-align: left;}

.titreforum a {     font-size: 9px;
    letter-spacing: 1px;
    color: #bca5c2;
    font-family: 'Elsie';
    font-weight: 600;}

/*description*/
.descricat {    height: 70px; /*à modifier si vous changer la height de .cat_container*/
    margin-top: 20px;
    text-align: justify;
    border-image: url('https://i.servimg.com/u/f20/19/52/67/88/header11.jpg') 300;
    border-style: solid;
    position: relative;
    right: 85px;
    bottom: 5px;
    outline: 3px solid #ffffff;
    padding: 7px;
    overflow: auto;
  td.row1.over {
    text-align: center !important;
}
}

/*Partie nb de sujets et messages*/

.nbsujnotes {}

.nbsujnotes2 {
    color: #696969;
    font-size: 7px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 7px;
    right: 270px;
    white-space: nowrap;
    letter-spacing: 2px;
}

/*Partie dernier message posté*/

.derniermess {
        max-width: 184px;}

/* titre avec écrit last song*/
.ti_derniermess {       background: #fafafa;
    color: #696969;
    font-size: 8px;
    font-weight: 300;
    letter-spacing: 2px;
    font-family: 'Elsie';
    text-transform: uppercase;
    text-align: center;
    min-width: 150px;
    position: relative;
    top: 95px;
}

/*dernier avatar*/
.avatarcat {    background: transparent;
  float: left;
padding: 7px;
}
.lastpost-avatar img {
width: 30px;
height: 40px;
border-radius: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 5px;
}

.avatarcat img {
    width: 40px;
    height: 71px;
    object-fit: cover;}

/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
    margin: 5px 0 0;
    padding: 6px 0 7px 20px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
    text-transform: uppercase;
    height: 74px; /*à modifier si vous changer la height de .cat_container*/
    display: flex;
    line-height: 13px;
    flex-wrap: wrap;
    align-items: center;
    background: #ffffff;
    outline: 1px solid #ebebeb;
}

.txt_derniermess a {    font-size: 9px;
    font-family: 'Abril fatface';
    font-color: #000000;}

.txt_derniermess br {
content: "";
    margin: 2em 0 0 4em;
    display: block;
    font-size: 24%;
}

si quelqu'un peut m'aider à pointer du doigt mon erreur/oubli... merci beaucoup par avance !

[MlleAlys]

Bonjour,
Serait-il possible d'avoir un accès au forum ?

[energiesombre]

Bonjour,
Serait-il possible d'avoir un accès au forum ?

bien sur, voici le lien :

[MlleAlys]

Il y a des positionnements à retravailler pour simplifier l'affichage et mieux gérer ainsi leur taille.
Pourriez-vous partager votre template "affichage des catégories" ?

Et, également, y aura-t-il possiblement des sous-forums à afficher ? Où sont-ils sensés apparaitre ?

[energiesombre]

Il y a des positionnements à retravailler pour simplifier l'affichage et mieux gérer ainsi leur taille.
Pourriez-vous partager votre template "affichage des catégories" ?

Et, également, y aura-t-il possiblement des sous-forums à afficher ? Où sont-ils sensés apparaitre ?

voilà le template !

Code:

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cat_titre">
  {catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->

<!-- BEGIN forumrow -->
<div class="cat_container">
  <div id="cate" class="liensforums">
    <!-- BEGIN switch_moderators_links -->
      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
    <!-- END switch_moderators_links -->
    <span id="liensforums2">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </span>
  </div>
  <div id="cate" class="imgnew">
    <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
  </div>
  <div id="cate" class="titredescriforum">
    <div class="titreforum">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="descricat">
      {catrow.forumrow.FORUM_DESC}
    </div>
  </div>

  <div id="cate" class="nbsujnotes">
    <div class="nbsujnotes2">
      {catrow.forumrow.TOPICS} SUJETS | {catrow.forumrow.POSTS} messages
    </div>
  </div>
    
  <div class="derniermess">
      <div class="ti_derniermess">
        dernier message
      </div>
    <div class="avatarcat">
      <!-- BEGIN avatar -->
        {catrow.forumrow.avatar.LAST_POST_AVATAR}
      <!-- END avatar -->
    </div>
    <div class="txt_derniermess">
      <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}"><br>{catrow.forumrow.LATEST_TOPIC_NAME}</a>

      <!-- END switch_topic_title -->
   {catrow.forumrow.USER_LAST_POST}
  </div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->

 
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<div class="liens_pa">

 <!-- BEGIN switch_delete_cookies -->
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

c'est la toute première fois que je code donc j'avoue que je bidouille par ci par là ... Je dois créer pas mal de truc compliqué pour pas grand chose  

sinon, non il n'y aura pas de sous catégorie et merci beaucoup pour votre réactivité !

[MlleAlys]

Vous souhaitez garder l'espace entre la description et la partie "dernier message" ?

[energiesombre]

en soi je voudrais juste caler une image entre la description et la partie "dernier message", comme ici https://www.zupimages.net/up/22/47/qi70.png

je n'ai juste pas eu le temps de m'en occuper encore

je ne sais pas si ça répondra à votre question ou non, si jamais vous pouvez juste supprimer cet espace si vous le souhaitez, j'essaierai de caler la balise image après de mon côté

[MlleAlys]

Ok, une image qui sera différente en fonction du forum, mise dans le champ image de la description du forum ?
Ou qui sera mise dans le template, toujours la même pour tous les forums ?

[energiesombre]

une image qui sera différente en fonction du forum, c'est ça !

[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 »

[energiesombre]

up

[energiesombre]

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 »

[energiesombre]

up , problème pas encore résolu

[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 7 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.