faire des onglets. [résolu]

Messages : 102 Date d'inscription : 22/07/2014

Question : Coucou :3

Alors en fait, je me pose la question depuis un certain temps en fait. o/ C'est quoi le code pour réaliser des onglets ?

Merci à la personne qui répondra à cette petite question ! :3

Réponse : Bonjour o/
Je viens donc répondre à ta question (je sais pas si j'ai le droit sinon tanpis je supprimerais Surprised

)
Donc pour créer un signature à onglet, si c'est bien de cela dont tu parlais.
Il y a deux choses à créer pour les onglets : Le CSS & le HTML.
Une signature simple comporte quelques rudiments à connaître, donc si tu n'as pas acquis les bases ce n'est pas la peine d'essayer d'en créer toi-même. Donc il n'y a pas de méthode qu'on puisse apprendre en une seconde, mais si tu souhaites en obtenir une, dirige-toi vers les commandes, je serais ravie d'en créer une à ton goût. :)
Une fois qu'un(e) codeur(euse) aura pris en charge ta commande et t'auras donné le code HTML/CSS, tu devras l'héberger via un site Forumactif, dont tu devras avoir accès au panneau d'administration, et insérer l'iframe, tout cela te sera expliqué. Mais si tu souhaites un bref aperçu du code, en voici un :

Spoiler:

Code:: <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<center>
<script type="text/javascript">
   //
</script>
<style type="text/css">

   .onglet {
   display: inline-block;
   margin: 0px 5px -4px 10px;
   font-family : Verdana;
   height : 20px;
   width : 120px;
   text-align: center;
   font-family: rock salt;
   background-color: #trasparant;
   color: #FFFFFF;
   border-radius: 10px;
   margin: -5px;
   }

   .onglet_0 {
   color: pink; /* Ici tu peux changer la couleur de l'onglet non sélectionné */
   position: 50px;
   font-family: 'Shadows Into Light', cursive;
   font-size: 25px;
   margin: -20px;
   cursor: pointer;


}

   .onglet_1 {
   font-family: 'Shadows Into Light', cursive;
   color: red; /* Ici, c'est pour changer la couleur de l'onglet sélectionné */
   position: relative;
   font-variant: small-caps;
   font-size: 40px;
   transition: color 3s ease-in-out;
   -ms-transition: color 3s ease-in-out;
   -webkit-transition: color 3s ease-in-out;
   -o-transition: color 3s ease-in-out;
   -moz-transition: color 3s ease-in-out;
   cursor: default;

}

   .contenu_onglet {
  background-image: url('http://shizoo-design.de/stuff/patterns/411.png'); /* Ici, tu peux chanager le fond de la signature à onglets */
   background-repeat:repeat;
   padding:5px;
   display:none;
   text-align:center;
   border-radius: 5px;
   height: 200px;
  width: 500px; /* heigh et width, c'est pour la taille de la signa */
   overflow : auto;
   box-shadow: 2px 2px 2px 2px grey;
   text-align: center;
   font-family: 'Lobster';
   transition: 2s ease;
-ms-transition: 2s ease;
-o-transition: 2s ease;
-webkit-transition: 2s ease;
-moz-transition: 2s ease;
  }

   </style>
</head>
<body>
<table cellspacing="0">
  <tr>
   <td><center>
   
   <span class="onglet_0 onglet" id="onglet_Moi" onclick="javascript:change_onglet('Moi');">Moi</span>
   
   <span class="onglet_0 onglet" id="onglet_Project" onclick="javascript:change_onglet('Project');">Autres</span>
   </td>
  </tr>

  <tr>
   <td>
   <div class="contenu_onglets">
   <div class="contenu_onglet" id="contenu_onglet_Moi">
   
BLA BLa blaaaaaaaaaaaa
   
   </div>
   <div class="contenu_onglet" id="contenu_onglet_Project">
   
<table><th> /* ici tu peux changer l'avatar dans Autres */ <img src="http://r18.imgfast.net/users/1812/13/57/97/avatars/2783-62.gif"><th>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.

Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.
   </table>
   
   </div>
   </td>
  </tr>
</table>

<script type="text/javascript">
   //
   var anc_onglet = 'Moi';
   change_onglet(anc_onglet);

   </script>
   <div style="color: pink; font-family: Lobster">Codage par Syylou. - cocktail-graph.com </div>
</body>

Donc tout ça c'était par exemple pour la page html, et ensuite tu insère ceci dans ta signature :

Code:: <iframe src="le lien de ta page html" frameborder="0" ></iframe>

Et voici ta signature placée :) J'espère que je t'ai aidé(e) ^^

Personnellement, je ne sais pas, mais je remonte un peu ce sujet pour que quelqu'un te dise ^^

Bonjour o/
Je viens donc répondre à ta question (je sais pas si j'ai le droit sinon tanpis je supprimerais Surprised

)
Donc pour créer un signature à onglet, si c'est bien de cela dont tu parlais.
Il y a deux choses à créer pour les onglets : Le CSS & le HTML.
Une signature simple comporte quelques rudiments à connaître, donc si tu n'as pas acquis les bases ce n'est pas la peine d'essayer d'en créer toi-même. Donc il n'y a pas de méthode qu'on puisse apprendre en une seconde, mais si tu souhaites en obtenir une, dirige-toi vers les commandes, je serais ravie d'en créer une à ton goût. :)
Une fois qu'un(e) codeur(euse) aura pris en charge ta commande et t'auras donné le code HTML/CSS, tu devras l'héberger via un site Forumactif, dont tu devras avoir accès au panneau d'administration, et insérer l'iframe, tout cela te sera expliqué. Mais si tu souhaites un bref aperçu du code, en voici un :

Spoiler:

Code:: <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<center>
<script type="text/javascript">
   //
</script>
<style type="text/css">

   .onglet {
   display: inline-block;
   margin: 0px 5px -4px 10px;
   font-family : Verdana;
   height : 20px;
   width : 120px;
   text-align: center;
   font-family: rock salt;
   background-color: #trasparant;
   color: #FFFFFF;
   border-radius: 10px;
   margin: -5px;
   }

   .onglet_0 {
   color: pink; /* Ici tu peux changer la couleur de l'onglet non sélectionné */
   position: 50px;
   font-family: 'Shadows Into Light', cursive;
   font-size: 25px;
   margin: -20px;
   cursor: pointer;


}

   .onglet_1 {
   font-family: 'Shadows Into Light', cursive;
   color: red; /* Ici, c'est pour changer la couleur de l'onglet sélectionné */
   position: relative;
   font-variant: small-caps;
   font-size: 40px;
   transition: color 3s ease-in-out;
   -ms-transition: color 3s ease-in-out;
   -webkit-transition: color 3s ease-in-out;
   -o-transition: color 3s ease-in-out;
   -moz-transition: color 3s ease-in-out;
   cursor: default;

}

   .contenu_onglet {
  background-image: url('http://shizoo-design.de/stuff/patterns/411.png'); /* Ici, tu peux chanager le fond de la signature à onglets */
   background-repeat:repeat;
   padding:5px;
   display:none;
   text-align:center;
   border-radius: 5px;
   height: 200px;
  width: 500px; /* heigh et width, c'est pour la taille de la signa */
   overflow : auto;
   box-shadow: 2px 2px 2px 2px grey;
   text-align: center;
   font-family: 'Lobster';
   transition: 2s ease;
-ms-transition: 2s ease;
-o-transition: 2s ease;
-webkit-transition: 2s ease;
-moz-transition: 2s ease;
  }

   </style>
</head>
<body>
<table cellspacing="0">
  <tr>
   <td><center>
   
   <span class="onglet_0 onglet" id="onglet_Moi" onclick="javascript:change_onglet('Moi');">Moi</span>
   
   <span class="onglet_0 onglet" id="onglet_Project" onclick="javascript:change_onglet('Project');">Autres</span>
   </td>
  </tr>

  <tr>
   <td>
   <div class="contenu_onglets">
   <div class="contenu_onglet" id="contenu_onglet_Moi">
   
BLA BLa blaaaaaaaaaaaa
   
   </div>
   <div class="contenu_onglet" id="contenu_onglet_Project">
   
<table><th> /* ici tu peux changer l'avatar dans Autres */ <img src="http://r18.imgfast.net/users/1812/13/57/97/avatars/2783-62.gif"><th>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.

Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.
   </table>
   
   </div>
   </td>
  </tr>
</table>

<script type="text/javascript">
   //
   var anc_onglet = 'Moi';
   change_onglet(anc_onglet);

   </script>
   <div style="color: pink; font-family: Lobster">Codage par Syylou. - cocktail-graph.com </div>
</body>

Donc tout ça c'était par exemple pour la page html, et ensuite tu insère ceci dans ta signature :

Code:: <iframe src="le lien de ta page html" frameborder="0" ></iframe>

Et voici ta signature placée :) J'espère que je t'ai aidé(e) ^^

Messages : 102 Date d'inscription : 22/07/2014

Merci à toi Carme d'avoir remonté le sujet. ~
Je connais les bases du codage, je sais coder "beaucoup" de chose, mais j'ai jamais réussis à faire des onglets en fait. x) Et non, ce n'est pas pour une signa à onglet, je suis pas trop de fan des signa a onglets depuis quelques semaines en fait... \o/ Ouais donc, hum, j'ai pas besoin de prendre une commande, je préfère coder moi-même, et je ne veux pas de signature à onglets, merci quand même. ^^

3 points pour ton explication Phoebe. o/

J'archive.

» Ce que vous êtes entrain de faire
» Faire une signature à porte sur e-anim :)
» Activer le HTML/CSS dans le forum [résolu]
» Comment faire vivre le forum en tant que membre ?
» - Orphère et t'as un pseudo pas assez long pour faire un titre :C