Problème avec mon tableau à Onglets.

[Florisaly]

Bonjour/Bonsoir,

J'ai mis un tableau à onglets dans ma page d'accueil sur mon forum : http://skye-dream.forums-actifs.com/

Le premier Onglet ( "Contexte" ) Affiche bien son contenu, mais lorsque l'on clique sur le suivant ( "Staff" ), son contenu ne s'affiche pas. Et c'est pareil pour les suivantes...

Quelqu'un pourrait m'aider ?

Merci d'avance.
Cordialement.

[Invité]

Bonjour,

Le problème vient en général d'une balise mal fermée dans le code HTML. Pourriez-vous le donner pour que je regarde?

Cordialement.

[Florisaly]

Le voici :

Code:

<table style="margin: auto;text-align:center;width:100%"><tr><td><div id="mes_onglets">

    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t17.gif" border="0" alt="" /></div></span>

                <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t18.gif" border="0" alt="" /></div></span>

        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t19.gif" border="0" alt="" /></div></span>

        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t20.gif" border="0" alt="" /></div></span>
</td><td>

        <div class="clear"><div id="mes_contenus">

    <div id="co_1" class="mon_contenu"><div style="margin:auto;text-align:center;width:100%;font-size: 18px"><table border="0"><tr><td align="center">Bonne Année à tous et à toutes !! =^o^= </div><br><div style="margin:auto;text-align:left;width:100%;font-size: 14px"><img src="http://e5.img.v4.skyrock.net/e51/mini-gifs-officiel/pics/2401608499_1.gif" border="0" alt="" />
Hey' salut {USER&amp;#8288;NAME}, bienvenue chez nous ! Ici c'est pas un Pensionnat ~ Forum ~ RPG pas comme les autres car toutes les espèces du monde, de l'univers et de l'au-delà sont admis chez nous. <br>
<img src="http://e5.img.v4.skyrock.net/e51/mini-gifs-officiel/pics/2401575087_1.gif" border="0" alt="" /> Pour commencer, t'es là pourquoi ? <br>
~ Rien ? Copier ? Espionner ? He bien, tu vois la croix rouge en haut à droite ? Bas tu clic dessus x) <br>
~ Tu veux être engager ici ? Alors tu vas tout d'abord regarder les emplois dont nous avons besoin et qui sont encore disponible ici. Ensuite, tu sais pas comment faire ta demande d'emplois ? Fastoche ! Tu vas ici. <br>
~ Tu veux étudier et vivre chez nous ? Va ici, tout est expliquer comment faire ta demande d'inscription ;D <br>
<img src="http://40.img.v4.skyrock.net/406/i-am-chic-bannana/pics/2481346529_1.gif" border="0" alt="" /> Tous les membres doivent bien sûr se présenter ! Tout est expliquer ici.<br>
<img src="http://e5.img.v4.skyrock.net/e51/mini-gifs-officiel/pics/2402716095_1.gif" border="0" alt="" /> /!\ Lisez tous bien le réglement de toute façon, si cela n'est pas fait, l'administration du pensionnat vous donnera une grave santion ( ou pas ) /!\ Sanction : ici ; Réglement : Forum ~ Pensionnat <br></div><div style="margin:auto;text-align:center;width:100%;font-size: 18px">Amusez-vous bien ! :D</div></div>

    <div id="co_2" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 16px; line-height: normal"><img src="http://r18.imgfast.net/users/1812/10/49/61/avatars/1-41.jpg" border="0" alt="" /> <br> Motoko* ~ Fondatrice / Créatrice / Administratrice et Directrice ;D</div></div>

    <div id="co_3" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 16px; line-height: normal"><a href="http://floralys.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/15/65/67/51/conser10.jpg" border="0" alt="" /></a><a href="http://city-hunter.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/05/16/08/shinju10.png" border="0" alt="" /></a><br><a href="http://yuki-no-kinjo.forumgratuit.org" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa28.casimages.com/img/2011/10/24/111024053306575468.png" border="0" alt="" /></a><a href="http://vampire-knight-tsugi.monempire.net/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/05/16/08/vk10.png" border="0" alt="" /></a><br><a href="http://the-lost-school.forumgratuit.org" class="postlink" target="_blank" rel="nofollow"><img src="http://nsm05.casimages.com/img/2011/01/26//1101260321421072227533483.png" border="0" alt="" /></a><a href="http://www.hostingpics.net/viewer.php?id=734103bouton.png" class="postlink" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/thumbs/mini_734103bouton.png" border="0" alt="" /></a><br><a href="http://en.root-top.com/toplist/skyedream/in.php?ID=1">
<img src="http://img.root-top.com/topsite/skyedream/banner.gif" />
<br />Skye Dream</a></div></div>

    <div id="co_4" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 16px; line-height: normal"> <br>  <br>  <br> Thème Motoko* <br>  <br> Forum Motoko* <br>  <br> La Vie du Forum Elèves & Employer :D <br> <img src="http://05.img.v4.skyrock.net/05e/x-zimages-kawai-x/pics/2441413813_1.gif" /><br> </div></div>
</div></div></div></td></tr></table>


Merci !

[Roxy.]

Bonsoir,
Il y a un problème au niveau des id ^^
Pour la première partie avec le JS, vous avez mis comme id : o_1etc...
Sauf que pour la partie XHTML, vous avez mis co_1 etc...
Déjà modifier ceci, normalement ça marcherais beaucoup mieux ^^

Cordialement,

[Invité]

Le tableau de votre premier onglet n'est pas fermé à l'interieur de la div, et vous avez une div à moitié dans le tableau et à moitié en dehors. Essayez avec le code suivant:

Code:

<table style="margin: auto;text-align:center;width:100%"><tr><td><div id="mes_onglets">
 
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t17.gif" border="0" alt="" /></div></span>
 
                <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t18.gif" border="0" alt="" /></div></span>
 
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t19.gif" border="0" alt="" /></div></span>
 
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><div style="margin:auto;text-align:center;width:100%"><img src="http://i48.servimg.com/u/f48/16/98/64/37/sans_t20.gif" border="0" alt="" /></div></span>
</td><td>
 
        <div class="clear"><div id="mes_contenus">
 
    <div id="co_1" class="mon_contenu">
   <table border="0"><tr><td align="center"><div style="margin:auto;text-align:center;width:100%;font-size: 18px">Bonne Année à tous et à toutes !! =^o^= </div><br><div style="margin:auto;text-align:left;width:100%;font-size: 14px"><img src="http://e5.img.v4.skyrock.net/e51/mini-gifs-officiel/pics/2401608499_1.gif" border="0" alt="" />
Hey' salut {USER&amp;#8288;NAME}, bienvenue chez nous ! Ici c'est pas un Pensionnat ~ Forum ~ RPG pas comme les autres car toutes les espèces du monde, de l'univers et de l'au-delà sont admis chez nous. <br>
<img src="http://e5.img.v4.skyrock.net/e51/mini-gifs-officiel/pics/2401575087_1.gif" border="0" alt="" /> Pour commencer, t'es là pourquoi ? <br>
~ Rien ? Copier ? Espionner ? He bien, tu vois la croix rouge en haut à droite ? Bas tu clic dessus x) <br>
~ Tu veux être engager ici ? Alors tu vas tout d'abord regarder les emplois dont nous avons besoin et qui sont encore disponible ici. Ensuite, tu sais pas comment faire ta demande d'emplois ? Fastoche ! Tu vas ici. <br>
~ Tu veux étudier et vivre chez nous ? Va ici, tout est expliquer comment faire ta demande d'inscription ;D <br>
<img src="http://40.img.v4.skyrock.net/406/i-am-chic-bannana/pics/2481346529_1.gif" border="0" alt="" /> Tous les membres doivent bien sûr se présenter ! Tout est expliquer ici.<br>
<img src="http://e5.img.v4.skyrock.net/e51/mini-gifs-officiel/pics/2402716095_1.gif" border="0" alt="" /> /!\ Lisez tous bien le réglement de toute façon, si cela n'est pas fait, l'administration du pensionnat vous donnera une grave santion ( ou pas ) /!\ Sanction : ici ; Réglement : Forum ~ Pensionnat <br></div><div style="margin:auto;text-align:center;width:100%;font-size: 18px">Amusez-vous bien ! :D</div></td></tr></table></div>
 
    <div id="co_2" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 16px; line-height: normal"><img src="http://r18.imgfast.net/users/1812/10/49/61/avatars/1-41.jpg" border="0" alt="" /> <br> Motoko* ~ Fondatrice / Créatrice / Administratrice et Directrice ;D</div></div>
 
    <div id="co_3" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 16px; line-height: normal"><a href="http://floralys.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/15/65/67/51/conser10.jpg" border="0" alt="" /></a><a href="http://city-hunter.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/05/16/08/shinju10.png" border="0" alt="" /></a><br><a href="http://yuki-no-kinjo.forumgratuit.org" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa28.casimages.com/img/2011/10/24/111024053306575468.png" border="0" alt="" /></a><a href="http://vampire-knight-tsugi.monempire.net/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/05/16/08/vk10.png" border="0" alt="" /></a><br><a href="http://the-lost-school.forumgratuit.org" class="postlink" target="_blank" rel="nofollow"><img src="http://nsm05.casimages.com/img/2011/01/26//1101260321421072227533483.png" border="0" alt="" /></a><a href="http://www.hostingpics.net/viewer.php?id=734103bouton.png" class="postlink" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/thumbs/mini_734103bouton.png" border="0" alt="" /></a><br><a href="http://en.root-top.com/toplist/skyedream/in.php?ID=1">
<img src="http://img.root-top.com/topsite/skyedream/banner.gif" />
<br />Skye Dream</a></div></div>
 
    <div id="co_4" class="mon_contenu" style="display: none;"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 16px; line-height: normal"> <br>  <br>  <br> Thème Motoko* <br>  <br> Forum Motoko* <br>  <br> La Vie du Forum Elèves & Employer :D <br> <img src="http://05.img.v4.skyrock.net/05e/x-zimages-kawai-x/pics/2441413813_1.gif" /><br> </div></div>
</div></div></div>
</td>
</tr>
</table>

Roxy, il n'y a pas de problème d'id puisqu'il s'agit uniquement du code HTML ... et non de la partie JS.

Cordialement.

[Florisaly]

Résolu ! Merci beaucoup pour votre aide si rapide et efficace

Je met le sujet comme résolu !