Lexie
{ Membre }
Messages : 36
| Bonjour, je viens de voir que la commande de Yumii était terminée donc je tente ma chance ^^ - Objet de la commande: Catégories par onglets
- Détails: Je voudrais des catégories par onglets car j'ai essayais par moi même mais sa ne donne pas le résultat obtenu.
Voici mon template index_box :
- Spoiler:
- 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}
{CURRENT_TIME}
</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>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center"> <ul class="onglet">
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Preambule</li> <li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Epoque des maraudeurs</li> <li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Epoque du trio d or</li> <li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">Hors jeu</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3');
function change_cat(numero) { document.getElementById(nom_cat[anc_cat]).style.display = 'none'; document.getElementById(nom_cat[numero]).style.display = 'block'; document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif'; document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif'; anc_cat = numero; }
function capture_cat() { if(nom_cat[compteur_cat] == nom_cat[0]) {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">'); } compteur_cat++; }
//--> </script> <!-- BEGIN catrow --><!-- BEGIN tablehead -->
<script type="text/javascript"> <!-- capture_cat(); //--> </script>
<!-- FIN MODIF ONGLETS -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> <th nowrap="nowrap" width="50">{L_TOPICS}</th> <th nowrap="nowrap" width="50">{L_POSTS}</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"> </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"> <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}> <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> <!-- BEGIN forum_link_no --> <td class="row3" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.TOPICS}</span> </td> <td class="row2" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.POSTS}</span> </td> <td class="row3 over" align="center" valign="middle" height="50"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span> </td> <!-- END forum_link_no --> <!-- BEGIN forum_link --> <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td> <!-- END forum_link --> </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 --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Et mon css :
- Spoiler:
- Code:
-
.text { color:#075403; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Préambule,#cat_Epoque des Maraudeur,#cat_Epoque du Trio d'or,#cat_Hors Jeu /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:1px; font-size: 1px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #486603; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration: none; }
.onglet li { float:left; list-style-type:none; margin-bottom:-10px; text-decoration: none; font-size: 20px; color: #253B05; padding: 3px; border: solid 2px #486603; -moz-border-radius:30px; padding-right: 10px }
.onglet li:hover { text-decoration: none; font-size: 20px; color: #253B05; padding: 3px; border: solid 2px#486603; -moz-border-radius:30px; padding-right: 10px }
.onglet li a { display:block; text-decoration: none; font-size: 20px; color: #253B05; padding: 3px; border: solid 2px #486603; -moz-border-radius:30px; padding-right: 10px }
.onglet li a: hover { text-decoration: none; font-size: 20px; color: #253B05; padding: 3px; border: solid 2px #486603; -moz-border-radius:30px; padding-right: 10px }
.onglet_actif { background: url('http://zepload.com/images/1282834357_fond.png') no-repeat; /*URL de l'onglet étant actif*/ width:170px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('[IMG]http://i27.tinypic.com/30mnv2d.jpg[/IMG]') no-repeat; /*URL de l'onglet étant inactif*/ width:170px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
/*--- Titre des forums ---*/ a.forumlink:link, a.forumlink:visited { font-family: georgia; text-transform : uppercase; text-align: center; font-size: 100%; border-bottom: 5px solid #192902; color: #couleur; letter-spacing: 1px; display: block; -moz-border-radius:10px; }
a.forumlink:hover, a.forumlink:hover:visited { background-image: url("http://zepload.com/images/1282834357_fond.png"); color: #77A608; text-align: center; display: block; border-bottom: 5px solid#192902; -moz-border-radius:10px; }
u {border-bottom: 2px solid; /*--- taille du soulignement ---*/ border-color:#192902; /*--- couleur du soulignement ---*/ text-decoration: none; -moz-border-radius:6px; /*--- On arrondit notre soulignement ---*/ }
.fondavatar { background-color : #004666 ; border : 5px solid #192902 ; -moz-border-radius: 5px 5px 5px 5px }
- Aperçu:
- Spoiler:
La couleur bleu correspond au reste du forum. La couleur noir noir correspond à #6E910D La couleur de l'écriture est #253B05
- Autoriser un membre à répondre [] Oui [X] Non (En cochant oui, vous donnez le droit aux membres de CSSActif qui ne sont pas codeurs officiels de répondre à votre demande)
Merci d'avance à celui qui prendra ma commande. Bisous Lexie =) | | |
|
Lexie
{ Membre }
Messages : 36
| Commande toujours d'actualité. | | |
|
Kimy
{ Membre actif }
Messages : 1190
| Bonjour =)
Voilà ce que j'ai. C'est ce que tu souhaitais ?
| | |
|
Lexie
{ Membre }
Messages : 36
| Bonjour ! =)
Oui c'est ce que je souhaitais par contre, est ce que ce serait possible de rétrécir la taille de l'écriture et des onglets ? | | |
|
Kimy
{ Membre actif }
Messages : 1190
| Pour la taille de l'écriture, si tu regardes attentivement ton CSS tu remarqueras que tu as des - Code:
-
font-size: 20px; un peu partout, c'est cette valeur que tu dois baisser pour changer la taille. Et pour la taille des onglets tu dois jouer avec les width/height ici : - Code:
-
.onglet_actif { background: url('http://zepload.com/images/1282834357_fond.png') no-repeat; /*URL de l'onglet étant actif*/ width:160px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; cursor:pointer; }
.onglet_nactif { background:url('[IMG]http://i27.tinypic.com/30mnv2d.jpg[/IMG]') no-repeat; /*URL de l'onglet étant inactif*/ width:160px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } | | |
|
Lexie
{ Membre }
Messages : 36
| D'accord, merci beaucoup. Commande terminée | | |
|