Miss-Rara Nouveau membre
Nombre de messages : 19 Date de naissance : 30/10/1996 Age : 28 Date d'inscription : 23/03/2010
| Sujet: Problème onglets catégories Ven 31 Déc - 19:43 | |
| Bonsoir. Bon voilà, une amie et moi avons un forum, mais un problème au niveau des onglets de catégories survient ... Elle a fait des recherches, mais elle n'a rien trouvé malheureusement, je souhaite alors l'aider en vous demandant de l'aide ... * compréhensible ? x) * Citation: Bonjour j'ai un problème avec mes onglets :/ En fait les onglets marchent, mais j'ai déjà modifié le template pour que j'ai des bordures spéciales pour mon forum, donc celui implique le , mais le begin est déjà dans le code pour les onglets ( J'espère que vous comprenez :/ ) Donc cela fait un espace entre la bordure créée ( design ) et le reste du forum.TEMPLATE : - 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 onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">test1</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">test2</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">test3</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2');
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 --> <!-- Début de l'ajout du haut --> <div class="ajout_haut"></div> <!-- Fin de l'ajout du haut --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <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> <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> </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><!-- Début de l'ajout du bas --> <div class="ajout_bas"></div> <!-- Fin de l'ajout du bas --><!-- END tablefoot --><!-- END catrow -->
CSS : - Spoiler:
.text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Test1,#cat_test2,#cat_test3, /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('https://2img.net/h/oi30.tinypic.com/rbl7jm.jpg') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url(' ') no-repeat; /*URL de l'onglet étant inactif*/ width:100px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
.onglet_actif:hover { margin: 0px; padding: 0px; }
IMAGE DU RESULTAT : - Spoiler:
Merci d'avance et joyeuses fêtes ! | |
|