Le dernier message d'un forum ne s'affiche pas

[Shiyami]

Bonjour, bonsoir à vous !
Aujourd'hui j'étais en train de coder un forum : http://richharassment.forumactif.com/
J'ai essayé pendant une heure de régler le soucis du dernier message qui ne s'affichait pas (quand vous passez votre souris sur la flèche). En fait, tout se passe bien quand vous passez votre souris sur la flèche : il y a bien un rectangle qui s'agrandit et la flèche qui se déplace, mais pas de dernier message dans le rectangle qui s'est agrandi.
Par ailleurs, il est sensé y avoir une flèche dans chaque forum... Or, là, elle n'est présente que dans le premier...

Les templates index_box :

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 --><table class="forumline" width="100%"  border="0" cellspacing="1" cellpadding="0">
 
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"/>
<div class="titCA">{catrow.tablehead.L_FORUM}</div>
  
 
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
<div class="corCA"><br clear="all"/>
  <div class="corFO">
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 
 <!-- BEGIN inc -->
 
 <!-- END inc -->
                    <div class="imgFO"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
                    </div>
                    <div class="lsMSGFO">
                      <div>
                        <span class="lmsg">{catrow.forumrow.LAST_POST}</span>
                        <!-- BEGIN ads -->
                        <span class="lmsg"><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a><br />
                    {catrow.forumrow.ads.DATE}<br />
                      {catrow.forumrow.ads.LOCATION}
                        <!-- END ads -->
                        </span>
                      </div>
                      <span class="triFO"></span>
                    </div>
                    <div class="blocFO"><a href="{catrow.forumrow.U_VIEWFORUM}" class="titFO">{catrow.forumrow.FORUM_NAME}</a>
                      <div class="descFO">{catrow.forumrow.FORUM_DESC}</div>
                    </div>
          
          

 
 <!-- BEGIN switch_moderators_links -->
 
 <!-- END switch_moderators_links -->
 
 
            
            
            
            <!-- BEGIN avatar -->
            
            <!-- END avatar -->

 
 
          </div>
 <!-- END forumrow -->

 <!-- BEGIN catfoot -->
 
 <!-- BEGIN inc -->
 
 <!-- END inc -->
 
          
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
                    
          
<br clear="all"/></div>
<img src="{SPACER}" alt="" height="5" width="1" /></table><!-- END tablefoot --><!-- END catrow -->

Le CSS :

Code:

/* CATEGORIES */
.titCA {width:94%;background-color:rgb(146,178,166);padding:3%;text-align:center;border-bottom:10px solid white;}
.titCA h2 {color:white;font-family:'Lora', serif;font-weight:bold;font-size:20px;text-transform:uppercase;border:1px solid white;padding:12px;}
.corCA {width:800px;margin:auto;padding:2%;}


.corFO {width:400px;margin:0 15px 10px!important;padding:0;height:165px;overflow:hidden;border-bottom:10px solid white;}
.imgFO {float:left;height:165px;width:10%;}
.imgFO img{height:165px;width:100%;}

.blocFO {float:left;width:35%;padding-left:5%;background-color:rgb(233,248,245)!important;height:165px;}

/* BANDE DERNIER MESSAGE */
.lsMSGFO {
position:absolute; z-index:3; margin-left:90px;
height:165px; width:15px;
background:rgb(204,214,219);  /* MODIFIABLE */
}
/* TRIANGLE DERNIER MESSAGE */
.lsMSGFO .triFO{
position:absolute; margin-left:0px; margin-top:0px;
width:0; height:0; border-style:solid; border-width:82px 0 82px 50px; border-color:transparent;
border-left-color:rgb(204,214,219); /* MODIFIABLE */
transition:all 0.6s linear; -webkit-transition:all 0.6s linear;
}
.lsMSGFO:hover .triFO{
margin-left:200px;
}
/* CONTENU DERNIER MESSAGE */
.lsMSGFO div {
position:absolute; margin-left:-7px;
width:0px; height:155px; padding:5px; overflow:hidden;
color:rgba(0,0,0,0); font-size:12px; text-transform:uppercase;
background:rgb(204,214,219); /* MODIFIABLE */
transition:all 0.6s linear; -webkit-transition:all 0.6s linear;
}

.lsMSGFO:hover .lmsg {width:200px!important;font-size:12px!important;color:black!important;}
.lsMSGFO:hover div {
width:200px; padding:5px;
text-align:center; font-size:11px; text-transform:uppercase; color:black!important; /* MODIFIABLE */
}

.titFO {text-decoration:none;padding-top:5px;font-family: 'Dancing Script', cursive;font-size:25px;color:black;transition:color 0.5s ease-in-out;}
.titFO:hover {text-decoration:none!important;color:rgb(199,124,130)!important;}

.descFO {width:87%;padding-left:6%;padding:3%;font-style:italic;font-size:12px;font-family:arial;background-color:rgba(255,255,255,0.3);overflow:auto;
height:100px;text-align:justify;}

Merci d'avance pour vos réponses !
Si vous souhaitez plus de précisions ou d'explications, n'hésitez pas !

[Lixyr]

Bonsoir,

A tout hasard, avez-vous regardé du côté de la configuration ?
Panneau > Affichage > Page d'accueil > Structure et hiérarchie
Puis tout en bas : Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui

[Shiyami]

Bonjour !
Normalement, oui il est coché !

Le soucis venait d'ici :

Code:

.lsMSGFO {
position:absolute; z-index:3; margin-left:90px;
height:165px; width:15px;
background:rgb(204,214,219);  /* MODIFIABLE */
}

Le position absolute réunissait toutes les flèches/triangles au même endroit ce qui donnait l'impression de n'en avoir qu'une seule alors qu'en fait, elles étaient toutes là. Je l'ai remplacé par un float:left !
Merci beaucoup

[Lixyr]

Bonjour,

Le css absolute était bien employé, dans ce cas.
Pour qu'il fonctionne, il faut simplement rajouter "position: relative" au parent. ^^

[Shiyami]

Ah d'accord x)
Merci beaucoup !!