Informations des derniers messages cachées par une image

[Marion Gaudefroy]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://anewstart.fra.co

Description du problème

Bonjour

Voilà, j'ai une question à propos d'un sujet qui me pose aussi un peu problème, je m'explique : J'aimerais beaucoup que les informations de la colonne "derniers messages" comme par exemple le pseudo du posteur, la date et tout ce qui va avec, se retrouve invisible et visible seulement quand on passe la souris sur l'image.

D'abord j'aimerais savoir si c'est possible parce que de tous les tutoriels que j'ai vu j'en ai surtout vu qui demandait comment faire ceci avec le nombre de messages et dans nombre de sujets et ensuite comment je peux le faire. Si c'est possible, voilà mon template et mon css (cachés, visibles que si vous postez) :




Merci d'avance pour votre aide !

[Feuilla']

Bonjour,
ce sont des codes à insérer; j'en ai trouvé ici.
Bonne journée !

[Marion Gaudefroy]

Merci de votre réponse, je prends en compte mais comment puis-je l'adapter pour qu'il corresponde à ce que je demande ? Je comprends le css, mais dans les deux codes il y a un code à mettre dans les descriptions mais ce n'est pas les catégories que je veux modifier, est-ce que le css peut suffire ?


Je remets l'image car l'autre ne fonctionne pas; je parle de la partie tout à droite :

Spoiler:

[Invité]

bonjour , le code html devra être posé dans le Template index_box . ou plutôt adapté ,il donnera les class nécessaire,pour que le css fonctionne .

[Marion Gaudefroy]

Est-ce qu'il serait possible de m'expliquer comment je peux le faire s'il te plaît ? Je me doute bien que ce ne doit pas être une manipulation très compliquée mais je ne l'ai jamais vu alors je ne vois pas comment faire.

[Invité]

bon j'ai fait la modif Template ,et quelques modif css , cela reste a ajusté
(j'ai tenter de prendre les mesure sur votre forum)

quand cela sera en place sur votre forum,
par exemple >>les dimensions dans le css et les couleurs ,vous devriez vous en sortir ??

>>pour information voila la partie ou j'ai intégrer le code html de MlleAllys<<

Code:

<!--modif derniers dujet-->
        <div class="desc_img" style="background-image:url(URL DE L'IMAGE ICI);">
    <div class="frm_desc">
      <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
        </div>
    </div>
                </tr>
 
  <!-- END forumrow -->
 <!-- fin modif derniers sujet-->

remplacé votre Template par celui ci >>

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">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
       
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     
                    </span>
                </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} holotextes dans {catrow.forumrow.TOPICS} holophones.</td></tr></tbody></table>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <!--modif derniers dujet-->
        <div class="desc_img" style="background-image:url(URL DE L'IMAGE ICI);">
    <div class="frm_desc">
     
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
        </div>
    </div>
                </tr>
 
  <!-- END forumrow -->
 <!-- fin modif derniers sujet-->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

et voilaa le css >>

Code:

/**===css derniers sujet===**/
div.desc_img {
    width:161px; /*largeur description*/
    height:146px; /*hauteur description*/
    background-size: cover;
    position: relative; /*pour pouvoir positionner le texte au dessus*/
}
div.frm_desc {
    width:151px; /*hauteur description*/
    height: 138px; /*hauteur description*/
    padding: 5px; /*marge intérieure*/
    overflow: hidden; /*barre de défilement automatique*/
    background: grey; /*couleur de fond de la description*/
    position: absolute; /*pour placer par rapport au bloc desc*/
    top:0; /*position verticale*/
    left:0; /*position horizontale*/
    opacity:0; /*invisible ne tems normal*/
    transition: opacity 1s ease; /*effet de transition*/
}
div.frm_desc:hover {
    opacity:1; /*visible au survol*/
}
/**===css derniers sujet fin===**/

dans le Template il vous faudra placé votre image >>içi>>

Code:

<div class="desc_img" style="background-image:url(URL DE L'IMAGE ICI);">

bonne nuit ,

[Marion Gaudefroy]

Je viens d'essayer le code et de modifier le css à différentes reprises et ça ne "marche pas". Quand je passe la souris sur l'image ça me donne ça :

Spoiler:

Mais j'aimerais que quand je passe la souris sur l'image, l'image disparaisse et laisse les écritures sur un fond blanc sans une infobulle en dessous (donc une image qui se dédouble) et ce, malgré les modifications css.

[Invité]

bonjour ,donné moi le lien image qui est au dessus svp,si je comprend bien l'image qui affiche la nouvelle réponse doit s'éffacé.!

[Marion Gaudefroy]

Au passage de la souris, exactement mais il faudrait aussi que les autres icônes s'affichent de la même manière, quand il y a un nouveau message surtout.
https://i.servimg.com/u/f18/11/91/78/13/no_new11.png

[Invité]

ok , ont va remplacé le Template >>par celui ci >>

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">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
       
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     
                    </span>
                </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} holotextes dans {catrow.forumrow.TOPICS} holophones.</td></tr></tbody></table>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <!-- ======================================================-->
        <!-- debut --><!-- R-max -->
        <!--modif derniers dujet-->
       
      <!-- image news --> <div class="desc_img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        <!-- fin image news -->
    <!-- descrition nouvelle reponse --><div class="frm_desc">
      <!-- BEGIN avatar -->
            <div style="width:200px;height:auto;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        <!-- fin description nouvelle reponse -->
          </div></div>
          </td>
        </tr>
        <!-- END forumrow -->

 <!-- fin modif derniers sujet-->
<!-- fin --><!-- R-max -->
<!-- =================================================================-->

  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

et le css par >>celui ci>>

Code:

/**===========================================================================**/
/**===css R-max derniers sujet===**/
/**===l image===**/
div.desc_img {
    width:155px; /*largeur description*/
    height:57px; /*hauteur description*/
    background-size: cover;
    position: relative; /*pour pouvoir positionner le texte au dessus*/
}

/**===le fond ecrit===**/
div.frm_desc {
    width:157px; /*hauteur description*/
    height: 75px; /*hauteur description*/
    padding: 1px; /*marge intérieure*/
    overflow: auto; /*barre de défilement automatique*/
    background:white; /*couleur de fond de la description*/
    position: absolute; /*pour placer par rapport au bloc desc*/
    top:-10px; /*position verticale*/
    left:-2px; /*position horizontale*/
    opacity:0; /*invisible ne tems normal*/
    transition: opacity 1s ease; /*effet de transition*/
}
div.frm_desc:hover {
    opacity:1; /*visible au survol*/
}
/**===css R-max derniers sujet fin===**/
/**===================================================================**/

bon dimanche ,

[Marion Gaudefroy]

Ca marche, merci beaucoup ! Par contre il n'affiche pas l'icone des nouveaux messages et celui des sujets verrouilés qui sont :

est-ce qu'il y a un moyen pour y remédier ?

[Invité]

ça fonctionné avant la modif ??? ,car je n'est rien enlever ...

[Marion Gaudefroy]

J'en étais persuadé mais non. J'ai suivis les instructions de ce sujet : ici mais les changements ne se font pas... Comment je peux y remédier ? Parce que c'est assez gênant..

[Marion Gaudefroy]

Up s'il vous plaît

[Invité]

bonjour vous les avez déjà vu avant de modifier votre index_box ??
>certains en phpp2 ont déjà eu ce soucie d'affichage .
>avez vous essayer avec d'autre navigateur ??

[Marion Gaudefroy]

Oui, le changement d'image marchait très bien et peu importe le navigateur, rien ne change quand il y a un nouveau message de posté.

[Marion Gaudefroy]

Up, s'il vous plaît.

[Invité]

bonsoir ,
le problème et apparu après votre modification de template ou après ma modification ??

[Marion Gaudefroy]

Bonsoir.
Après la première modification, quand j'ai mis l'image sous les informations.

[Marion Gaudefroy]

Désolée du double poste mais mon problème est résolu, j'ai bien bidouillé et tout a bien. Merci de vos réponses et de votre patience !