Informations des derniers messages cachées par une image

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Sam 22 Aoû 2015 - 18:07

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 Smile

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 ! I love you


Dernière édition par Marion Gaudefroy le Dim 6 Sep 2015 - 18:37, édité 1 fois
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachés par une image

Message par Feuilla' Sam 22 Aoû 2015 - 18:46

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

Feuilla'
Membre habitué

Messages : 1389
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Sam 22 Aoû 2015 - 20:50

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 ? Smile


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

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Sam 22 Aoû 2015 - 22:35

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Sam 22 Aoû 2015 - 23:37

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.
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Dim 23 Aoû 2015 - 0:31

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 ,
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 23 Aoû 2015 - 1:14

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.

Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Dim 23 Aoû 2015 - 13:14

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é.!
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 23 Aoû 2015 - 13:46

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
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Dim 23 Aoû 2015 - 14:29

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 ,

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 23 Aoû 2015 - 14:58

Ca marche, merci beaucoup ! Par contre il n'affiche pas l'icone des nouveaux messages et celui des sujets verrouilés qui sont :
Informations des derniers messages cachées par une image New1110 Informations des derniers messages cachées par une image Lock11
est-ce qu'il y a un moyen pour y remédier ?
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Dim 23 Aoû 2015 - 15:41

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 23 Aoû 2015 - 15:58

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

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Mar 25 Aoû 2015 - 12:23

Up s'il vous plaît Smile
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Mar 25 Aoû 2015 - 21:40

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 ??
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 30 Aoû 2015 - 13:10

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

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Mer 2 Sep 2015 - 21:21

Up, s'il vous plaît.
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Invité Mer 2 Sep 2015 - 22:03

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 6 Sep 2015 - 14:36

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

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations des derniers messages cachées par une image

Message par Marion Gaudefroy Dim 6 Sep 2015 - 18:37

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 !
Marion Gaudefroy

Marion Gaudefroy
*

Féminin
Messages : 36
Inscrit(e) le : 15/07/2015

http://anewstart.fra.co
Marion Gaudefroy a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum