Problème d'onglet avec ma PA.

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

Résolu Problème d'onglet avec ma PA.

Message par Bibouh le Dim 20 Nov 2011 - 20:44

Bonsoir et merci de m'aider ! Very Happy
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 !


Dernière édition par Bibouh le Mar 22 Nov 2011 - 12:49, édité 1 fois

Bibouh
**

Féminin
Messages : 57
Inscrit(e) le : 21/12/2010

http://aekeva.forumactif.com/
Bibouh a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglet avec ma PA.

Message par TEMSAMANI Hassan le Dim 20 Nov 2011 - 21:15

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 Wink

TEMSAMANI Hassan
*

Masculin
Messages : 40
Inscrit(e) le : 23/12/2010

http://studio-final-creativ.forumactif.org/
TEMSAMANI Hassan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglet avec ma PA.

Message par Bibouh le Lun 21 Nov 2011 - 18:06

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

Bibouh
**

Féminin
Messages : 57
Inscrit(e) le : 21/12/2010

http://aekeva.forumactif.com/
Bibouh a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème d'onglet avec ma PA.

Message par TEMSAMANI Hassan le Lun 21 Nov 2011 - 20:18

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.

TEMSAMANI Hassan
*

Masculin
Messages : 40
Inscrit(e) le : 23/12/2010

http://studio-final-creativ.forumactif.org/
TEMSAMANI Hassan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglet avec ma PA.

Message par Bibouh le Mar 22 Nov 2011 - 12:49

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 ! Very Happy

Bibouh
**

Féminin
Messages : 57
Inscrit(e) le : 21/12/2010

http://aekeva.forumactif.com/
Bibouh 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