Problème avec Tableau à onglets

par Lelouch45 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 =)

par Invité 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:
> https://forum.forumactif.com/t310879-

Cordialement.

par Lelouch45 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 =)

Problème avec Tableau à onglets

Problème avec Tableau à onglets

Re: Problème avec Tableau à onglets

Re: Problème avec Tableau à onglets