Cadre autour de la zone "Dernier message" via le tutoriel

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

Résolu Cadre autour de la zone "Dernier message" via le tutoriel

Message par Offrande le Dim 17 Aoû 2014 - 1:18

Bonjour à tous ::fleur:: 

J'ai récemment suivant ces deux tutoriel : 
Suppression des colonnes "Sujets" et "Messages"
Mettre un cadre dans la zone "Dernier Message"

Je souhaiter donc bien mettre un cadre autour des dernier messages mais j'ai voulut garder en voyant le résultats la citation "xxx messages dans xxx sujets" au dessus de la descriptions de mes forums. J'ai donc tenter par moi même de mettre une class autour de la zone de dernier message pour y déposer le cadre mais cela ne fonctionne pas :/ et je ne voie pas ou j'aurais pus faire une erreur. 

Voila mon 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>
      
      <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">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         
                  <!--ombre de sujets et de reponse-->
                  
               <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} messages dans {catrow.forumrow.TOPICS} sujets.</td>
                 </tr>
                 </tbody></table>
                  
                  <!--fin de la modification par forulactif tutoriel-->
                  
                  
                  
         <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>
          
          
      <!--ajout du cadre dernier message-->
          <div class="cadre1">
      
      <td class="row3 over" align="center" valign="middle" height="50">
            <!-- 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>
      </td>
          </div>
          <!--fin ajout du cadre dernier message-->
          
          
          
   </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 voila la CSS lié: 
Code:
/*fond cadre derniers messages*/
.cadre1 {
background-color: #000!important;
}

Si quelqu'un pouvait m'aider à réaliser ceci j'en serais très heureuse mais j'aimerais beaucoup que l'on puisse m'expliquer ou se trouver ma faute pour pouvoir évoluer à l'avenir :/ Merci d'avance de votre aide ::fleur::


Dernière édition par Offrande le Dim 17 Aoû 2014 - 12:31, édité 1 fois

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre autour de la zone "Dernier message" via le tutoriel

Message par [Nihil] le Dim 17 Aoû 2014 - 10:47

Bonjour Offrande,

Le problème vient que dans ton code la div est autour de la balise td, alors qu'elle devrait être à l'intérieur. C'est une particularité des tableaux. Tu peux en apprendre plus en lisant ce sujet : Apprendre à faire un tableau.

Notamment ce passage là :
@Tech a écrit:♣ Les td (cellules) ne doivent pas se balader dans le code, elles se trouvent toujours dans un tr (ligne).


Ici ta balise td (cellule) ne se trouve pas dans un tr (ligne) mais dans une div. Cela cause un problème et ta div passe tout simplement à la trappe.
Code:
<!--ajout du cadre dernier message-->
<div class="cadre1">

    <td class="row3 over" align="center" valign="middle" height="50">
        <!-- 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>
    </td>
   
</div>
<!--fin ajout du cadre dernier message-->

Devrait plutôt être :
Code:
<td class="row3 over" align="center" valign="middle" height="50">
    <!--ajout du cadre dernier message-->
    <div class="cadre1">
        <!-- 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>
    </div>
    <!--fin ajout du cadre dernier message-->
</td>


Cela était expliqué dans le tutoriel Phpbb2: Mettre un cadre dans les derniers messages dans la 3ème étape de la modification des templates  Mr. Green  :
@Anzu a écrit:On met une div dans le td autour des éléments, avec une class qu'on appellera "cadre1" et qui renverra à notre css.

Dis moi si cela fonctionne bien  Like a Star @ heaven 

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre autour de la zone "Dernier message" via le tutoriel

Message par Offrande le Dim 17 Aoû 2014 - 12:31

Bonjour ::fleur:: 
Merci beaucoup pour la réponse et également pour l'explication j'ignoré que cela fonctionner ainsi, j'y penserais à l'avenir et tâcherais de ne pas oublier ton conseil! Merci encore une fois. Cela as donc parfaitement marcher Smile 

Je te souhaite une très bonne journée ::fleur::

Offrande
*****

Féminin
Messages : 534
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

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


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