Problème sur ma Page d'accueil

[Eil'liathan Tyan'Lirulin]

Bon voilà, je viens vous voir parce que j'aimerai pouvoir mettre des onglet que ma page d'accueil.

https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil

J'ai suivis ce tutoriel, en choisissant le modèle 1, il ne m'a pas semblé faire de bêtises et pourtant, quand je valide et bien sur mon PA, la seule chose que ça change sur ma page d'accueil c'est l'apparition des codes et non pas des onglets.

Pouvez vous m'aider ?

[Roxy.]

Bonsoir,
Êtes-vous sûr d'avoir rentré le css et le code javascript ?
Et si oui avez-vous touché à un code ?
Si oui le qu'elle ?

[Eil'liathan Tyan'Lirulin]

Oui, je suis certaine d'avoir bien rentré les codes, en suivant bien les instructions, je et je n'y est pas touché ><
A vrai dire, je suis un peu perdu avec le CSS

[Roxy.]

Puis-je avoir un aperçu du résultat ?

[Eil'liathan Tyan'Lirulin]

Heu de mon PA ou du résultat directement sur le forum ?
Parce que sur le forum, c'est simple, plutôt que les onglet attendu, c'est les code HTML qui apparaissent.

[Roxy.]

Du résultat directement sur le forum.

[Eil'liathan Tyan'Lirulin]

J'ai fait des screen, j'espère que se sera visible, je pouvais pas laisser mon fow comme ça ><

Spoiler:

[Roxy.]

Puis-je voir les trois codes ?
Il se peut que par erreur vous auriez modifiez quelques choses.

[Eil'liathan Tyan'Lirulin]

Spoiler:

[Roxy.]

Je veux dire, les avoir ici dans les balises codes.^^'
Je me suis mal exprimé.

[Eil'liathan Tyan'Lirulin]

JS

Code:

1. function changeOnglet(_this){
      2.    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
      3.    for(var i = 0; i < getOnglets.length; i++){
      4.        if(getOnglets[i].id){
      5.            if(getOnglets[i].id == _this.id){
      6.                getOnglets[i].className = 'mon_onglet_selected';
      7.                document.getElementById('c' + _this.id).style.display            = 'block';
      8.            }
      9.            else{
      10.                getOnglets[i].className = 'mon_onglet';
      11.                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
      12.            }
      13.        }
      14.    }         
      15. }

HTML

Code:

<div id="mes_onglets">[list=1]
[*]    <ul><li id="o_1" class="Contexte_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
[*]        <li id="o_2" class="Staff" onmouseover="changeOnglet(this);">Onglet 2</li>
[*]        <li id="o_3" class="Partenaires et Top Ssite" onmouseover="changeOnglet(this);">Onglet 3</li>
[*]        <li id="o_4" class="Galerie" onmouseover="changeOnglet(this);">Onglet 4</li>
[*]        <div class="clear"><div id="mes_contenus">
[*]    <div id="co_1" class="[color=DarkOrange][font=Georgia][i][size=21]
[url=http://www.hostingpics.net/viewer.php?id=858147Banire.png][img]http://img15.hostingpics.net/pics/858147Banire.png[/img][/url]

[size=12][color=RoyalBlue]Créé par cinq dieux, frères et sœurs, Quisaraedis aurait dût toujours connaitre Paix et Prospérité.[/color][/size][/size][/i][/font][/color][size=12]
[color=RoyalBlue][font=Georgia][i]Mais les Ténèbres peuvent même atteindre le Cœur et l'Âme des dieux.[/i][/font][/color]
[color=RoyalBlue][font=Georgia][i]La Guerre, la Désolation et la Mort frappèrent Quisaraedis, ses Royaumes et ses habitants.[/i][/font][/color]
[color=RoyalBlue][font=Georgia][i]Aujourd'hui,
 le monde se reconstruit, mais dans les profondeurs de la Terre, au
Nord, dissimulé par les montagnes, le Mal gronde et étend peu à peu son
ombre.[/i][/font][/color]

[color=RoyalBlue][font=Georgia][b][i]A vous de choisir votre camp.[/i][/b][/font][/color]

[color=RoyalBlue][font=Georgia][i]Déciderez
 vous de défendre le monde tel qu'il est aujourd'hui ? Porterez vous
allégeance aux Protecteurs immémoriaux du Sommeil des Dieux ? Choisirez
vous la Paix ?[/i][/font][/color]

[color=RoyalBlue][font=Georgia][i]Ou
 au contraire, mettrez vous vos capacités aux services du Maitre Sorcier
 ? Tenterez vous comme lui de réveiller le dieu maléfique Shizo ?
Choisirez vous le Chaos ?[/i][/font][/color]

[color=DarkOrange][font=Georgia][b][i][color=RoyalBlue]A vous de construire le monde que vous désirez.
[/color][/i][/b][/font][/color][color=MediumTurquoise][font=Georgia][i]
Nous sommes en l'An 3 905 de l'Age de la Paix, en plein Hrivë : la Saison Froide, au mois d'Hrila.[/i][/font][/color][color=DarkOrange][font=Georgia][b][i]
[/i][/b][/font][/color][/size]">Mon contenu 1</div>
[*]    <div id="co_2" class="[size=12][color=Red][b][i][font=Georgia][font=Vivaldi][size=25]Admin[/size][/font][/font][/i][/b][/color][/size][size=12][color=Red][size=25][color=Red]            [b][i]      [/i][/b][size=25][b][i][font=Vivaldi]M[/font][/i][/b][/size][size=25][b][i][font=Vivaldi]odérateur[/font][/i][/b][/size][size=25][b][i][u] [/u][/i][/b][/size][size=25][b][i]
[/i][/b][/size][/color][/size][/color][/size]
[size=12][color=Red][size=25][color=Red][size=25][b][i]      [url=http://www.casimages.com/][img]http://nsa22.casimages.com/img/2011/12/26/111226120800814553.png[/img][/url]        [/i][/b][/size][b][i][url=http://www.casimages.com/][img]http://nsa21.casimages.com/img/2011/12/24/111224073512814073.png[/img][/url] [/i][/b][/color][/size][/color][/size]" style="display: none;">Mon contenu 2</div>
[*]    <div id="co_3" class="[size=12][color=Red][b][i][size=25][font=Vivaldi]Nos partenaires[/font][/size][/i][/b][/color][/size] 
[center]
      [url=http://tarael.forumactif.com/][img]http://i42.servimg.com/u/f42/16/62/41/44/logo_110.jpg[/img][/url] [url=http://terrae.forumpro.fr/][img]http://img69.imageshack.us/img69/4260/terraebannire.png[/img][/url] [url=http://telhessia.forumgratuit.org/][img]http://img4.hostingpics.net/pics/975972boutte10.png[/img][/url] [url=http://dark-ages.forumactif.org/][img]http://img15.hostingpics.net/pics/520658verymini2.jpg[/img][/url] [url=http://aceternal.forumgratuit.org/][img]http://img11.hostingpics.net/pics/197909100ac.jpg[/img][/url] 

[size=25][color=Red][b][i] [/i][/b][/color][/size][size=25][color=Red][b][i][font=Vivaldi]
Top Site[/font][/i][/b][/color][/size][size=25][color=Red][b][i] [/i][/b][/color][/size][size=25][color=Red][b][i] 
[url=http://www.root-top.com/topsite/forumrpg/in.php?ID=6563][img]http://img.root-top.com/topsite/forumrpg/banner.gif[/img][/url] [url=http://www.root-top.com/topsite/heroicfantasy/in.php?ID=1278][img]http://img.root-top.com/topsite/heroicfantasy/banner.gif[/img][/url] [url=http://www.root-top.com/topsite/hoglard/in.php?ID=4744][img]http://img.root-top.com/topsite/hoglard/banner.gif[/img][/url][/i][/b][/color][/size][url=http://www.root-top.com/topsite/mary/in.php?ID=5811][img]http://img.root-top.com/topsite/mary/banner.gif[/img][/url]

[size=12][color=Red][b][i][u]
[/u][/i][/b][/color][/size][/center]
" style="display: none;">Mon contenu 3</div>
[*]    <div id="co_4" class="[color=red][u][i][b]Les Dieux[/b][/i][/u][/color]

[font=Comic Sans Ms][color=olive][i][u]Cyliea :[/u] Maîtresse de l'Air et du Bois, Mère des Elfes[/i][/color][/font]

[font=Comic Sans Ms][url=http://www.hostingpics.net/viewer.php?id=485712941.jpg][img]http://img15.hostingpics.net/pics/485712941.jpg[/img][/url][/font]

[font=Comic Sans Ms][color=orange]Apparition aux Sorciers[/color][/font]

[font=Comic Sans Ms][url=http://www.hostingpics.net/viewer.php?id=630919332.jpg][img]http://img15.hostingpics.net/pics/630919332.jpg[/img][/url][/font]

[font=Comic Sans Ms][color=brown][i][u]Cleyto : [/u]Maitre de la Terre et du Métal, Père des Nains[/i][/color][/font]

[font=Comic Sans Ms][url=http://www.hostingpics.net/viewer.php?id=175887Cleyto.jpg][img]http://img15.hostingpics.net/pics/175887Cleyto.jpg[/img][/url][/font]

[font=Comic Sans Ms][color=orange]Apparition aux Sorciers[/color][/font]

[url=http://www.hostingpics.net/viewer.php?id=3588921611.jpg][img]http://img4.hostingpics.net/pics/3588921611.jpg[/img][/url]
[font=Comic Sans Ms][i][color=cyan][u]
Surmae : [/u]Maitresse de l'Eau et de la Glace, Mère des Sirènes et Ondins[/color][/i][/font]

[font=Comic Sans Ms][url=http://www.hostingpics.net/viewer.php?id=380750301.jpg][img]http://img15.hostingpics.net/pics/380750301.jpg[/img][/url][/font]

[font=Comic Sans Ms][color=orange]Apparition aux Sorciers[/color][/font]

[url=http://www.hostingpics.net/viewer.php?id=275623574.jpg][img]http://img15.hostingpics.net/pics/275623574.jpg[/img][/url]

[font=Comic Sans Ms][i][color=yellow][u]Shaere :[/u] Maitresse de la Lumière et du Tonnerre, Mère des Humains[/color][/i][/font]

[url=http://www.hostingpics.net/viewer.php?id=362096643.jpg][img]http://img4.hostingpics.net/pics/362096643.jpg[/img][/url]

[font=Comic Sans Ms][color=orange]Apparition aux Sorciers[/color][/font]

[url=http://www.hostingpics.net/viewer.php?id=612637361.jpg][img]http://img15.hostingpics.net/pics/612637361.jpg[/img][/url]

[font=Comic Sans Ms][color=orange][i][u]Shizo : [/u]Maitre des Ombres et du Feu, Père des Gobelin et Trolls[/i][/color][/font]

[font=Comic Sans Ms][url=http://www.hostingpics.net/viewer.php?id=545122Shizo.jpg][img]http://img15.hostingpics.net/pics/545122Shizo.jpg[/img][/url][/font]

[font=Comic Sans Ms][color=orange]A la tête de son Armée[/color][/font]

[url=http://www.hostingpics.net/viewer.php?id=4622267912.jpg][img]http://img4.hostingpics.net/pics/4622267912.jpg[/img][/url]" style="display: none;">Mon contenu 4</div>
[*]</div></div></ul></div>

[/list]Il apparaissent avec les contenus. J'ai pas mis le CCS, je pense pas que se soit vraiment utile, le problème doit venir du JS ou HTML ><

[Roxy.]

Alors déjà, pour une P.A il est déconseillé de mélanger du bbcode et du html. Transformez le bbcode en html sera déjà plus propre !
Puis, pourquoi appelé une class pour mettre du bbcode ? La class sert à nommé pour, par la suite attribué du css à cette classe. Donc supprimé ceci et remplacé par l'attribut du css concerné pour chaque onglet. Il faut mettre le contenu entre les balises div et non dedans !
Ensuite il est normal que votre JS ne marche pas. Si vous regardez bien, le chiffre des lignes c'est copié dans votre code (surement lors du c/c). Il faut supprimé ceci.
Corrigez ceci, normalement ça marcherait déjà mieux

[Eil'liathan Tyan'Lirulin]

Je vais être embêtante, mais j'ai pas vraiment tout compris><
Je débute complétement avec le PA ><
Pour le BBcode, j'ai compris, enfin, je crois XD
Pour les chiffre des ligne aussi. Je n'ai pas besoin de tout aligné, enlever les chiffre suffira ?

Pour le reste en revanche >< J'suis vraiment désolée ><

[Roxy.]

D'abord supprimez tout le bbcode du code.
Enfaite prenons exemple pour les chiffres dans le js.

Code:

1. function changeOnglet(_this){

Vous voyez le 1. ?
Et bien enfaite, il correspond à la ligne. Sauf que là, il n'a rien à faire dans le code vu qu'il est à côté du code (autour du bbcode code). Donc recopiez le js sans prendre les chiffres.
Ensuite pour les class, elle permettent de donner un attribut à un contenu (là c'est une div). Donc si vous voulez lui ajouter du css à cette div, vous devrez utiliser :

Code:

.nom de l'attribut

Mais là, vous avez mis le css directement dans la class. Donc bon, si vous voulez mettre directement le css dans le xhtml (déconseillé c'est moins clair) ce n'est pas comme ça. Et surtout, n'utilisez pas de bbcode !

[Eil'liathan Tyan'Lirulin]

OKi, bon, je pense avoir tout saisi, seulement, je ne pourrais pas essayer avant au moins la fin de la semaine prochaine, mon ordinateur m'a planté et la, je suis sur mon BlackBerry, autant dire que pour tester les codes...pas desuite !!
Mais j'essaie dés que j'ai un nouvel ordi et je vous tiendrez au courant, en espérant que le sujet ne sera pas locké d'ici là ><

[Eil'liathan Tyan'Lirulin]

Bon voilà, j'ai tenté, mais ça ne donne tjrs rien >< Juste pour voir, j'ai mis les codes sans absolument rien toucher :

JS : Noté dans "Module" --> Gestion des codes Javascript--> créer

Code:

function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
            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';
                  }
              }
          }         
      }

HTML : noté dans "Affichage" --> généralité--> message d'accueil

Code:

<div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
                <li id="o_2" class="Onglet 1" onclick="changeOnglet(this);">Onglet 2</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
                <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></ul></div>

Css : Noté dans "Affichage"--> Couleur--> feuille de style CSS

Code:

 function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
            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';
                  }
              }
          }         
      }

J'ai essayé en fermant le HTM sur le PA dans la partie Message d'accueil, en l'ouvrant mais rien à faire, ça ne donne rien !!!

Le seul résultat un peu différent que j'ai obtenue, en mettant simplement les codes comme noté ci dessus c'est ça :

Spoiler:

[Eil'liathan Tyan'Lirulin]

Personne pour m'éclairer?

[Eil'liathan Tyan'Lirulin]

Bon ben me suis débrouillé autrement finalement. Merci Roxy d'avoir tenté de m'éclairer, je crois que je suis un cas désespéré en vrai XD