Problème d'onglet avec ma PA.

[Bibouh]

Bonsoir et merci de m'aider !
J'ai un petit soucis avec ma page d'accueil, le contenu de mon deuxième onglet n’apparaît pas. Je vous mets ci dessous le code HTML (le CSS et javascript n'étant peut-être pas utiles). Pouvez-vous m'indiquer où est le problème si vous trouvez ? Merci d'avance !

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">~ Informations essentielles </li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">~ Autres</li>

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

    <div id="co_1" class="mon_contenu"><center><table><tr><td><div style="font-size: 15px;"><span style="color: #575249">

      <b>D</b>ans le monde d'<b>A</b>ekeva, la <b>M</b>agie a été bannie par la <b>S</b>cience.<br/> <br/>
      <b>C</b>ette dernière, incarnée par la <b>R</b>eine, règne d'une main de fer sur son <b>E</b>mpire.<br/><br/>
      <b>M</b>ais dans l'ombre, menée par un mystérieux chef, la <b>M</b>agie s'apprête à revenir ;
<br/> <b>D'</b>autant qu'<b>E</b>dfartig, allié incertain, pèse également dans la <b>B</b>alance...<br><br>
      <b>O</b>ù trouverez-vous votre place ?
<br/>
      </span></td><div align="right"><td><a href="http://www.imagup.com/data/1134378771.html"><img src="http://data.imagup.com/12/1134378771.png" /></a></div></td></div></tr></table><center>_______________________________________________________</center></center><table><tr><td><span style="color: #575249"><div style="font-size: 15px;"><b>N</b>ouveautés :</div></span> <br> ../12/11 → Vous ne rêvez pas, un nouveau design ! Pour plus d'infos, cliquez ici. <br><br> ../../11 → infos-du-moment-infos-du-moment-infos-du-moment. <br><br> ../12/11 → Bonnes vacances et joyeuses fêtes à tous ! ♥</td><td></td><td><span style="color: #575249"><div style="font-size: 15px;"><b>L</b>iens <b>u</b>tiles :</div></span><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/t828-livre-du-savoir-absolu">• Règlement du forum.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/t877-livre-du-savoir-complementaire">• Bien commencer.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/t1075-liste-personnage-predefinis">• Personnages Prédéfinis.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/f87-coffre-d-aekeva">• Se plongez dans le monde.</a></div><br><a style="text-shadow: 1px 1px 2px #ffffff;" href="http://aekeva.forumactif.com/f94-coffre-du-role-player">• Dans les moindres détails.</a></div></td><td></td><td><span style="color: #575249"><div style="font-size: 15px;"><b>T</b>op <b>s</b>ites :</div></span><br>A venir MDR</td></tr></div></table>

    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
</div></div></ul></div>

Bonne soirée !

[TEMSAMANI Hassan]

Bonsoir voila le code de base pour un menue a onglet pour version phpBB2

Voila les codes

- Gestion des codes Javascript

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';            }        }    }            }

- Feuille de style CSS

Code:

                .mon_onglet{  float: left;  padding: 2px 10px;  margin-right: 5px;  color: #000;  background: #fff;  border: 1px solid #000;  cursor: pointer;  margin-bottom: -1px;  list-style: none;} .mon_onglet:hover{  background: #b8efa1;}          .mon_onglet_selected{  float: left;  padding: 2px 10px;  margin-right: 5px;  color: #000;  background: #fff;  border-top: 1px solid #000;  border-right: 1px solid #000;  border-left: 1px solid #000;  border-bottom: 1px solid #fff;  cursor: pointer;  margin-bottom: -1px;  list-style: none;}            .clear{  clear: both;}.mon_contenu{  color: #000;  background: #fff;  border: 1px solid #000;  padding: 10px;    line-height: normal;  font-size: 11px;}#mes_contenus, #mes_onglets{  width: 400px;  margin: auto;}

- Code HTML sur la page 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="mon_onglet" 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>

Nous allons plus nous intéressez au code HTML sur la page d'accueil.[voila ce que tu a si j'ai bien vue tu n'as que 2 onglets ]

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="mon_onglet" onclick="changeOnglet(this);">Onglet 2</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></div></ul></div>

Voila il te suffit maintenant de remplacer Onglet 1 et 2 par ce que tu désirais et Mon contenu 1 et 2 de même en espérant que j'ai put t'aider ! Si d'autre problèmes survienne demande moi

[Bibouh]

Merci beaucoup de m'aider !
Seulement, cela va-t-il marcher pour une version phpbb3 ?

[TEMSAMANI Hassan]

Ha C'est donc une version phpBB3 Est bien normalement ces codes sont utilisés pour les versions phBB2-phBB3 Donc les codes sont bon après cela dépend de ton goût pour l'apparence du tableaux a onglet je te met un aperçu de ce tableau a onglet, celui dont je t'est donner les codes ci-dessus :

[MODÈLE 1]

Spoiler:

Bon vue que j'aime particulièrement ces codes je parle spécialement pour les menues a onglet je vais te laisser d'autre modèles avec les codes cela t'évitera de chercher partout sur le Forum est en espérant que cela te convienne aussi bon je me lance voila tout :

[MODÈLE 2]

Spoiler:

- 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';
                    }
                }
            }   
        }

- 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 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%;}

[MODÈLE 3]

Spoiler:

- 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';
                    }
                }
            }   
        }

- Le code du message d'accueil

Code:

        <table style="margin: auto;"><tr><td><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><td>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Mon contenu 1
        bla bla bla</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 CSS

Code:

        <table style="margin: auto;"><tr><td><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><td>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Mon contenu 1
        bla bla bla</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>

PS : Pour ajouter ou enlever un onglet il suffit pour rajouter de mettre une nouvelle ligne :

Code:

<li id="o_X" class="mon_onglet" onclick="changeOnglet(this);">Onglet X</li>

Code:

<div id="co_X" class="mon_contenu" style="display: none;">Mon contenu X</div>

"X" étant une variable, c'est un exemple c'est pour dire X onglet donc faut le remplacer par des chiffres. [Cela s'applique pour le modèle 1] Ajouter un onglet pour les autre modèles : [Cela s'applique pour le modèle 2 et 3]

Code:

<span id="o_X" class="mon_onglet" onclick="changeOnglet(this);">Onglet X</span>

Code:

<div id="co_X" class="mon_contenu" style="display: none;">Mon contenu X</div>

Et pour enlever un onglet il suffit d'enlever la ligne en question.

[Bibouh]

Je pensais avoir mis ces codes là mais apparemment non ! ^^'
J'aurai préféré le modèle 1, mais n'ayant pas les codes à la suite, j'ai mis ceux du modèle 2 et au moins ça marche puis je ne vais pas faire ma difficile ! Merci beaucoup en tout cas !