Problème avec un tuto

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

Résolu Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 0:09

Bonjour/Bonsoir !

Je reposte donc mon sujet car le premier a été supprimé. J'aimerais d'ailleurs bien savoir pourquoi ! Smile
J'avais posté comme quoi après avoir suivi pas à pas (et après vérification) le tutoriel donné pour faire un tableau à onglets, il ne marchait pas sur mon forum. Le contenu ne change pas lorsque je passe ma souris sur les onglets, ou même quand je clique dessus.

J'espère que cette fois ci quelqu'un m'aidera rapidement, je prends du retard dans mon changement de design en fait donc c'est urgent ^^;

Encore merci.


Dernière édition par Michi[yo]. le Ven 18 Nov 2011 - 22:29, édité 1 fois

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 0:36

Tu as modifier les contenus au moins ?

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 14:19

Les contenus portent les noms "Contenu 1" "Contenu 2" etc, mais à chaque fois je ne vois qu'écrit "Contenu 1". Je peux essayer d'y mettre plus de texte etc mais je ne pense pas que ça joue un rôle important dans notre problème...

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 14:47

Si tu nous passais les 3 codes qu'on regarde ce qui ne va pas.

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 14:57

Bien sur.

Le code du message d'accueil :
Code:
        <table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center"><div id="mes_onglets">
            <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
                <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
                <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
                <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></td></tr>
        <tr><td>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Mon contenu 1 </div>
            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
            <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
        </div></div></div></td></tr></table>

Le code du CSS :
Code:

       
        .mon_onglet{
          display: inline;
          padding: 2px;
          margin: 2px;
          color: #000;
          background: #fff;
          border: 1px solid #000;}
       
        .mon_onglet:hover{
          background: #b8efa1;}
             
        .mon_onglet_selected{
          display: inline;
          padding: 2px;
          margin: 2px;
          color: #000;
          background: #ffff;
          border: 1px solid #000;}
             
        .clear{
          clear: both;}
       
        .mon_contenu{
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
          margin: 10 px;
          height: 120px;
          line-height: normal;
          font-size: 11px;}
       
        #mes_contenus, #mes_onglets{
          height: 100%;
          width:100%;}


Le code Javascript :
Code:
function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
            for(var i = 0; i < getOnglets.length; i++){
                if(getOnglets[i].id){
                    if(getOnglets[i].id == _this.id){
                        getOnglets[i].className = 'mon_onglet_selected';
                        document.getElementById('c' + _this.id).style.display            = 'block';
                    }
                    else{
                        getOnglets[i].className = 'mon_onglet';
                        document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                    }
                }
            }   
        }

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 15:23

Tout d'abord la table style du début ne sert à rien, autant mettre ceci dans le CSS correspondant, donc supprime la.

De plus ce n'est pas un span pour les onglets mais un <li

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 15:28

Un "<li" ?

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 15:35

Oui c'est marqué dans le tuto, regarde mon PA onglet ressemble à ça et fonctionne :

Code:
div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Les News du Forum</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Évènements et Distributions</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Liens Utiles</li>
            <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);"> Top Sites</li>
            <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);">Partenaires</li>
            <li id="o_7" class="mon_onglet" onclick="changeOnglet(this);">Divertissement Musicaux et Vidéos</li>
                <div class="clear"><div id="mes_contenus">
            
            <div id="co_1" class="mon_contenu">
         <center>Bienvenue {USER&amp;nbsp;LINK} sur Poké-Trénia.</center><br />         
         <center><img src="http://up.sur-la-toile.com/iUKu" alt="Mascotte de Novembre" title="..." /></center>         
         </div>
         
            <div id="co_2" class="mon_contenu" style="display: none;">
         <center>Voici tous les nouveaux messages du forum.<br /><br /><br/>
<table><tr><td align="center" id="comments_scroll_div" valign="middle" style="height: 201px;">
 <iframe name="ifr" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var ifr=window.ifr.document.getElementById('comments_scroll_div');document.getElementById('comments_scroll_div').innerHTML=ifr.innerHTML;"></iframe>
                    </td></tr></table>
         </center>

         </div>
         
            <div id="co_3" class="mon_contenu" style="display: none;">
         <center>Évènements et Distributions<br />
         <a href="http://poke-trenia.forumgratuit.org/t244-distribution-novembre#5293?tid=86f491e1c1cf5ae3599951945617e4ab">
         <img src="http://up.sur-la-toile.com/iULD" alt="Distribution de Novembre" title="..."/></a><br />
         <a href="http://poke-trenia.forumgratuit.org/t233-event-branette-americain#5202?tid=951a509f6b81c9fce6018485496212db">
         <img src="http://up.sur-la-toile.com/iUAf" alt="Branette Américain"  title="..."/></a>
         </center>         
         </div>
         
            <div id="co_4" class="mon_contenu" style="display: none;">
         <center>Les liens utiles du forum<br />
         <a href="http://poke-trenia.forumgratuit.org/f1-reglements?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Règlement</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f7-actualites-du-forum?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Actualités du Forum</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f9-boite-a-idees?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Postez vos idées</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f11-sondages?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Les Sondages</a><br />
         <a href="http://poke-trenia.forumgratuit.org/f71-projets-du-forum?tid=1cb8b8c7ed38b0a1879bce44e29d0a32">
         Les Projets du Forum</a><br/>
         </center>
         </div>
         
         <div id="co_5" class="mon_contenu" style="display: none;">
         <center>Les Top Sites, votez pour amenez de nouveaux inscrits.<br />
         <span><marquee><a href="http://www.pokemontrash.com/topsite/"><img src="http://www.pokemontrash.com/topsite/button.php?u=Ayfoth" alt="Pokémon" border="0"></a>  <a href="http://pokemon.power.free.fr/top-sites/"><img src="http://pokemon.power.free.fr/top-sites/button.php?u=Ayfoth" alt="Top-Sites Pokémon-Power !" border="1"></a>  <a href="http://www.root-top.com/topsite/gnik/in.php?ID=895" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/gnik/banner.gif" alt="" border="0"></a> <a href="http://www.root-top.com/topsite/mew/in.php?ID=338" class="postlink" target="_blank" rel="nofollow"><img src="http://img.root-top.com/topsite/mew/banner.gif" alt="" border="0"></a><a href="http://www.eternia-fr.net/topsite/"><img src="http://www.eternia-fr.net/topsite/votez.php?s=308" alt="Pokémon"></a></marquee></span></center>
         </div>
         
         <div id="co_6" class="mon_contenu" style="display: none;">
         <center>Voici nos partenaires, n'hésitez pas à leur rendre visite.<br/>
         <span><marquee><a href="http://pokemoncenter.forumgratuit.org/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/16/35/01/47/bouton10.gif" alt="" border="0"></a><a href="http://pokemon-event-revolution.un concurrent.com/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img26.xooimage.com/files/c/8/4/bouton-1a2a5b0.png" alt="" border="0"></a><a href="http://the-dark-dragon-team.un concurrent.fr/index.php" class="postlink" target="_blank" rel="nofollow"><img src="http://img66.xooimage.com/files/9/4/a/tddt-2a44a03.png" border="0" alt="" /></a></marquee></span>
         </center>
         </div>
         
         <div id="co_7" class="mon_contenu" style="display: none;">
         Mon contenu 7
         </div>
        </div></div></ul></div>

Dans mes onglets on voit nettement <li id=....

Le <li en html signifie que c'est un élement d'une liste.

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 15:39

Oh, je vois. C'est la première fois que je vois ça, c'est pour ça ! Merci.

Mais ça ne change rien... :/

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 15:49

Et la table l'as tu enlevé pour voir ?

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 15:49

Et bien je l'ai laissé en simple <table> ... ?

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 15:51

Enlève ça au début :

Code:
<table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center">

et ça de la fin

Code:
</td></tr></table>

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 15:54

Rien a faire...

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Dark Raviel le Mer 9 Nov 2011 - 16:08

Tu n'as pas modifier le javascript par hasard ?

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Mer 9 Nov 2011 - 16:09

Non, c'est exactement celui du tuto.

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Jeu 10 Nov 2011 - 18:34

Up ? :/

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Michi[yo]. le Dim 13 Nov 2011 - 1:41

Up ;; ?

Edit: Je pense que c'est bon, il fallait rajouter un petit truc dans le template overall_header... Pour qu'il reconnaisse mon js.

Michi[yo].
*

Féminin
Messages : 39
Inscrit(e) le : 09/05/2010

http://redgarden.forumactif.com/forum.htm
Michi[yo]. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tuto

Message par Invité le Jeu 17 Nov 2011 - 17:31

Bonjour,

Votre problème est-il résolu? Si c'est le cas, pensez à éditer votre premier message et à cocher l'icone résolu Wink . En effet lorsque les onglets ne fonctionnent pas en ayant scrupuleusement suivi le tuto, le soucis vient très souvent du template overall_ header qui n'est pas à jour Wink .

Cordialement.

Invité
Invité


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