Pouvoir faire des onglets dans un message

[Sophia C.]

Bonjour tout le monde,

Alors voila, j'essaye depuis longtemps de faire le système des onglets dans un message. Mais je n'y arrive pas, alors je voudrais savoir si vous pourriez m'aider s'il vous plait. J'ai accès aux templates, qui ont déjà été modifié et le CSS est personnalisé.
Ah et je tiens à m'excuser si j'ai poster mon sujet au mauvais endroit, je n'étais pas sur de l'endroit où je devais le poster.

Merci d'avance.

[Sophia C.]

Up

[Sophia C.]

Petit Up !
Voici un exemple : http://bewitchment.forumactif.com/t55-the-kingship

[Melisa25]

Essaye ceci :

Tu crées une page HTML avec le contenu 1 et une page HTML avec le contenu 2.
Puis tu remplie ce code :

Code:


<div align="center"><table style="margin-top:-5px"><tr><td width="130px"><div style="margin:auto;text-align:center;width:100%"><a href="URLPAGEHTMLAVECTEXTE1" target="PV"><div style="text-transform: uppercase; color: #ac7243; background-color: #222222; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; text-shadow: #000000 1px 1px 1px; font-size : 10px; font-weight: bold;">NOMONGLET1</div></a></td><td width="130px"><a href="URLPAGEHTMLAVECTEXTE2" target="PV"><div style="text-transform: uppercase; color: #ac7243; background-color: #222222; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; text-shadow: #000000 1px 1px 1px; font-size : 10px; font-weight: bold; text-align:center">NOMONGLET2</div></a></div></td></tr></table></div>
<center><div style="background-color:#222222; width: 440px; height: 20px; "></div></center><div style="margin:auto;text-align:center;width:100%"><iframe src="URLPAGEHTMLAVECTEXTE1" name="PV" style="width: 420px; height: 210px; background-color: #222222; border-top: #111111 3px dotted; border-bottom: #111111 3px dotted; text-align:center; padding:10px" width="100" frameborder="0" height="250"></iframe></div><center><div style="background-color:#222222; width: 440px; height: 20px"></div></center></div>

Essaye pour voir car moi ça marche !

[Sophia C.]

C'est super ca marche ^^ ! Merci !
Mais ca devient compliqué si on utilisait ce code pour un modèle de scénario par exemple non ? J'aimerai pouvoir l'utiliser comment ça.

[Melisa25]

Je sais pas !
Comment ça scénario ?

[Sophia C.]

Et bien voici un exemple : http://immortalis-x.1fr1.net/t23-the-human-race
Mais avec ce code, ca fait beaucoup de page html...

[Melisa25]

c'est vrai !
Je vais essayer de trouver un autre code !

[Sophia C.]

Merci beaucoup !!

[Melisa25]

Malheureusement le code de l'exemple est constitué pareil !

C'est le code que l'on met dans le message :

Code:

<div><br><div style="margin:auto;text-align:center;width:100%"><DIV style="TEXT-ALIGN:center" align=left><SPAN style="FONT-FAMILY: Palatino Linotype"><FONT face=georgia size=7><blockquote><l style="letter-spacing: -1px; color:#70A5CC">
<span style="text-shadow: 1px 1px 1px #000000;">NOM OU TITRE </l> 
 <span style="text-shadow: 1px 1px 1px #000000;">  <h style="letter-spacing: -5px;"><i><font color="Black">SOUS LE NOM OU TITRE </font></i></h></FONT></SPAN>

<table><tr><td><iframe width="300" height="400" name="onglet" src="URL PAGE HTML AVEC ONGLET" frameborder="0" scrolling="no"></iframe></td><td><img src="URL DE LIMAGE DU PERSONNAGE" style="border:solid 5px #356C95;"></td></tr></table></div></div>

Et dans une page HTML il faut faire le tableau avec les onglet tu met ce code rempli puis tu copie l'URL et tu la met à la place de URL PAGE HTML AVEC ONGLET:

Code:

<style rel="stylesheet" type="text/css">
.pattitres {
  background-color: #4D4D4D;
  border-right: 1px solid #70A5CC;
  border-left: 1px solid #70A5CC;
  border-top: 1px solid #70A5CC;
  border-bottom: 0px solid #70A5CC;
-moz-border-radius: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 0px;
  padding-right: 0px;
  font-family: Georgia;
  text-align: center;
  color: #70A5CC;
text-shadow: 2px 1px 1px #000000;}

.patmessages {
  background-color: #4D4D4D;
  border-right: 1px solid #70A5CC;
  border-left: 1px solid #70A5CC;
  border-top: 0px solid #70A5CC;
  border-bottom: 1px solid#70A5CC;
-moz-border-radius: 5px;
  height:300px;
  font-family: Georgia;
  color: #70A5CC;}
</style>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="row1" rowspan="3" align="center"  valign="middle">
        <div class="gensmall">
            <script type="text/javascript">
              function patonglet1()
              {
                  document.getElementById('onglet1').style.display='block';
                  document.getElementById('onglet2').style.display='none';
                  document.getElementById('onglet3').style.display='none';
                  document.getElementById('onglet4').style.display='none';
              }
              function patonglet2()
              {
                  document.getElementById('onglet1').style.display='none';
                  document.getElementById('onglet2').style.display='block';
                  document.getElementById('onglet3').style.display='none';
                  document.getElementById('onglet4').style.display='none';
              }
              function patonglet3()
              {
                  document.getElementById('onglet1').style.display='none';
                  document.getElementById('onglet2').style.display='none';
                  document.getElementById('onglet3').style.display='block';
                  document.getElementById('onglet4').style.display='none';
              }
              </script>
<!-- BARRE D'ONGLETS -->
            <table width="100%">
              <tr>

                  <td width="20%"><div class="pattitres" onmouseover="javascript:patonglet1()">I N F O</div></td>
                  <td width="20%"><div class="pattitres" onmouseover="javascript:patonglet2()">S T O R Y</div></td>
                  <td width="20%"><div class="pattitres" onmouseover="javascript:patonglet3()">L I N K S</div></td>
            </tr>
          </table>
                                 
            <table width="100%">
              <tr width="100%"">

                <td width="100%">
<!-- PREMIER MODULE -->
                    <div id="onglet1">
                        <div class="patmessages">
                          <table width="100%" border="0" cellpadding="10" cellspacing="1">
                              <tr>
                                <td><div style="background: #4D4D4D; border: 1px solid #356C95; "><center><span style="text-shadow: 2px 1px 1px #000000;"><span style="font-size: 25px; line-height: normal"><font color="#70A5CC">Titre du contenu 1</font></span></span></center>
<blockquote>Contenu 1</blockquote>

<span style="text-shadow: 2px 1px 1px #000000;"><center><font color="#70A5CC">
CARACTISTIQUES</font></center></span><br></div>
<br><br><br>


                                 
                                </td>

                              </tr>
                          </table>
                        </div>
                    </div>
                 
<!-- DEUXIEME MODULE -->
                    <div id="onglet2" style="display: none;">
                        <div class="patmessages">
                          <table width="100%" border="0" cellpadding="10" cellspacing="1">
                              <tr>

                                <td>
                                    <div style="background: #4D4D4D; border: 1px solid #356C95;"> <center><span style="text-shadow: 2px 1px 1px #000000;"><span style="font-size: 25px; line-height: normal"><font color="#70A5CC">Titre contenu 2</font></span></span></center><br>

<center><div style="width:200px;height:120px;overflow:auto;"><span style="font-size: 12px; line-height: normal">
Histoire dans un iframe avec un ascenseur pour défiler</span>
</div></center><br>

<center><img src="LIMAGE DESIRE EN BAS DE LHISTOIRE" style="border:solid 2px #356C95;"></center><br></div>
                                </td>

                              </tr>
                          </table>
                        </div>
                    </div>
                 
                 
<!-- TROISIEME MODULE -->                 
                    <div id="onglet3" style="display: none;">
                     
                        <div class="patmessages">
                          <table width="100%" border="0" cellpadding="10" cellspacing="1">
                              <tr>

                                <td style="text-align: center;" width="100%">
                                  <div style="background: #4D4D4D; border: 1px solid #356C95; "><center><span style="text-shadow: 2px 1px 1px #000000;"><span style="font-size: 25px; line-height: normal"><font color="#70A5CC">Titre contenu 3</font></span></span></center>
<br>
<center><div style="width:210px;height:210px;overflow:auto;">
<left><div style="width: 200px;"><img src="URL IMAGE 1"><img src="URL IMAGE 2">
<i>Titre sous les 2 images </i><div style="width:190px;height:60px;overflow:auto;"><span style="font-size: 9px; line-height: normal">
Contenu 3</div></div>


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

                    </div>
                       


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

[Sophia C.]

Ok d'accord et bien un grand merci à toi =) !

[Alex Fowl]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif