Problème avec la Pa en onglet

4 participants

Page 1 sur 2 1, 2  Suivant

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

Résolu Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:07

Bonjour

j'ai réussie a faire une Page d'accueil en onglet mais , je suis incapble de faire tenir mes onglet sans qu'il change . Enfait ce que j'aimerais qu'il fasse c'est qu'il change au clique .

http://midori.rpg-guild.org/


Dernière édition par Kaela Naoki le Jeu 7 Juil 2011 - 7:59, édité 5 fois
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:10

Bonsoir,

puis-je avoir le code de vos onglets s'il vous plait.

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Sera558 Productions™ Sam 25 Juin 2011 - 21:10

Pouvez-vous expliquer plus en détail s'il-vous-plait ?
Sera558 Productions™

Sera558 Productions™
Nouveau membre

Masculin
Messages : 28
Inscrit(e) le : 10/06/2011

http://alphacraft.forumgratuit.be/
Sera558 Productions™ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:12



Voilà .

Code:
 html>
    <head>
    <script type="text/javascript">
    function afficher(element){
      document.getElementById(element).style.display = "block";
    }

    function cacher(element){
      document.getElementById(element).style.display = "none";
    }
    </script>
    </head>
    <body>
      <table width="800"><tr><td width="200"><a href="#" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
          <input type="button" value="Bienvenue" class="drh1"/>
      </a><br>
   
      <a href="#" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
          <input type="button" value="Notre Staff" class="drh1" />
      </a><br>
   
      <a href="#" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
          <input type="button" value="Nos Event & Nouveauté" class="drh1" />
          </a><br>
   
      <a href="#" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
          <input type="button" value="Crédits & Partenaire" class="drh1" />
          </a>
   

      <div></td>
       
                    <td width="600" rowspan="2"><div id="drh">
          <div id="message1" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> Bienvenue sur Midori RPG {USER&amp;nbsp;LINK}
</td><td align="left">
</td></tr></table>

</span><table width="90%" cellspacing="1" cellpadding="0" border="0" align="center"><tr><td><span class="genmed"><b>Code:</b></span></td></tr><tr><td class="code"><div class="cont_code" curpos="0" maxpos="0" pageincrement="480" increment="10" collapsed="true"> <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi"><div style="width: 488px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;"> Titre 1</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 475px; height: 137px; border: 0px solid red; padding: 5px;"><font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> Texte 2

Bienvenue à Caelestis Skaï.</span></font></div><table><tbody><tr><td><div style="width: 358px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 345px; height: 100px; border: 0px solid red; padding: 5px;">
<font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> texte 1 </span></font></div> </td><td><div style="width: 125px; height: 125px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div></td></tr></tbody></table>
            </div> </div></td></tr></table><span class="postbody"> </div>
          <div id="message2" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> </div>
          <div id="message3" style="display: none;" >Contenu onglet 3</div>
          <div id="message4" style="display: none;" >Contenu onglet 4></div>
          </div>
      </div></td></tr>
    <td width="200" class="drh2"></td>
    </table>
    </body>
    </html>

Cordialement
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:14

Ce que je voudrais c'est que au lieux de changer lorsqu’on passe la sourie dessus que les onglet change au clique de la souri dessus . Comme ça l’onglet reste actif même si ont n'a pas la souri dessus .
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:16

Repérez les onMouseOver et remplacez les par des OnClick.

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:18

Bon je viens de le faire mais plus rien n'apparais .
Les onglets ne se change plus


Cordialement
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:25

ah j'ai trouver le problème Smile
Sa marche merci !
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:27

Non finalement j'ai empiré la situation , En plus de ne pas tenir il ne change plus .
http://midoriblood.rpg-guild.org/#
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:29

Votre problème est-il entièrement résolu ?
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:29

Non je l'ai empiré
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:31

Puis-je savoir où vous avez trouver le modèle de votre PA ? Il y a certaines choses qu'il faudrait en fait appellés dans un fichier javascript à part, et le reste laisser dans votre code.

Je pourrais ainsi mieux vous aiguiller et aider.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:32

Hum en fait je ne peut pas vraiment dire ou j'ai trouvé le code car je l'ai trouver dans un sujet ici , j'ai suivi ce qu'il faillais faire et ces que ça ma donner .
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:37

Essayer déjà de le mettre ainsi :

Code:
  <script type="text/javascript">
    function afficher(element){
      document.getElementById(element).style.display = "block";
    }

    function cacher(element){
      document.getElementById(element).style.display = "none";
    }
    </script>
      <table width="800"><tr><td width="200"><a href="#" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
          <input type="button" value="Bienvenue" class="drh1"/>
      </a><br>
 
      <a href="#" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
          <input type="button" value="Notre Staff" class="drh1" />
      </a><br>
 
      <a href="#" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
          <input type="button" value="Nos Event & Nouveauté" class="drh1" />
          </a><br>
 
      <a href="#" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
          <input type="button" value="Crédits & Partenaire" class="drh1" />
          </a>
 

      <div></td>
     
                    <td width="600" rowspan="2"><div id="drh">
          <div id="message1" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> Bienvenue sur Midori RPG {USER&amp;nbsp;LINK}
</td><td align="left">
</td></tr></table>

</span><table width="90%" cellspacing="1" cellpadding="0" border="0" align="center"><tr><td><span class="genmed"><b>Code:</b></span></td></tr><tr><td class="code"><div class="cont_code" curpos="0" maxpos="0" pageincrement="480" increment="10" collapsed="true"> <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi"><div style="width: 488px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;"> Titre 1</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 475px; height: 137px; border: 0px solid red; padding: 5px;"><font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> Texte 2

Bienvenue à Caelestis Skaï.</span></font></div><table><tbody><tr><td><div style="width: 358px; height: 17px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div><div style="background-color: rgba(100, 100, 100, 0.1); color: rgba(100, 100, 100, 0.2); overflow: auto; width: 345px; height: 100px; border: 0px solid red; padding: 5px;">
<font face="georgia"><span style="font-size: 12px; line-height: normal; color: rgb(105, 105, 105);"> texte 1 </span></font></div> </td><td><div style="width: 125px; height: 125px; background-color: rgba(50, 100, 50, 0.3);"><p style="font-variant: small-caps;"><span style="font-size: 13px; line-height: normal; color: white;">Un Évent ?</span></p></div></td></tr></tbody></table>
            </div> </div></td></tr></table><span class="postbody"> </div>
          <div id="message2" style="display: none;" > <table style="BORDER-BOTTOM: rgb(193,89,0) 3px solid; BORDER-LEFT: rgb(163,89,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 350px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(163,89,0) 3px solid; BORDER-RIGHT: rgb(163,89,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tr><td align="left"> </div>
          <div id="message3" style="display: none;" >Contenu onglet 3</div>
          <div id="message4" style="display: none;" >Contenu onglet 4></div>
          </div>
      </div></td></tr>
    <td width="200" class="drh2"></td>
    </table>

Je reprends à partir de votre premier code. Nous verrons pour d'autres changements ensuite. Les codes que j'ai enlevé, on les mets normalement dans une page html, pas dans un forum ^^

Y'a-t-il un progrès ?
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:40

ça me donne la même chose que j'avais au départ mais ses beaucoup mieux que ce que j'Avais il y a quelques seconde . Par contre c'est au moment de mêtre les Onglet cliquable que tout a déformé . Donc la je dois re changer les onmouseover par les onclick ?
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:43

Tentez oui de les refaire en onclick s'il y avait un mieux.

De plus, si vous pouviez retrouver le sujet cela serait un grand plus. Je comprendrais mieux comment fonctionne e code ^^
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:48

Non ça ne marche toujours pas , ça me redonne exactement la même chose que tous a l'heure .
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:49

je vais tenter de trouver le sujet
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 21:54

Pensez à éditer vos messages, plutot que de faire des double posts ^^

J'ai trouvé un sujet qui vous permettrai d'avoir le meme effet, mais un peu différent ^^

Essayer ceci : mettez dans Généralités :

Code:
<script type="text/javascript">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';
            }
        }
    } 
}</script>
<table><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></div></td>
<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></td></tr></table>

à personnaliser, et dans votre css :

Code:
.mon_onglet{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}     
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}       
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 120px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

à personnaliser également avec votre contenu.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Sam 25 Juin 2011 - 21:57

Oui mais les onglet ne marche pas ...
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Sam 25 Juin 2011 - 22:35

Tentez vraiment de me retrouver votre sujet, celui où vous aviez trouvé le code de base.

C'est le seul moyen pour que je puisse reprendre de la base avec vous.

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Dim 26 Juin 2011 - 17:32

Non je le trouve vraiment pas , j'ai par contre trouver un autre tableau que j'ai fait --> https://forum.forumactif.com/t300080-boite-onglet?highlight=Pa+onglet . J'ai réeusi a travaillé dessu et a y ajouté du contenu mais les onglet on arrêté de fonctionner , http://midori.rpg-guild.org/forum

Le Code de ma PA
Code:
 <div id="mes_onglets">
        <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
            <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
            <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos Partenaire</li>
            <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Crédit &amp; Nouveauté</li><div id="mes_contenus">

        <div id="co_1" class="mon_contenu"><br>Bienvenue Sur Midori Rpg
<table border="1" cellpadding="4" cellspacing="0" width="100%">        <tbody><tr valign="TOP">        <td align="left" width="33%"> 
            <font size="4"><span style="font-family: Palatino Linotype;">Midori Rpg :)

        </span></font></td>        <td align="left" width="67%">
            <font style="color: Black;" size="4"><span style="font-family: Palatino Linotype;">NOTRE CONTEXTE</span></font><br></td>    </tr>    <tr valign="TOP">        <td align="left" width="33%"><div style="text-align: justify;">
           
</div><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr><td><strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr align="center"><td><br></td></tr><tr align="left"><td class="code"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">~ Règlement ~</a><br><a href="http://midori.rpg-guild.org/t201-notre-contexte">~ Contexte ~</a><br><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~ Fiche de Présentation ~</a><br><a href="http://midori.rpg-guild.org/f3-personnage-predefinie">~ Perso Vaccant ~
</a><br>~ Partenaria ~</td></tr></tbody></table></strong><strong><span class="postbody"></span></strong></td></tr></tbody></table>
        </td>        <td align="left" width="67%">
           
<strong><strong></strong></strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr></tr><tr><td><br>
Il y'a des millions d'années de cela, tandis que les années d'un
 monde sans rédempteur s'écoulaient lentement dans le vide, la terre
hurlait sans cesse sa peine de ne pouvoir être sauvée. C’est alors que
dans un amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
 Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
fanait peu à peu sous l'emprise des humains qui faisaient approcher
l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
 noble de haute importance, elle se démarqua très vite par sa
différence, elle qui n'était pas humaine et dont les yeux brillait comme
 un clair de lune étincelant, elle était considérée comme un ange... --&gt; <a href="http://midori.rpg-guild.org/t201-notre-contexte">Cliqué ici </a><br></td></tr></tbody></table>

            </td></tr></tbody></table>
        </div>

        <div id="co_2" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 2)
        </div>

        <div id="co_3" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 3)
        </div>
       
        <div id="co_4" class="mon_contenu" style="display: none;">
<br>Faites pas attention (Phase de test!! 4)
        </div>
   
</div></ul></div>


Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Dim 26 Juin 2011 - 18:09

Comme noté dans le post par Isolde, vous devez avoir trois choses :

  • 1 fichier js à héberger et à appeller ou à mettre directement dans votre PA
  • un code pour la PA
  • un code pour la css


Avez-vous tout mis ?

Si oui, fournissez moi les trois (en MP si cela vous dérange de me les donner ici).
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Dim 26 Juin 2011 - 18:51

Code de la PA
Code:
 
    <div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos Partenaire</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Crédit &amp; Nouveauté</li><div id="mes_contenus">

            <div id="co_1" class="mon_contenu"><br>Bienvenue Sur Midori Rpg
    <table border="1" cellpadding="4" cellspacing="0" width="100%">        <tbody><tr valign="TOP">        <td align="left" width="33%">
                <font size="4"><span style="font-family: Palatino Linotype;">Midori Rpg :)

            </span></font></td>        <td align="left" width="67%">
                <font style="color: Black;" size="4"><span style="font-family: Palatino Linotype;">NOTRE CONTEXTE</span></font><br></td>    </tr>    <tr valign="TOP">        <td align="left" width="33%"><div style="text-align: justify;">
             
    </div><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr><td><strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr align="center"><td><br></td></tr><tr align="left"><td class="code"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">~ Règlement ~</a><br><a href="http://midori.rpg-guild.org/t201-notre-contexte">~ Contexte ~</a><br><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~ Fiche de Présentation ~</a><br><a href="http://midori.rpg-guild.org/f3-personnage-predefinie">~ Perso Vaccant ~
    </a><br>~ Partenaria ~</td></tr></tbody></table></strong><strong><span class="postbody"></span></strong></td></tr></tbody></table>
            </td>        <td align="left" width="67%">
             
    <strong><strong></strong></strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr></tr><tr><td><br>
    Il y'a des millions d'années de cela, tandis que les années d'un
    monde sans rédempteur s'écoulaient lentement dans le vide, la terre
    hurlait sans cesse sa peine de ne pouvoir être sauvée. C’est alors que
    dans un amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
    Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
    fanait peu à peu sous l'emprise des humains qui faisaient approcher
    l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
    noble de haute importance, elle se démarqua très vite par sa
    différence, elle qui n'était pas humaine et dont les yeux brillait comme
    un clair de lune étincelant, elle était considérée comme un ange... --&gt; <a href="http://midori.rpg-guild.org/t201-notre-contexte">Cliqué ici </a><br></td></tr></tbody></table>

                </td></tr></tbody></table>
            </div>

            <div id="co_2" class="mon_contenu" style="display: none;">
    <br>Faites pas attention (Phase de test!! 2)
            </div>

            <div id="co_3" class="mon_contenu" style="display: none;">
    <br>Faites pas attention (Phase de test!! 3)
            </div>
         
            <div id="co_4" class="mon_contenu" style="display: none;">
    <br>Faites pas attention (Phase de test!! 4)
            </div>
     
    </div></ul></div>

Code du Css
Code:
    ul, li{
      list-style: none;
    }
    .mon_onglet{
      float: left;
      padding: 2px 10px;
      margin-right: 5px;
      color: #000;
      background: #ffffff;
      border: 1px solid #ff0000;
      cursor: pointer;
      margin-bottom: -1px;
    }
    .mon_onglet:hover{
      background: #b8efa1;
    }         
    .mon_onglet_selected{
      float: left;
      padding: 2px 10px;
      margin-right: 5px;
      color: #000;
      background: #ffffff;
      border-top: 1px solid #ff0000;
      border-right: 1px solid #ff0000;
      border-left: 1px solid #ff0000;
      border-bottom: 1px solid #ffffff;
      cursor: pointer;
      margin-bottom: -1px;
    }           
    .clear{
      clear: both;
    }
    .mon_contenu{
      color: #000;
      background: #ffffff;
      border: 1px solid #ff0000;
      padding: 10px;
            margin: -1px;         
    }
    #mes_contenus, #mes_onglets{
      width: 700px;
    }

Du fiché js. --> collez dans un html
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';
                }
            }
        }         
    }
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Dim 26 Juin 2011 - 18:55

enlever votre page html

et insérez en entier dans votre pa :

Code:
<script>    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';
                    }
                }
            }       
        } </script>   
        <div id="mes_onglets">
                <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
                    <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le Staff</li>
                    <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos Partenaire</li>
                    <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Crédit &amp; Nouveauté</li><div id="mes_contenus">

                <div id="co_1" class="mon_contenu"><br>Bienvenue Sur Midori Rpg
        <table border="1" cellpadding="4" cellspacing="0" width="100%">        <tbody><tr valign="TOP">        <td align="left" width="33%">
                    <font size="4"><span style="font-family: Palatino Linotype;">Midori Rpg :)

                </span></font></td>        <td align="left" width="67%">
                    <font style="color: Black;" size="4"><span style="font-family: Palatino Linotype;">NOTRE CONTEXTE</span></font><br></td>    </tr>    <tr valign="TOP">        <td align="left" width="33%"><div style="text-align: justify;">
               
        </div><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr><td><strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr align="center"><td><br></td></tr><tr align="left"><td class="code"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">~ Règlement ~</a><br><a href="http://midori.rpg-guild.org/t201-notre-contexte">~ Contexte ~</a><br><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~ Fiche de Présentation ~</a><br><a href="http://midori.rpg-guild.org/f3-personnage-predefinie">~ Perso Vaccant ~
        </a><br>~ Partenaria ~</td></tr></tbody></table></strong><strong><span class="postbody"></span></strong></td></tr></tbody></table>
                </td>        <td align="left" width="67%">
               
        <strong><strong></strong></strong><table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tbody><tr></tr><tr><td><br>
        Il y'a des millions d'années de cela, tandis que les années d'un
        monde sans rédempteur s'écoulaient lentement dans le vide, la terre
        hurlait sans cesse sa peine de ne pouvoir être sauvée. C’est alors que
        dans un amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
        Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
        fanait peu à peu sous l'emprise des humains qui faisaient approcher
        l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
        noble de haute importance, elle se démarqua très vite par sa
        différence, elle qui n'était pas humaine et dont les yeux brillait comme
        un clair de lune étincelant, elle était considérée comme un ange... --&gt; <a href="http://midori.rpg-guild.org/t201-notre-contexte">Cliqué ici </a><br></td></tr></tbody></table>

                    </td></tr></tbody></table>
                </div>

                <div id="co_2" class="mon_contenu" style="display: none;">
        <br>Faites pas attention (Phase de test!! 2)
                </div>

                <div id="co_3" class="mon_contenu" style="display: none;">
        <br>Faites pas attention (Phase de test!! 3)
                </div>
           
                <div id="co_4" class="mon_contenu" style="display: none;">
        <br>Faites pas attention (Phase de test!! 4)
                </div>
       
        </div></ul></div>

Cela marche sur mon forum (lien dans profil)... Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Dim 26 Juin 2011 - 21:02

Ps en collant tous le ficher sa bloque tous les onglet .

Bon j'ai trouver comment mais en ajoutant du contenus les onglet on encore fait la même chose , également j'aurais une autre question comment fessons nous pour mettre les infobulle de façons horizontal ?

Cordialement
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Dim 26 Juin 2011 - 22:03

Il faut mettre chaque infobulle dans les cellules d'un tableau, ainsi elles resteront alignées. ^^
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par Kaela Naoki Lun 27 Juin 2011 - 4:23

Ok merci , mais pour le tableau a onglet il a recommencer , les onglets ne fonctionne plus ...
Kaela Naoki

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://dead-or-alive.forumactif.com
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par myefox2000 Lun 27 Juin 2011 - 4:46

Pouvez-vous expliquer plus en détail s'il-vous-plait ?
avatar

myefox2000
Nouveau membre

Messages : 2
Inscrit(e) le : 27/06/2011

myefox2000 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la Pa en onglet

Message par SoraNoHime Lun 27 Juin 2011 - 5:05

Remplissez déjà les contenus que vous désirez mettre, puisqu'apparemment le tableau ne marche plus à partir de là. Puis donnez moi le code de votre tableau complet (par MP si ça vous dérange de le mettre ici) ainsi que de votre css (idem par MP si cela vous dérange)

Ensuite nous verrons.

COrdialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

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