Des catégories un peu spéciales
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Des catégories un peu spéciales
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 ^^.
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 ^^.
Invité- Invité
Re: Des catégories un peu spéciales
Bonsoir,
Remplacez votre template index_box par celui-ci :
et ajoutez dans la css :
à personnaliser selon votre gout
Cordialement.
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Des catégories un peu spéciales
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:
Et mon Template Index-box :
Merci pour votre aide ! ^^
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 ! ^^
Invité- Invité
Re: Des catégories un peu spéciales
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 :
Remplacez le valign="middle" par valign="top"
Cordialement.
.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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Des catégories un peu spéciales
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 : Clique. Merci d'avance ^^
Invité- Invité
Re: Des catégories un peu spéciales
Avez-vous enlever ou ajouter le margin ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Des catégories un peu spéciales
Je l'ai ajouté, dois-je l'enlever ?
Invité- Invité
Re: Des catégories un peu spéciales
oui ^^ c'est ce qui fait votre espace
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Des catégories un peu spéciales
Si j'enlève "margin: 5px;" j'ai ceci : Clique. Ce qui n'est pas vraiment le résultat voulu...
Invité- Invité
Re: Des catégories un peu spéciales
Ainsi : comme ici, cela vous irez mieux ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Des catégories un peu spéciales
Oui, s'il vous plaît *-*
Invité- Invité
Re: Des catégories un peu spéciales
Alors voici l'index_box modifié
et la nouvelle css (qui remplace ce que vous m'avez donné plus haut)
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.
- 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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Des catégories un peu spéciales
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 !!
Invité- Invité
Re: Des catégories un peu spéciales
Je vous en prie. Bonne journée
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Sujets similaires
» permissions spéciales
» Permissions spéciales?
» Permissions spéciales
» Permissions spéciales
» Permissions spéciales
» Permissions spéciales?
» Permissions spéciales
» Permissions spéciales
» Permissions spéciales
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum