Problème avec Tableau à onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec Tableau à onglets

Message par Lelouch45 le Mar 27 Sep 2011 - 19:17

Bonjour,

Je planche actuellement sur la mise en place d'un tableau à onglets sur la page d'accueil de mon forum. Problème : l'installation est faite mais je n'arrive pas à changer d'onglets, je reste bloqué sur le premier... J'imagine que j'ai oublié un truc tout bête, mais je ne vois pas quoi =/
Voilà ma feuille CSS
Spoiler:
Code:
        ul, li{
          list-style: none;
        }
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #4b0082;
          background: #d8bfd8;
          border: 1px solid #4b0082;
          cursor: pointer;
        -moz-border-radius-topleft: 20px;
              -moz-border-radius-topright: 20px;
              -webkit-border-top-right-radius: 20px;
              -webkit-border-top-left-radius: 20px;
              border-top-right-radius: 20px;
              border-top-left-radius: 20px;
        }
       
        .mon_onglet:hover{
          background: #d8bfd8;
        -moz-border-radius-topleft: 20px;
              -moz-border-radius-topright: 20px;
              -webkit-border-top-right-radius: 20px;
              -webkit-border-top-left-radius: 20px;
              border-top-right-radius: 20px;
              border-top-left-radius: 20px;}       
       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #4b0082;
          background:#d8bfd8;
          border-top: 1px solid #4b0082;
          border-right: 1px solid #4b0082;
          border-left: 1px solid #4b0082;
          border-bottom: 1px solid #d8bfd8;
          cursor: pointer;
          margin-bottom: -1px;
        -moz-border-radius-topleft: 20px;
              -moz-border-radius-topright: 20px;
              -webkit-border-top-right-radius: 20px;
              -webkit-border-top-left-radius: 20px;
              border-top-right-radius: 20px;
              border-top-left-radius: 20px;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #4b0082;
          background: #d8bfd8;
          border: 1px solid #4b0082;
            -moz-border-radius:10px;
            -webkit-border-radius: 10px;
            border-radius:10px;
          padding: 1px;
                margin-left: -10px;       
        }
        #mes_contenus, #mes_onglets{
          width: 500px;
        }
       
        .titres{
        background-color:  #d8bfd8;
        border: 1px solid #4b0082;
            -moz-border-radius:10px;
            -webkit-border-radius: 10px;
            border-radius:10px;
        text-align:center;
        padding:5px;}
Et pour finir mon code :
Spoiler:
Code:
        <table cellspacing="1" width="100%"><tr><td colspan="2" rowspan="1" class="titres" >Bienvenue sur Naruto Dream</td></tr>
       
        <tr><td  colspan="2" rowspan="1" align="center" valign="top">
        Texte de bienvenue.</td></tr>
       
        <tr><td class="titres" colspan="1" rowspan="1" width="35%">Navigation Rapide</td>
        <td class="titres" colspan="1" rowspan="1">onglets</td></tr>
       
        <tr><td  colspan="1" rowspan="1" align="center">Règlement
 Personnages disponibles<br/> Présentations <br/> Fiche technique <br/> Autres liens <br/></span></td>
        <td  colspan="1" rowspan="1" align="center"><script src="http://pmsc.free.fr/J04/10912150254.js"></script><div id="mes_onglets">
         
        <script src="http://pmsc.free.fr/J04/10912150254.js"></script><div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Votez</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Wanted</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Partenariats</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1 Mon contenu 1</div>
            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2 Mon contenu 2</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3 Mon contenu 3</div>
            <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4 Mon contenu 4</div>
        </div></ul>

Merci d'avance pour votre aide =)


Dernière édition par Lelouch45 le Mar 27 Sep 2011 - 21:02, édité 1 fois

Lelouch45
Nouveau membre

Messages : 6
Inscrit(e) le : 27/09/2011

http://forum-test-lelouch.forumgratuit.org/
Lelouch45 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Tableau à onglets

Message par Invité le Mar 27 Sep 2011 - 20:17

Bonsoir,

Cette partie du code contient le script permettant de faire fonctionner les onglets. Mais l'adresse du script n'est plus valide donc ça ne fonctionne pas Smile . De plus elle est en double, une seule fois suffit Wink .
Code:
<script src="http://pmsc.free.fr/J04/10912150254.js"></script><div id="mes_onglets">
         
        <script src="http://pmsc.free.fr/J04/10912150254.js"></script><div id="mes_onglets">
Retirez tout cela et conservez uniquement <div id="mes_onglets">.
Ensuite, vous pourrez vous aider du tutoriel ci-dessous pour installer le code javascript sur votre forum:
> http://forum.forumactif.com/t310879-

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec Tableau à onglets

Message par Lelouch45 le Mar 27 Sep 2011 - 21:02

Ah oui, effectivement, j'ai complètement oublié le Javascript ^^'
Je vous remercie de l'aide, le problème est résolu. Merci de votre aide =)

Lelouch45
Nouveau membre

Messages : 6
Inscrit(e) le : 27/09/2011

http://forum-test-lelouch.forumgratuit.org/
Lelouch45 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum