Problème de liens "plus cliquable"

[KIRI.]

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

[Teurancher]

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

Code:

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

[KIRI.]

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

[Teurancher]

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

[KIRI.]

Ah bah si tu sais aussi comment faire, je suis preneuse, merci

[Teurancher]

Premier essai:

Code:

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


[KIRI.]

Aucun effet pour le 1er essai ^^

[Teurancher]

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 */

[KIRI.]

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