Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15]

    Partagez
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 30 Mar 2010 - 9:43


    Vic n'est plus présent sur le forum et ne peut plus répondre à vos questions. Postez dans la rubrique "problème en codage" si vous voulez de l'aide.


    1) Présentation :

    Bonjours à tous,
    Dans ce tutoriel, nous allons apprendre à afficher nos catégories à l'aide d'onglets.

    Pour commencer, voici quelques exemples d'application de ce tutoriel, histoire de vous donner quelques idées :
    Voir un résultat sur forumactif.
    Voir un deuxième résultat sur forumactif.
    Voici un résultat mis en place sur un site.
    Voici un résultat plus complexe sur un site .


    Mon but n'est pas uniquement de vous fournir un code à modifier, mais aussi d'essayer de vous faire comprendre comment il fonctionne.
    J'ai donc mis à la disposition de tous les courageux, des explications plus complètes cachées sous des spoiler.


    Pourquoi utiliser un système d'onglets ?

    Quand un utilisateur possède plusieurs contenus, il peut souhaiter en afficher un à la fois. (Pour prendre moins de place par exemple)
    Pour ce faire, il existe plusieurs solutions, dont utiliser des onglets. Ils ont l'avantage d'être faciles à mettre en place et faciles à utiliser.
    C'est pourquoi je les ai choisis pour ce tutoriel.


    Comment fonctionne ce système ?

    Explications:

    Comment fonctionne ce système ?

    Nous allons le voir à l'aide d'un petit exemple.
    Nous possédons 5 contenus les uns au dessus des autres (c'est le cas le plus courant) :


    Contenu 1
    Contenu 2
    Contenu 3
    Contenu 4
    Contenu 5


    Que se passe t'il si nous rendons invisible (propriété CSS "display : none") le contenu 1 et le contenu 4:


    Contenu 2
    Contenu 3
    Contenu 5


    Explications : Quand un contenu est invisible, il ne prend plus de place (c'est un peu comme s'il n'existait plus sur la page).
    Le contenu 1 est invisible, il ne prend plus de place, donc le contenu 2 se retrouve tout en haut.
    Le contenu 3 est toujours derrière le contenu 2.
    Le contenu 4 est aussi invisible, donc le contenu 5 monte derrière le contenu 3.

    Dans ce tutoriel nous souhaitons afficher un seul contenu à la fois. Il faudra donc rendre invisible tous les contenus sauf celui que l'on souhaite voir.

    Si vous avez du mal à visualiser ce qui se passe, voici une manipulation toute simple :
    - Prennez 5 boites (elles représenterons nos 5 contenus)
    - Empilez les 5 boites.


    boite 1
    boite 2
    boite 3
    boite 4
    boite 5


    - Retirez la boite 5 : toutes les boites descendent d'un rang.
    - Retirez la boite 2 : la boite 1 descend d'un rang.




    boite 1
    boite 3
    boite 4


    C'est exactement ce qui se passe quand on rend des contenus invisibles, sauf que dans une page internet les éléments sont attirés vers le haut.





    2) Le HTML :

    Afin de pouvoir mettre en place ce système, il vous faut au préalable choisir de séparer les catégories. Pour cela, vous devez aller à cet endroit :
    Panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie

    Choisissez l'un des trois formats dans "Séparer les catégories sur l'index"

    Pourquoi est-ce nécessaire ?
    Si l'on utilisait l'un des trois autres formats, les catégories feraient partie d'un même bloc. Elles formeraient donc un unique contenu, ce qui n'est pas ce que nous souhaitons.
    Le format que l'on vient de choisir, nous permet de séparer les catégories. Elles formeront donc chacune un contenu que nous pourrons choisir d'afficher ou non.


    Modifications du template
    Maintenant, nous allons modifier le template des catégories (index_box) afin d'ajouter nos onglets. Pour cela, nous allons aller à cet endroit :
    Panneau d'administration > Affichage > Templates > Général > Index_Box

    Pour vous faciliter la tâche, un générateur d'onglets a été mis au point : Générateur d'onglets (Fait par Onyx pour remplacer celui de Vic qui ne fonctionnait plus).

    Modifications avec le générateur d'onglets :
    Modifications avec le générateur:
    Si votre template est celui de base :
    - Allez sur la page du générateur de code;
    - Choisissez vos options;
    - Validez;
    - Remplacez le contenu de votre template par le code obtenu.


    Mon template à déjà été modifié. Que dois-je faire ?

    Pas de panique, le générateur peut aussi mettre à jour un template déjà modifié ^^ Dans cette situation, suivez ces instructions :
    - Sauvegardez votre template sur votre ordinateur (pour pouvoir le récupérer en cas de problème);
    - Allez sur la page du générateur de code;
    - Choisissez vos options;
    - Insérez votre template dans la zone de saisie "Votre propre template";
    - Validez;
    - Remplacez le contenu de votre template par le code obtenu.

    Si après cette manipulation, vous percevez une quelconque erreur, remmettez votre ancien template et lisez le spoiler ci-dessous.

    Et voilà, vous avez fini la partie HTML ^^

    Modifications manuelles (sans le générateur d'onglets) :
    Modifications manuelles:
    Nous allons décomposer en plusieurs étapes :

    Création des contenus

    Spoiler:

    Dans votre template, suivez ces étapes :

    Tout d'abord, remplacez ceci :
    Code:
    <!-- BEGIN tablehead -->

    Par cela :
    Code:
    <!-- BEGIN tablehead --><div class="categorievo">


    Ensuite, remplacez ceci :

    Code:
    <!-- END tablefoot -->

    Par cela :
    Code:
    </div><!-- END tablefoot -->


    Explications:

    Dans la manip précédente, nous avons séparé les catégories afin qu'elles forment chacune un contenu.
    On aurait très bien pu en rester là, mais pourquoi se compliquer la tâche quand on peu faire beaucoup plus simple ?

    Voici un petit exemple :
    Jusqu'à présent, si l'on avais 5 catégories, le template générait (je schématise):

    tableau
    tableau
    tableau

    Un tableau (catégorie 1)
    Un séparateur
    Un tableau (catégorie 2)
    Un séparateur
    Un tableau (catégorie 3)
    Un séparateur
    Un tableau (catégorie 4)
    Un séparateur
    Un tableau (catégorie 5)
    Un séparateur

    tableau
    tableau
    tableau

    En regardant rapidement, on pourrait se dire : "ça va, ce n'est pas trop compliqué, on peut faire avec".
    Et bien faites ^^.
    Si je vous demande d'ajouter une bordure à chaque catégorie, je pense que ça va prendre un peu de temps pour savoir quel tableau est une catégorie.

    Alors qu'en appliquant les modifications faites ci-dessous, le template va générer (encore une fois je schématise) :

    tableau
    tableau
    tableau

    Une division avec la classe "categorievo"
    Un tableau (catégorie 1)
    Un séparateur
    Fin de la division
    Une division avec la classe "categorievo"
    Un tableau (catégorie 2)
    Un séparateur
    Fin de la division
    Une division avec la classe "categorievo"
    Un tableau (catégorie 3)
    Un séparateur
    Fin de la division
    Une division avec la classe "categorievo"
    Un tableau (catégorie 4)
    Un séparateur
    Fin de la division
    Une division avec la classe "categorievo"
    Un tableau (catégorie 5)
    Un séparateur
    Fin de la division

    tableau
    tableau
    tableau


    Maintenant si je vous pose la même question, vous me répondez : "trop facile, on cible toutes les divisions qui possèdent la classe 'categorievo'".
    C'est quand même un peu plus pratique pour le CSS et le Javascript ^^.

    Création des onglets

    Spoiler:

    Dans votre template, suivez ces étapes :

    Tout d'abord, remplacez ceci :
    Code:
    <!-- BEGIN catrow -->

    Par cela (Si vous souhaitez que les onglets soient les uns à côté des autres) :
    Code:

     <div id="conteneur_ongletsvo">
     <table><tr>
     <td class="ongletvo"><div>Nom onglet 1</div></td>
     <td class="ongletvo"><div>Nom onglet 2</div></td>
     <td class="ongletvo"><div>Nom onglet 3</div></td>
     <td class="ongletvo"><div>Nom onglet 4</div></td>
     <td class="ongletvo"><div>Nom onglet 5</div></td>
     </tr></table>
     </div>

     <!-- BEGIN catrow -->

    Ou par cela (Si vous souhaitez que les onglets soient les uns au dessus des autres) :
    Code:

     <div id="conteneur_ongletsvo">
     <div class="ongletvo">Nom onglet 1</div>
     <div class="ongletvo">Nom onglet 2</div>
     <div class="ongletvo">Nom onglet 3</div>
     <div class="ongletvo">Nom onglet 4</div>
     <div class="ongletvo">Nom onglet 5</div>
     </div>
     
     <!-- BEGIN catrow -->


    Si vous souhaitez ajouter ou supprimer des onglets, il vous suffit de copier / supprimer une ligne possèdant la classe "ongletvo".
    Code:
    <td class="ongletvo"><div>Nom onglet</div></td>
     ou
     <div class="ongletvo">Nom onglet</div>

    Si vous souhaitez remplacer le texte par une image, remplacez les lignes possèdant la class "ongletvo" par :
    Code:
    <td class="ongletvo"><div><img src="URL" /></div></td>
     ou
     <div class="ongletvo"><img src="URL" /></div>

    Explications:

    Nous venons de créer les onglets de façon à ce qu'ils apparaissent au dessus des catégories.
    Je ne pense pas qu'il y ait grand chose à dire la dessus, c'est juste un peu de HTML.


    Création du conteneur des catégories

    Spoiler:
    Dans votre template, suivez ces instructions :

    Tout d'abord, remplacez ceci :
    Code:
    <!-- BEGIN catrow -->

    Par cela :
    Code:
    <div id="conteneur_categoriesvo"><!-- BEGIN catrow -->


    Ensuite, remplacez ceci :
    Code:
    <!-- END catrow -->

    Par cela :
    Code:
    <!-- END catrow --></div>

    Explications:

    On vient de créer un conteneur autour de toutes les catégories, ce qui nous donne :

    tableau
    tableau
    tableau

    Une division avec un id "conteneur_categoriesvo"
    Une division avec la classe "categorievo"
    Une division avec la classe "categorievo"
    Une division avec la classe "categorievo"
    Une division avec la classe "categorievo"
    Une division avec la classe "categorievo"
    Fin de la division

    tableau
    tableau
    tableau

    Mais ça sert à quoi ?
    Pour le moment, on ne sait pas ^^, mais rassurez vous, tout sera expliqué dans la partie Javascript.





    3) Le Javascript :

    Vous allez voir c'est assez rapide. Rendez vous à la page de gestion du Javascript en vous rendant à cet endroit :
    Panneau d'administration > Modules > HTML et Javascript > Gestion des codes Javascript

    - Activez la gestion des codes Javascript (cliquez sur "oui", puis sur "enregistrer");
    - Cliquez sur "créer un nouveau Javascript";
    - Mettez un titre ("Catégorie en onglets" par exemple);
    - Vérifiez bien que seule la case "sur l'index" est cochée;
    - Copiez le code suivant dans la partie "code Javascript".

    Code:
    $('document').ready(function()
     {
      if($('.categorievo').size() > 1)
        {
     $('#conteneur_ongletsvo').css( 'display' , 'block' );
     $('#conteneur_ongletsvo .ongletvo').click(function()
     {
     change_categorie( $('.ongletvo', '#conteneur_ongletsvo').index( this ) )
     });
     
     $('.ongletvo:eq(0)').click();
    }
     });

     function change_categorie( index )
     {
     if( $('.categorievo:eq(' + index + ')').size() != 0 )
     {

     $('.categorievo').css( 'display' , 'none' );
     $('.categorievo:eq(' + index + ')').fadeIn( 500 );
     
     $('.ongletvo.actif').removeClass('actif');
     $('.ongletvo:eq('+ index +')').addClass('actif');
     }
     else alert('Vous ne pouvez pas accéder à cette catégorie');
     }

    Et voilà !

    Explications:

    Je vous ai remis le même code, mais avec un peu plus de commentaires :

    Code:
    /**
     * Fonction qui se déclenche lorsque tous les éléments de la page ont étés créés
     * Comme nous allons effectuer des actions sur les onglets, nous voulons être sûr qu'ils existent
     * Sinon ça ne servirait à rien
     */
    $('document').ready(function()
    {

    /**
     * Condition qui dit que le code est effectué seulement quand
     * Il y a plus que une catégorie.
     */
      if($('.categorievo').size() > 1)
        {

     /**
     * Pour ne pas afficher les onglets dans les sous catégories
     * Et pour ne pas gêner les utilisateurs qui n'activent pas Javascript,
     * Les onglets sont invisibles par défaut.
     * On commence donc par les rendre visibles.
     */
     $('#conteneur_ongletsvo').css( 'display' , 'block' );
     
     /**
     * On indique que l'on change de catégorie lorsque l'on clique sur un onglet
     * Si vous souhaitez changer de catégorie lors du survol (ce que je déconseille)
     * Il vous suffit de remplacer "click" par "hover"
     */
     $('#conteneur_ongletsvo .ongletvo').click(function()
     {

     /**
      * Fonction à exécuter lors du click, ici il s'agit de changer de catégorie.
      * On passe en argument l'index de l'onglet.
      * L'index est le numéro de l'onglet en commençant par 0
      * Pour l'onglet 1, il s'agit du première onglet, l'index vaut 0
      * Pour l'onglet 2, il s'agit du seconde onglet, l'index vaut 1
      * ...
      * Pour l'onglet 5, il s'agit du cinquième onglet, l'index vaut 4
      */
     change_categorie( $('.ongletvo', '#conteneur_ongletsvo').index( this ) )
     });
     
     /**
     * On choisit quelle catégorie afficher en premier.
     * Par défaut, il s'agit de la première (index 0).
     * Si vous souhaitez en afficher une autre, il vous suffit de remplacer le 0
     * par l'index de la catégorie désirée.
     * Si vous voulez toutes les afficher, supprimez cette ligne.
     */
     $('.ongletvo:eq(0)').click();
     }
     });

    /**
     * Fonction qui se déclenche à chaque fois que l'on souhaite changer de catégorie
     */
    function change_categorie( index )
    {

     /**
     * On vérifie que la catégorie demandée existe
     */
     if( $('.categorievo:eq(' + index + ')').size() != 0 )
     {

     /**
     * On masque toutes les catégories
     */
     $('.categorievo').css( 'display' , 'none' );
     
     /**
     * On affiche avec un petit effet la catégorie demandée
     */
     $('.categorievo:eq(' + index + ')').fadeIn( 500 );
     
     /**
     * On enlève la classe "actif" de l'ancien onglet actif
     */
     $('.ongletvo.actif').removeClass('actif');
     
     /**
     * On ajoute la classe "actif" à l'onglet de la catégorie affichée
     */
     $('.ongletvo:eq('+ index +')').addClass('actif');
     }

     /**
     * Si la catégorie n'existe pas, on affiche un message
     */
     else alert('Vous ne pouvez pas accéder à cette catégorie');
    }

    Voilà, je pense que c'est assez parlant comme ça, il n'y a pas besoin d'en rajouter plus ^^





    4) Le CSS :

    Allez, c'est la dernière ligne droite. Pour trouver votre CSS, suivez ce chemin :
    Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuilles de styles CSS

    Insérez y le code suivant :
    Code:
    /*Conteneur qui contient toutes les catégories */
    #conteneur_categoriesvo {
    }
    /* Conteneur de chaque catégorie */
     .categorievo {
    }
    /* Conteneur de tous les onglets */
    #conteneur_ongletsvo {
      display: none;
    }
    /* Un onglet */
    .ongletvo{
      cursor: pointer;
    }
    /* Onglet actif */
    .actif{
      color: darkred;
    }

    Il ne contient que le strict minimum et la liste de toutes les classes disponibles.
    Il n'y a pas grand chose, mais je pense que vous pourrez trouver tout seul ce que vous souhaitez faire sur ce forum ou sur google.

    N'hésitez pas à demander de l'aide dans la section adéquate ^^

    Voilà, c'est terminé. J'espère que ce tutoriel vous aura aidé ~



    Dernière édition par vic_le_faucheur le Mar 25 Sep 2012 - 9:21, édité 142 fois
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 30 Mar 2010 - 9:48
    EDIT


    Dernière édition par vic_le_faucheur le Mer 26 Jan 2011 - 20:18, édité 3 fois
    MasculinAge : 31Message(s) : 31634

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Mar 30 Mar 2010 - 11:27
    Génial ! Merci pour ce tuto ! Wink


    FémininAge : 26Message(s) : 443
    Tahly
    le Mar 30 Mar 2010 - 13:11
    Je suppose que dans les ID il faut mettre le nom exact de chaque catégorie ?
    MasculinAge : 25Message(s) : 23
    Oas~
    le Mar 30 Mar 2010 - 17:14
    Crewette => Oui Wink

    Ce tuto va en ravir plus d'un mais en faire rager d'autres Rolling Eyes
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 30 Mar 2010 - 18:41
    pourquoi tu dis que ça va en faire rager ??

    sinon je ne comprends pas la question que tu pose sur les id.
    les seuls truc à modifier sont les noms en MAJUSCULES. après si j'ai mis le même nom c'est qu'il doivent contenir la même chose.
    MasculinAge : 25Message(s) : 23
    Oas~
    le Mar 30 Mar 2010 - 19:40
    Car certains se sont appropriés l'exclusivité de "l'effet "du tuto, alors qu'on sait tous parfaitement que ces onglets existent depuis bien longtemps.
    Donc, quand ces personnes se rendront compte qu'ils ne seront plus les seuls, ils vont crier au plagiat, chose qui bien entendu n'aboutira point Razz
    FémininAge : 26Message(s) : 443
    Tahly
    le Mar 30 Mar 2010 - 23:45
    Qu'ils crient, de toute façon si vic_le_faucheur a fait lui-même le code, ces personnes n'ont rien à dire.

    merci de ce partage !
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mer 31 Mar 2010 - 13:15
    la dessus effectivement je n'ai rien a craindre ^^
    et en grâce à laide de (mince j'ai oublier le nom ^^) on va pouvoir l'améliorer car effectivement il y a plein de truc auquel je n'avais pas penser.

    donc préparez vous à la version 2.0.1 !! (on note pour faire comme les pro ^^) !
    MasculinAge : 48Message(s) : 178
    fascicularia
    le Mer 7 Avr 2010 - 21:45
    Voila un rendez vous que je ne vais manquer pour rien au monde. Merci par avance Vic pour ce nouveau tuto.
    MasculinAge : 23Message(s) : 1971

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lucky Numb£r
    le Mer 7 Avr 2010 - 21:56
    Oh yeah vic il en jette ce tuto (je crois que le nom que tu cherchais c'était Riku Wink). Continuez sur cette lancée et faites nous un super méga maxi tuto, bref un truc qui déchire tout XD Merci du partage !


    MasculinAge : 48Message(s) : 178
    fascicularia
    le Dim 11 Avr 2010 - 13:00
    Merci Vic pour ce tuto,
    En bon néophite que je suis, j'ai apliqué par deux fois les manips concernant les modifications de l'index box mais je me heurte toujours au même soucis:La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.

    Je n'ai pas modifié mes url de redirection et mes classe ID pour l'instant. Je voulais juste voir si le template modifié dans sa forme brute ne présentait aucun soucis au niveau de l'enregistrement.
    Merci par avance pour ta réponse.

    Voici mon template modifié, vois tu quelque chose qui cloche ?





    Spoiler:
    <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 -->
    <tr>



    <div align="center"> <!--creation des onglets-->
    <ul class="onglet">
    <li><a href="#" class="onglet_actif" onMouseOver="change_cat(0);"
    id="cat_NOM CATEGORIE 1">NOM DE L'ONGLET</a></li>
    <li><a href="#" onMouseOver="change_cat(1);"
    id="cat_NOM CATEGORIE 2">NOM DE L'ONGLET</a></li>
    <li><a href="#" onMouseOver="change_cat(2);"
    id="cat_NOM CATEGORIE 3">NOM DE L'ONGLET</a></li>
    <li><a href="#" onMouseOver="change_cat(3);"
    id="cat_NOM CATEGORIE 4">NOM DE L'ONGLET</a></li>
    </ul>
    </div>
    <div class="cat_nactif">

    <script type="text/javascript">
    <!--

    var compteur_cat = 0; // on cree une fonction qui donnera un nombre à notre categorie

    var anc_cat = 0; // on initialise la premiere ancienne categorie
    var nom_cat = new Array('NOM CATEGORIE 1','NOM CATEGORIE 2',...); //on cree un //tableau contenant l'ID de nos categories

    function change_cat(numero) // on cree une fonction qui fait changer nos categories
    {
    document.getElementById(nom_cat[anc_cat]).style.display = 'none';
    // l'ancienne categorie survolee redevient invisible
    document.getElementById(nom_cat[numero]).style.display = 'block';
    // la categorie survolee devient visible
    document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet';
    // l'ancien onglet redevient non actif
    document.getElementById('cat_'+nom_cat[numero]).className = 'onglet_actif'
    // le nouvel onglet survole devient actif
    anc_cat = nombre;
    // la nouvelle categorie devient l'ancienne categorie
    }

    function capture_cat() //on va classer nos categorie avec un nombre
    {
    document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '">');
    // si vous voulez que vos categories restent les même qu'avant remplacez cat_forum
    // par forumline !
    compteur_cat++;
    }

    //-->
    </script>

    <script type="text/javascript"> // on lance la numerotation des categories
    <!--
    capture_cat()
    //-->
    </script>
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 13 Avr 2010 - 11:37
    juste une question entre begin tablefoot et <"/table"> tu as vraiment tout supprimer ??
    car si c'est le cas c'est normal que ça ne marche pas.
    sinon tient pour l'info : j'ai retouché le code.
    pour les personnes qui n'acceptent pas le javascript tu met au tout début du script et pour avoir un meilleur design :

    Code:


    <script type="text/javascript">
    <!--

    <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>


    <script type="text/javascript">
    <!--

    var i = 0;

    document.write('<div align="center">
    <ul class="onglet">
    <li onMouseOver="change_cat(0);" class="onglet_actif"><div  id="cat_preface"><span class="text">Preface</span></div></li>
    <li onMouseOver="change_cat(1);" class="onglet_nactif"><div  id="cat_chronique"><span class="text">Chronique</span></div></li>
    <li onMouseOver="change_cat(2);" class="onglet_nactif"><div  id="cat_info"><span class="text">Infos</span></div></li>
    <li onMouseOver="change_cat(3);" class="onglet_nactif"><div  id="cat_fiches"><span class="text">Fiches</span></div></li>
    <li onMouseOver="change_cat(4);" class="onglet_nactif"><div  id="cat_lieux"><span class="text">Lieux</span></div></li>
    <li onMouseOver="change_cat(5);" class="onglet_nactif"><div  id="cat_hors"><span class="text">Hors RPG</span></div></li>
    <li onMouseOver="change_cat(6);" class="onglet_nactif"><div  id="cat_archives"><span class="text">Archives</span></div></li>
    </ul>
    </div>
    <div class="cat_nactif">');

    var compteur_cat = 0;

    var anc_cat = 0;
    var nom_cat = new Array('preface', 'chronique', 'info', 'fiches','lieux','hors','archives');



    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>   

    <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">&nbsp;</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><br />
                    </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 -->


    ce code permet aussi une meilleure transition d'une catégorie à une autre.
    le code est entier donc tu peux être sur qu'il marche !

    voici le css qui va avec :



    Code:

    .text
    {
    color:#FF6347;
    cursor:pointer;
    }

    #cat_preface, #cat_chronique,#cat_hors,#cat_fiches,#cat_archives,#cat_info,#cat_lieux
    {
    padding-top:4px;
    }

    .spoiler_content { display: block; }
    .hidden .spoiler_content { display: none; }

    .cat_forum {
    background-color: #000000;
    margin: auto;
    margin-bottom:30px;
    width:800px;
    }

    .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 {
    background: url('http://host.image.files.free.fr/host/4bb9a30e7cb5bbarreonglets.png') no-repeat;
    width:100px;
    height:30px;
    cursor:pointer;
    }

    .onglet_nactif {
    background:url('http://host.image.files.free.fr/host/4bb9a2e34b25dbarreonglets.png') no-repeat;
    width:100px;
    height:30px;
    cursor:pointer;
    }

    je te préviens tout de suite, je n'ai quasiment pas travailler dessus donc il y a plein de truc qu'il faudra que je retouche mais au moins tu sais que avec ce code tu doit arriver à ça : http://narutoshinjidaiv2.keuf.net/index.htm

    après tu localise les endroit et tu change pour adapter à ton forum.
    désolé pour cette réponse très évasive mais je suis en vacances et je n'ai que très peut de temps pour te répondre !
    MasculinAge : 48Message(s) : 178
    fascicularia
    le Mar 13 Avr 2010 - 22:27
    Vic, évasif n'est pas le mot. L'aide que tu viens de me porter est tout simplement inespéré. Ton fofo est superbe et, la fluidité des onglets est tout simplement surprenante. UN GRAND MERCI POUR CETTE AIDE. (je te rassure, en tout honneur).
    MasculinAge : 20Message(s) : 21
    Naekan
    le Jeu 15 Avr 2010 - 17:22
    Oula je comprends rien :s
    Aussi, à la place de NOM CATEGORIE je dois mettre le nom de categories, mais je peux pas le changer normalement ? Dans "Categories et Forum".
    Aussi, à chaque fois que je finis, ça met "La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas
    été ouverte." Je dois faire quoi ? Sad
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Jeu 15 Avr 2010 - 19:04
    déjà, non il faut vraiment que tu change la catégories à la place de NOM CATEGORIE car ça n'a aucun rapport avec le titre que tu donne dans catégorie et forum.
    bah ce que je te conseil, si ça marque ça c'est de re-copier coller car ça m'arrive aussi et généralement si mon code est bon, tu n'aura plus le problème. après si ça revient alors que c'était bon, c'est que tu aura enlever quelque chose par mégarde et il te faudra le remettre !

    voilà
    MasculinAge : 20Message(s) : 21
    Naekan
    le Jeu 15 Avr 2010 - 20:41
    Nan, je comprends pas ca marche toujours pas, je mets tout ce qu'il faut pourtant.
    Les trucs avec les chiffres faut les mettre nan ?
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Ven 16 Avr 2010 - 11:31
    si tu veux tu me mp ton mdp et ton compte et je te le fait.
    MasculinAge : 20Message(s) : 21
    Naekan
    le Ven 16 Avr 2010 - 20:59
    Okay, merci, ça va être plus facile pour moi.
    MasculinAge : 20Message(s) : 1165
    Apollo Justice
    le Mar 20 Avr 2010 - 10:32
    j'y arrive pas XD
    Voilà mon Code :
    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="1" cellpadding="0">
       <tr>
          <div align="center"> <!--creation des onglets-->
    <ul class="onglet">
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/reglement-c1/"  class="onglet_actif" onMouseOver="change_cat(0);"
     id="cat_Règlement">Règlement</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/reglement-c1/"  onMouseOver="change_cat(1);"
    id="cat_Présentations">Présentations</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/fiches-techniques-c3/"  onMouseOver="change_cat(2);"
    id="cat_Fiches Techniques">Fiches Techniques</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/royaume-de-fiore-c4/"  onMouseOver="change_cat(3);"
    id="cat_Royaume de Fiore">Royaume de Fiore</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/flood-c5/"  onMouseOver="change_cat(4);"
    id="cat_Flood">Flood</a></li>
    </ul>
    </div>
    <div class="cat_nactif">

    <script type="text/javascript">
    <!--

    var compteur_cat = 0; // on cree une fonction qui donnera un nombre à notre categorie

    var anc_cat = 0; // on initialise la premiere ancienne categorie
    var nom_cat = new Array('Règlement','Présentations','Fiches Techniques','Royaume de Fiore','Flood'); //on cree un //tableau contenant l'ID de nos categories

    function change_cat(numero) // on cree une fonction qui fait changer nos categories
    {
     document.getElementById(nom_cat[anc_cat]).style.display = 'none';
    // l'ancienne categorie survolee redevient invisible
     document.getElementById(nom_cat[numero]).style.display = 'block';
    // la categorie survolee devient visible
     document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet';
    // l'ancien onglet redevient non actif
     document.getElementById('cat_'+nom_cat[numero]).className = 'onglet_actif'
    // le nouvel onglet survole devient actif
     anc_cat = nombre;
    // la nouvelle categorie devient l'ancienne categorie
    }

    function capture_cat() //on va classer nos categorie avec un nombre
    {
     document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '">');
    // si vous voulez que vos categories restent les même qu'avant remplacez cat_forum
    // par forumline !
    compteur_cat++;
    }

    //-->
    </script> 

    <script type="text/javascript"> // on lance la numerotation des categories
    <!--
    capture_cat()
    //-->
    </script>   
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Si quelqu'un pouvait m'Help S.V.P (je le dis pas souvent ça ><"). Ça serrait cool Wink
    Ah' ça marche pas parce que ça me fait :
    La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.



    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    FémininAge : 22Message(s) : 1992

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lys Draw
    le Mar 20 Avr 2010 - 12:08
    Je crois que tu n'as pas enlevé les notes hors CSS^^

    Par exemple:
    Code:
    function change_cat(numero) // on cree une fonction qui fait changer nos
     categories
    {
     document.getElementById(nom_cat[anc_cat]).style.display
     = 'none';
    // l'ancienne categorie survolee redevient invisible
     document.getElementById(nom_cat[numero]).style.display
     = 'block';
    // la categorie survolee devient visible
     document.getElementById('cat_'+nom_cat[anc_cat]).className
     = 'onglet';
    // l'ancien onglet redevient non actif
     document.getElementById('cat_'+nom_cat[numero]).className
     = 'onglet_actif'
    // le nouvel onglet survole devient actif
     anc_cat
     = nombre;
    // la nouvelle categorie devient l'ancienne categorie
    }

    Je pense que si tu enlèves déjà les explications du tuto, ça pourra peut-être t'aider =)



    Merci Narja pour cette belle sign'! :)
    MasculinAge : 20Message(s) : 1165
    Apollo Justice
    le Mar 20 Avr 2010 - 12:32
    Ça ne change rien =S



    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 20 Avr 2010 - 12:42
    je vais te demander ton mdp et ton pseudo plus l'adresse de ton forum ^^
    si tu ne veux pas sache qu'a la fin de la semaine je sort un générateur de code
    qui permettra de générer le code sans fautes.

    donc voilà, maintenant à toi de choisir !
    MasculinAge : 20Message(s) : 1165
    Apollo Justice
    le Mar 20 Avr 2010 - 13:22
    Okay'
    Je t'envoie mon MDP ^^
    Toute façon, j'ai fais que la page d'accueil que j'ai save ^^'



    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 20 Avr 2010 - 18:39
    EVENEMENT !
    bonne nouvelle :
    j'aimerais que vous testiez le programme que je viens d'inventé. il vous génère le code des onglets et vous n'avez plus qu'a le mettre dans les template, ce qui vous facilitera grandement la tâche ! de plus j'ai un peu améliorer les onglets dessus !
    mauvaise nouvelle :
    je l'ai tester uniquement sur 2 forum.
    sur les deux ça marche mais il peut toujours subsister des bugs.
    je vous demanderais donc de me faire part si vous en rencontrez !

    voila merci à vous et j'espère que ça pourra vous aider !
    Contenu sponsorisé
    Aujourd'hui à 22:53

      La date/heure actuelle est Sam 24 Sep 2016 - 22:53