CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Problème de catégories en onglets. | |
| Moony
{ Membre }
Messages : 10
| Bonjour/Bonsoir.
Voilà, ça fait maintenant 2h que je me bats avec le template et le css afin de résoudre un petit problème avec un code pour que mes catégories apparaissent sous forme d'onglets. J'ai beau chercher comment y remédier, mon niveau en codage ne doit pas être suffisant pour régler ce problème, alors je viens demander de l'aide.^^
Peu importe ce que je fais, j'obtiens toujours ce résultat :
- Spoiler:
Comme vous pouvez le constater, tout se passe très bien pour le premier onglet xD Mais les autres se superposent sous forme de texte et même pas sous forme d'onglet, rien...
Alors voici le template du forum.
- 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="left"> <ul class="onglet">
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">PREFACE</li> <li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">GESTION</li> <li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">HOGWARTS</li> <li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">THE WORLD</li> <li onClick="change_cat(4);" class="onglet_nactif" id="cat_4">HAVE FUN</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_inactif'; 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="forumline" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="forumline" 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 voici le css :
- Spoiler:
- Code:
-
ul, li{ list-style: none; } .text { color#046380; cursor:pointer; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:1200px; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-22px; 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 { float: left; padding: 2px 10px; margin-right: 5px; margin-bottom: -1px; background-color : #050404; width:80px; /*Largeur de l'onglet étant actif*/ height:40px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; -moz-border-radius: 10px 10px 0 0; }
.onglet_inactif { float: left; padding: 2px 10px; margin-right: 5px; margin-bottom: -1px; background-color : #050404; /*URL de l'onglet étant inactif*/ width:80px; /*Largeur de l'onglet étant inactif*/ height:40px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; -moz-border-radius: 10px 10px 0 0 }
De toute évidence, un truc cloche xD mais je ne sais pas quoi... si ça vient juste c'est pas grand-chose, mais bon...^^ Je remercie d'avance toute personne qui tentera de m'aider ! =)
| | |
| | | Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Bonjour ^^ Ton problème est-il toujours d'actualité? S'il a été résolu je te prie d'éditer ton premier message et de cocher l'icône Merci | | |
| | | Moony
{ Membre }
Messages : 10
| Oui, il est toujours d'actualité.
| | |
| | | Espeon
Administrateur
Messages : 1819
| Bonjour ! L'erreur ne provient pas du CSS (qui devrait afficher correctement l'effet) mais du HTML de ton template. En fait, les onglets sont mal nommés (t'as du ripper sur le clavier, oublier le i de inactif et copier/coller le tout ). Voici une bonne version du template, dis-moi ce que ça donne ! - 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="left"> <ul class="onglet">
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">PREFACE</li> <li onClick="change_cat(1);" class="onglet_inactif" id="cat_1">GESTION</li> <li onClick="change_cat(2);" class="onglet_inactif" id="cat_2">HOGWARTS</li> <li onClick="change_cat(3);" class="onglet_inactif" id="cat_3">THE WORLD</li> <li onClick="change_cat(4);" class="onglet_inactif" id="cat_4">HAVE FUN</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_inactif'; 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="forumline" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="forumline" 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 --> | | |
| | | Moony
{ Membre }
Messages : 10
| J'étais sûre que c'était lié à un truc tout con, mais à ce point... XD Merci beaucoup en tout cas, mon problème est résolu.
Bonne journée.
| | |
| | | Espeon
Administrateur
Messages : 1819
| Ce genre d'erreur ça arrive même aux meilleurs t'as pas à t'en faire xD
Bonne journée à toi ! | | |
| | | L
{ Membre actif }
Messages : 867
| L'icône résolu étant cocher,je déplace | | |
| | | Contenu sponsorisé
| | | | | Problème de catégories en onglets. | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|