Des catégories un peu spéciales

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

Résolu Des catégories un peu spéciales

Message par Invité Lun 27 Juin 2011 - 17:20

Bonjour,

J'ai remarqué sur plusieurs forums, ce genre de catégories : clique, que je trouve particulièrement belles et attrayantes. J'ai de bonnes connaissances en HTML et CSS, cependant, en Templates, je suis un peu (fort) nul... J'ai essayé de mon côté pendant quelques heures, c'est un vrai désastre >.<'. Je sais que dans le passé, il existait des tutoriels pour ce genre de catégories, je ne sais plus où, je pense sur CSSActif, mais comme il a fermé... J'ai aussi cherché dans le forum pour ce genre de catégories, mais je n'ai rien trouvé. J'aimerais savoir, si quelqu'un aurait l'amabilité et une connaissance assez développée pour m'aider ^^ .

Merci d'avance, bonne fin de journée ^^.
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 1:42

Bonsoir,

Remplacez votre template index_box 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="0" cellpadding="0">
   <tr>
      <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </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" colspan="3" valign="top" width="100%">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
      </td></tr><tr>
      <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">
         <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;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}<br/><br/>
{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</span></div>
      </td>
   </tr>
      </tr>
<tr><td colspan="2" height="1"class="espace"> </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 -->

et ajoutez dans la css :

Code:
a.forumlink {
display : block;
border-bottom : 2px solid #ff0000;
}

à personnaliser selon votre gout

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Des catégories un peu spéciales

Message par Invité Mar 28 Juin 2011 - 12:47

Bonjour,

Avant tout, un grand merci pour votre réponse. Ensuite, j'ai un petit problème de pixels et de séparations. Voici une capture d'écran de mes catégories actuelles : Clique. Vous voyez, les barres que j'ai rajoutées, les barres rouges, elles prouvent que les deux "tableaux" sont pas droit. Par exemple sur la première image que j'ai donné, on voyait bien que tout était vraiment bien droit, là, ce n'est pas très droit... (Je ne sais pas si c'est compréhensible, il faut que j'avoue que je ne suis pas très fort pour bien expliquer les problèmes >.<')

Mon code CSS actuel pour les catégories est:
Code:
a.forumlink{
 display: block;
 border-bottom: 2px solid #FF0000;
}

.cadredulast{
 background-color: #FBFBFB;
 padding: 2px;
 text-align: center;
 margin: 5px;
 border: 1px solid #FFFFFF;
 width: 200px;
 font-size : 10px;
}

.descriptionforums{
 height: 63px;
 width: 535px;
 text-align: justify;
 background-color: #FBFBFB;
 border: 1px solid #FFFFFF;
 padding: 2px;
}

Et mon 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="0" cellpadding="0">
  <tr>
      <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </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" colspan="3" valign="top" width="100%">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
      </td></tr><tr>
      <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">
          <div class="descriptionforums"><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></div>
    <td class="row3 over" align="center" valign="middle" height="1%"><div style="width :100%;">
        <div class="cadredulast"><span class="gensmall">{catrow.forumrow.LAST_POST}</div><div class="cadredulast">
{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</div></span>
      </div></td>
  </tr>
<tr><td colspan="2" height="1"class="espace"> </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 -->

Merci pour votre aide ! ^^
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 13:15

Cela vient de votre css si ils ne sont pas alignés

.cadredulast{
background-color: #FBFBFB;
padding: 2px;
text-align: center;
margin: 5px;
border: 1px solid #FFFFFF;
width: 200px;
font-size : 10px;
}

Voici le coupable ^^. Soit vous l'enlevez, soit vous le remettez dans votre class .descriptionforums pour les mettre au même niveau.

Dans votre template, repérez aussi ceci :
Code:
  <td class="row3 over" align="center" valign="middle" height="1%"><div style="width :100%;">
        <div class="cadredulast"><span class="gensmall">{catrow.forumrow.LAST_POST}</div><div class="cadredulast">
{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</div></span>
      </div></td>

Remplacez le valign="middle" par valign="top"

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Des catégories un peu spéciales

Message par Invité Mar 28 Juin 2011 - 14:12

Merci beaucoup <3, j'ai encore deux petites choses dont je voudrais obtenir une réponse... (Oui, je suis lourd, je sais...) Je pense que je n'ai pas grand-chose à expliquer, le screen parlera à ma place Wink : Clique. Merci d'avance ^^
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 14:18

Avez-vous enlever ou ajouter le margin ?
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Des catégories un peu spéciales

Message par Invité Mar 28 Juin 2011 - 14:19

Je l'ai ajouté, dois-je l'enlever ?
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 14:22

oui ^^ c'est ce qui fait votre espace

SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Des catégories un peu spéciales

Message par Invité Mar 28 Juin 2011 - 14:27

Si j'enlève "margin: 5px;" j'ai ceci : Clique. Ce qui n'est pas vraiment le résultat voulu...
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 14:44

Ainsi : comme ici, cela vous irez mieux ?
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Des catégories un peu spéciales

Message par Invité Mar 28 Juin 2011 - 14:50

Oui, s'il vous plaît *-*
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 14:53

Alors voici l'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="0" cellpadding="0">
      <tr>
          <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </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" colspan="3" valign="top" width="100%">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
          </td></tr>
    <tr><td colspan="3" height="1"class="espace1"> </td></tr><tr>
          <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">
              <div class="descriptionforums"><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></div>
        <td class="row3 over" align="center" valign="top" height="1%"><div style="width :100%;">
            <div class="cadredulast"><span class="gensmall">{catrow.forumrow.LAST_POST}</div><div class="cadredulast">
    {catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</div></span>
          </div></td>
      </tr>
    <tr><td colspan="3" height="1"class="espace2"> </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 -->

et la nouvelle css (qui remplace ce que vous m'avez donné plus haut)

Code:
    .cadredulast{
    background-color: #FBFBFB;
    padding: 2px;
 margin: 5px;
    text-align: center;
    border: 1px solid #FFFFFF;
    width: 200px;
    font-size : 10px;
    }

    .descriptionforums{
    height: 63px;
    width: 535px;
 margin: 5px;
    text-align: justify;
    background-color: #FBFBFB;
    border: 1px solid #FFFFFF;
    padding: 2px;
    }

.espace1 {
background-color : #ffff00;
height : 3px;
}

.espace2 {
background-color : #ff0000;
height : 3px;
}

toujours à personnaliser.

espace 1 correspond à la ligne sous le titre. espace 2 à la ligne entre chaque catégorie. Pour qu'elle apparaisse plus fine changer le height : 3px;, pour qu'elle appraisse de la meme couleur que le tour, enlever le background-color.

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Des catégories un peu spéciales

Message par Invité Mar 28 Juin 2011 - 15:05

Ouah, excellent ! Un tout grand merci <3 ! Vous vous y connaissez très bien en templates visiblement ! Je vais tout de suite mettre le sujet en résolu et cliquer sur le bouton "merci" ! Et encore merci !!
Anonymous

Invité
Invité


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

Résolu Re: Des catégories un peu spéciales

Message par SoraNoHime Mar 28 Juin 2011 - 15:06

Je vous en prie. Bonne journée Very Happy
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime 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