Problème de liens "plus cliquable"

2 participants

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

Résolu Problème de liens "plus cliquable"

Message par KIRI. Sam 19 Sep 2015 - 21:07

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la modification du template index_box
Lien du forum : http://testkiri.forumactif.org/

Description du problème

Bonjour,

J'ai suivi le tutoriel ici, puis j'ai moi même modifié tout ça pour que l'avatar apparaissent rogné lorsqu'on survole la case avec la souris. L'apparence souhaitée est là, seulement problème : on ne peut plus cliquer sur les liens (dernier sujet, membre ...)
Voici l'intégralité du template index_box modifié :
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>
      
   </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="2" 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="row1 over" align="center" valign="middle" height="50"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
      <td class="row2 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></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"><div style="width: 150px"><br><div class="cadm"><br>
            <!-- BEGIN avatar -->            <span class="avatar_dernier">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar --> <span class="dernier_post"><span class="gensmall">{catrow.forumrow.LAST_POST}</span><br><span class="gensmall">{catrow.forumrow.POSTS} s.o.s ◭ {catrow.forumrow.TOPICS} sujets </span></br> </div></div></td>
            </div>
   </tr>
   <!-- END forumrow -->
   <!-- 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 la partie du CSS qui va avec :
Code:
/*AVATAR DERNIER POST*/
.avatar_dernier { position:absolute; margin-top : -10px;}

.avatar_dernier {
display: block;
width: 150px;
height: 100px;
overflow: hidden;
opacity: .0;
-moz-opacity: .0;
-khtml-opacity: .0;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.avatar_dernier:hover {
opacity: .10;
-moz-opacity: .10;
-khtml-opacity: .10;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.dernier_post {
   margin-top : 8px;
}

Merci d'avance pour votre aide Mr. Green


Dernière édition par KIRI. le Dim 20 Sep 2015 - 16:04, édité 2 fois
avatar

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par Teurancher Sam 19 Sep 2015 - 21:52

Oy o/
Le CSS suivant réglera le problème:

Code:
.dernier_post {
    margin-top: 8px;
    z-index: 9999;
    position: relative;
}
Teurancher

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par KIRI. Sam 19 Sep 2015 - 22:02

Quelle rapidité et quelle efficacité ! Un grand merci à toi, ça fonctionne très bien Smile
avatar

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par Teurancher Sam 19 Sep 2015 - 22:04

A ton service. ^^
Si tu souhaites que l'image apparaisse quand même lorsque l'on survole le texte, fais-le moi savoir.
Teurancher

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par KIRI. Sam 19 Sep 2015 - 22:12

Ah bah si tu sais aussi comment faire, je suis preneuse, merci Mr. Green
avatar

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par Teurancher Sam 19 Sep 2015 - 22:45

Premier essai:

Code:
.cadm .dernier_post:hover .avatar_dernier { opacity: 0.10; }
Teurancher

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par KIRI. Sam 19 Sep 2015 - 22:56

Aucun effet pour le 1er essai ^^
avatar

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par Teurancher Dim 20 Sep 2015 - 13:07

Pfiou, ça aura le mérite d'être difficile, mais j'ai réussi à priori. x_x
J'en ai profité pour corriger ton template et éclaircir ton CSS.

Template 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">
          <tr>
              <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;{catrow.tablehead.L_FORUM}&nbsp;</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="2" 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="row1 over" align="center" valign="middle" height="50"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
              <td class="row2 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></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"><div style="width: 150px"><br /><div class="cadm"><br />
                    <!-- BEGIN avatar -->            <span class="avatar_dernier">{catrow.forumrow.avatar.LAST_POST_AVATAR} <span class="dernier_post gensmall">{catrow.forumrow.LAST_POST}</span><br /><span class="gensmall">{catrow.forumrow.POSTS} s.o.s ◭ {catrow.forumrow.TOPICS} sujets </span></span>
              <!-- END avatar -->
                    </div></div></td>
          </tr>
          <!-- END forumrow -->
          <!-- 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 -->


CSS:
Code:
/*AVATAR DERNIER POST - CORRIGÉ - DÉBUT */

.cadm {
  background-color: #000;
  border: 1px solid #14110F;
  font-family: Trebuchet MS;
  font-size: 8px;
  height: 100px;
  text-align: center;
  width: 150px;
}

.cadm span:hover .avatar_dernier {
  opacity: .10;
  -moz-opacity: .10;
  -khtml-opacity: .10;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.avatar_dernier {
  position:relative;
  margin-top : -10px;
}
       
.avatar_dernier {
  display: block;
  width: 150px;
  height: 100px;
  overflow: hidden;
  -moz-opacity: .0;
  -khtml-opacity: .0;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.avatar_dernier img {
  opacity: .0;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
       
.avatar_dernier:hover img {
  opacity: .10;
  -moz-opacity: .10;
  -khtml-opacity: .10;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
       
.dernier_post {
  margin-top: 8px;
  opacity: 1.8 !important;
  position: absolute;
  z-index: 999;
  right: 20px;
  top: 20px;
}

/*AVATAR DERNIER POST - CORRIGÉ - FIN */
Teurancher

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de liens "plus cliquable"

Message par KIRI. Dim 20 Sep 2015 - 16:03

C'est tout parfait ! Un grand grand merci à toi pour ton aide (et pour le bonus du template corrigé et du CSS plus clair) Very Happy
avatar

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. 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