• Signature codée

    Après une demande, voilà un tuto pour faire une signature en css et html à mettre sur les forum. 
    /! Vérifiez que le forum accepte que les membres utilisent le html. 



    C'est joli, certes, mais comment on fait ça? Pour les EklaBloger, nous avons la chance de pouvoir créer une page html et de l'héberger directement:
    "Contenu => Gérer les fichier => Nouveau fichier" et nommez le "signature.html"
    /! Javascript activé!
    Pour les autres, sortez votre bloc note, notepad, ou un quelconque autre logiciel d'édition de texte. N'oubliez pas d'enregistrer en .html

    Nous allons créer une page html de A à Z voici donc la structure de base:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">
    CONTENU JS
      </script>
           
      <style type="text/css">
    CONTENU CSS
      </style>
    </head>

        <body>
           
    CONTENU HTML     
            
        </body>
    </html>
     

    On va commencer par le javascript

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">

    //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->   </script>
           
      <style type="text/css">
    CONTENU CSS
      </style>
    </head>

        <body>
           
    CONTENU HTML     
            
        </body>
    </html>
     

    Et on ne touche à rien!
    Ensuite, CSS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
                   </script>

           
      <style type="text/css">
    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }

     .contenu_onglet{display:none;
              height : Xpx; /* HAUTEUR */
              width : Xpx; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;
    }

    </style>

    </head>

        <body>

    CONTENU HTML 

    </body>

    </html>

     

    Modifiez ce qui est en rouge pour personnaliser votre signature.
    Enfin, le HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
                   </script>

      <style type="text/css">

    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }

    .contenu_onglet{display:none;
              height : Xpx; /* HAUTEUR */
              width : Xpx; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;}

    </style>

    </head>

        <body>

            <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">ONGLET 1</span>
    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ONGLET 2</span>
    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
            </div>

              <div class="contenu_onglet" id="contenu_onglet_1er">
              CONTENU DU 1ER ONGLET
              </div>

              <div class="contenu_onglet" id="contenu_onglet_2eme">
              CONTENU DU 2EME ONGLET
              </div>

              <div class="contenu_onglet" id="contenu_onglet_3eme">
              CONTENU DU 3EME ONGLET
              </div>

            <script type="text/javascript">
            //<!--
                    var anc_onglet = '1er';
                    change_onglet(anc_onglet);
            //-->
            </script> 

    </body>

    </html> 

    Modifiez "ONGLET 1" "ONGLET 2" et "ONGLET 3" par les titre de vos onglet. Si vous voulez rajouter des onglet, il suffit de rajouter cette ligne:

    <span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">ONGLET 4</span>

    sous

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>

    et cette ligne

    <div class="contenu_onglet" id="contenu_onglet_4eme">
              CONTENU DU 4EME ONGLET
              </div>

    sous

    <div class="contenu_onglet" id="contenu_onglet_3eme">
              CONTENU DU 3EME ONGLET
              </div>

    Si c'est votre 5eme onglet, remplacez 4 par 5 etc...

    Tout à la fin du code, il y a un petit passage de js en plus qui nous permet d'afficher la signature. "1er" indique que l'onglet visible par défaut est le premier. Si vous voulez qu'on voit d'abord le 2eme onglet, remplacez "1er" par "2eme"

    C'est bien beau tout ça, mais comme j'y met en signature? Au moyen d'une iframe ;)
    Enregister votre signature et hébergez là et récupérez l'adresse. Collez l'adresse dans ce code, puis mettez le dans votre signature:

    <iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="URL" frameborder="no" scrolling="no" width="320" height="240"></iframe>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--

                    function change_onglet(name)

                    {

    document.getElementById('onglet_'+anc_onglet)

    .className = 'onglet_0 onglet';

    document.getElementById('onglet_'+name).

    className = 'onglet_1 onglet';

    document.getElementById('contenu_onglet_'+anc_onglet)

    .style.display = 'none';

    document.getElementById('contenu_onglet_'+name).

    style.display = 'block';

                            anc_onglet = name;

                    }

            //-->

                   </script>

           

      <style type="text/css">

    .onglet,

    .onglet_0 {display:inline-block;

              width: 150px;

              background: #a34626; 

              margin:auto;

              margin-bottom: -1px;

              padding:3px;

              border:1px solid black;

              border-top: 4px solid black;

              border-radius: 10px 10px 0 0;

              font-family : Impact;

              letter-spacing: 3px;

              text-align: center;

              -webkit-transition: 300ms;

              -moz-transition: 300ms;

              transition: 300ms;

    }

     

    .onglet:hover {background: #bd5f2b

          }

     .contenu_onglet{ font-size : 14px ; 

              background: #a34626;

              border-radius : 20px;

              border: 1px solid #000000;

              border-left: 6px solid black;

              border-right: 6px solid black;

              box-shadow: 0 0 10px black, inset 0 0 10px black;

              padding: 10px;                

              display:none;

              height : 200px;

              width : 600px; 

              overflow : auto;

              color: #e7c3b7;

              text-shadow : 1px 1px 0px black; 

    }

          .cadre { border-radius: 10px;

              background: rgba(0, 0, 0, 0.3);

              width: 400px;

              height: 187px;

              float: right;

              text-align: left;

              padding: 5px;

              box-shadow: 0 0 10px #ee7837, inset 0 0 5px black;

              overflow : auto; 

    }

    .contact {border: 1px solid black;

              border-left: 3px solid black;

              border-right: 3px solid black;

              background: rgba(238, 120, 55, 0.6);

              padding: 5px;

              margin-top: 10px;

              color: black

    }

          a {color: black;

              text-decoration: none;

              text-shadow: none;

              font-weight:bold;

          }

    </style>

    </head>

        <body>

            <div class="onglets">

    <center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">SIGNATURE</span>

    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ANCIENS KITS</span>

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">MOI</span>

    </center>

            </div>

              <center> <div class="contenu_onglet" id="contenu_onglet_1er">

    <img src="http://ekladata.com/LL_FFgnJyGMVWv_TAg6rnfpIIhk.png" alt=""><br/></div>

              <center> <div class="contenu_onglet" id="contenu_onglet_2eme">

                  <img src="http://ekladata.com/1RsvO8ELdqRX3DnRps1urL-MPSI.jpg"/><br/>

                  <img src="http://ekladata.com/qEqY2wyUKiY7IpIDa6ZhyGWFwJQ.png"/>

    </div>

              <center> <div class="contenu_onglet" id="contenu_onglet_3eme">

                  <div style="float:left"><img src="http://ekladata.com/d1b3rsARkHy-JOObf5r016zv8Ok.png"/><div class="contact"><a href="http://fanstasy-graph.eklablog.net">Blog</a> | <a href="http://nagalia.deviantart.com/">Deviantart</a></div></div>

                  <div class="cadre"><p>Je suis Nagalia!<br/>

                      16 ans, terminale S et voulant devenir web-designeuse ^^

                      <br/><br/>

                      J'adore dessiner, des personnages de manga ou fantastique genre des elfes. En fait, je dessine beaucoup des personnages sortant tout droit de mon imagination de folle XD Genre Nagalia, une elfe noire complètement sadique :P Bref voilà pour la petite histoire sur l'origine de mon pseudo. Vous l'aurez deviné, je suis fan d'héroïque fantasy!<br/>

                      Il faut également préciser que je suis une veritable accro au graph!<br/><br/>

                      Bref, vous voyez qu'on peut mettre vraiment ce qu'on veut dans cette signature, et sans aucune limite de caractère ;)</p> </div></div>

             <script type="text/javascript">

            //<!--

                    var anc_onglet = '3eme';

                    change_onglet(anc_onglet);

            //-->

            </script>             

    </body>

    </html>

     

     


    Tags Tags : , , , ,
  • Commentaires

    1
    Dimanche 17 Juin 2012 à 11:14

    My Gosh . *0* Super ce tuto' & en plus j'avais besoin d'une signature codée :D . [[ Nagalia serait un ange tombée du Ciel ? :0 ]]

    Merci en tout cas !! ^-^ . #LullaBby

    2
    Dimanche 17 Juin 2012 à 12:00

    De rien :)

    3
    Dimanche 17 Juin 2012 à 12:18

    Sa à l'air long,mais intérésant >.<

    4
    Dimanche 17 Juin 2012 à 12:22

    J'avoue, c'est un peu long ^^'

    5
    Dimanche 17 Juin 2012 à 12:23

    Je le ferai plus tard,lorce que je serai d'humeur x)

    Ou cet après-midi....*indécision*

    6
    Dimanche 17 Juin 2012 à 12:49

    :mode.incrustation.on: Moi pas aujourd'hui en tout cas, pas le temps, peut-être dans une semaine xD . :mode.incrustation.off:

    7
    Dimanche 17 Juin 2012 à 13:45

    je t'aime *w* 

    8
    Dimanche 17 Juin 2012 à 16:54

    C'est super *ç* Enfin ! On va savoir comment font les grands pros avec leur signature codée *s'incline* Merci Déesse du Codage %D

    9
    Dimanche 17 Juin 2012 à 19:40

    Nagalia, tu l'as déjà utilisé sur un forum ? Ce qui m'intrigue c'est l'intégration du javascript. Un peu dangereux pour un forum.

    10
    Mardi 19 Juin 2012 à 21:58

    Super Nagi *o*

    Ze t'adore.

    11
    Mercredi 20 Juin 2012 à 17:00

    c'est pas pour les blogs ?

    Tu peux faire tuto pour blog ?

    12
    Mercredi 20 Juin 2012 à 17:04

    La même chose pour les blogs... --

    13
    Mercredi 20 Juin 2012 à 17:05

    Ah...pourtant ca marche pas....

    14
    Mercredi 20 Juin 2012 à 17:09

    Pour moi, ça marche.

    15
    Mercredi 20 Juin 2012 à 17:10

    pas pour moi...

    16
    Samedi 23 Juin 2012 à 14:27

    Arigatou, on t'aime tu sais *w* !

    17
    Odd Dellarobia Profil de Odd Dellarobia
    Samedi 23 Juin 2012 à 17:23

    Moi ça marche pas ! :'( J'ai mis tout ce que tu as mis en modifiants les données en rouge mais bizzarement ça me mets TON résulat !! Regarde >>

    http://data0.eklablog.net/code-lyoko-blog/perso/signature.html

    Tu peux m'aidez stp ?

    18
    Samedi 23 Juin 2012 à 18:10

    Odd' ne modifie pas les ID déjà. Le CSS doit être faux, enfin, donne moi ton code.
     

    19
    Odd Dellarobia Profil de Odd Dellarobia
    Samedi 23 Juin 2012 à 18:29

    ok voilà mon (trés long) code :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">
    <script type="text/javascript">

    //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display 'block';
                            anc_onglet name;
                    }
            //-->   </script
      
           
      <style type="text/css">
    <style type="text/css">
    .onglet,
    .onglet_0 {display:inline-block;
              border-radius}
     .contenu_onglet{display:none;
              height 550px/* HAUTEUR */
              width 250px/*LARGEUR*/
              overflow auto;
              border-radius10px;
              10px;
              10px;
    }
    </style>
      </style>
    </head>

        <body>
           

        <body>
            <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Moi</span>
    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Ma Signature</span>
    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Mon Avatar</span>
            </div>
              <div class="contenu_onglet" id="contenu_onglet_1er">
              Bonjour ! Moi c'est Tauron Adanedhel !
                  Je suis obligé de parcourir Alona pour trouvé l'antidote qui guérirras mon pére.
                  Nos guérrisseurs ne peuvent rien contre cette maladie inconnue. Je dois sauvé mon pére !
                  Je ne sais pas exactement où chercher mais, ce qui est sur, c'est que je trouverais
                  la potion, et tout rentras dans l'ordre !
                  Je suis un elfe de sang pure voyons ! ^^
              </div>
              <div class="contenu_onglet" id="contenu_onglet_2eme">
               http://data0.ek.la/the-world-of-mangas-graph/perso/signature%20alona.png 
              </div>
              <div class="contenu_onglet" id="contenu_onglet_3eme">
               http://data0.ek.la/the-world-of-mangas-graph/perso/avatar%20alona%20avec%20couleur%20fond%20forum.jpg 
              </div>
            <script type="text/javascript">
            //<!--
                    var anc_onglet '1er';
                    change_onglet(anc_onglet);
            //-->
            </script
    </body>
    </body></html>   

    20
    Samedi 23 Juin 2012 à 19:16

    De un, tu n'as pas mis de fond (CSS).
    Après, pour le 2ème et le 3ème, ce n'est pas directement le lien, c'est
    <img source="LIEN"/> (c'est ce que j'ai mis moi...)

    Voilà ce que je vois pour l'instant (rapide coup d'oeil)

    21
    Odd Dellarobia Profil de Odd Dellarobia
    Samedi 23 Juin 2012 à 19:52

    J'ai pas tout compris mais je vais voir ça ! Merci pour ton analyse repide mimilles511 ! ^^

    22
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 10:38

    j'ai changé ce que tu m'as dit pour le <img source="......"

    Mais et d'une ça n'as rien changer et de deux j'ai pas compris ta phrase à propos du "fond CSS" ? ^^'

    23
    Dimanche 24 Juin 2012 à 10:58

    source  -> src

    24
    Dimanche 24 Juin 2012 à 11:33

    Voilà tout ce que tu as modifié en CSS:

    Dedans, il n'y a pas la propriété "background"

    Ha et quel document text as-tu utilisé?

    .onglet,
    .onglet_0 {display:inline-block;
              border-radius}
     .contenu_onglet{display:none;
              height 550px/* HAUTEUR */
              width 250px/*LARGEUR*/
              overflow auto;
              border-radius10px;
              10px;
              10px;
    }

    25
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 12:02

    J'ai utilisé le doc text, html, de "gérer les fichiers" sur mon blog ! (eklablog quoi ^^)

    Et la propriété background, euh...bah j'ai copier la partie CSS que Nagalia à mis donc je sais pas ! --"

    26
    Dimanche 24 Juin 2012 à 12:18

    Ok. Peut-être que ça vient de là. Enfin bon.
    Essais peut-être autre chose. 

    27
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 12:24

    si j'y arrive pas, je continuerais de faire mes signatures normales ! %D

    28
    Dimanche 24 Juin 2012 à 12:33

    Supprime ce que j'ai mis en rouge dans ton code:

    <script type="text/javascript">

    <script type="text/javascript">

     

    //<!--

                    function change_onglet(name)

                    {

    document.getElementById('onglet_'+anc_onglet)

    .className = 'onglet_0 onglet';

    document.getElementById('onglet_'+name).

    className = 'onglet_1 onglet';

    document.getElementById('contenu_onglet_'+anc_onglet)

    .style.display = 'none';

    document.getElementById('contenu_onglet_'+name).

    style.display = 'block';

                            anc_onglet = name;

                    }

            //-->   </script> 

      

           

      <style type="text/css">

    <style type="text/css">

    .onglet,

    .onglet_0 {display:inline-block;

              border-radius; }

     .contenu_onglet{display:none;

              height : 550px; /* HAUTEUR */

              width : 250px; /*LARGEUR*/

              overflow : auto;

              border-radius: 10px;

              10px;

              10px;

    }

    </style>

      </style>

    29
    Dimanche 24 Juin 2012 à 12:36

    Euh j'ai une question... Pourquoi Odd a rajouté ça?

    30
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 12:41

    Merci Nagalia mais ça n'as rien changé ! :/

    31
    Dimanche 24 Juin 2012 à 12:49

    Normalement, après avoir enlevé ça, le contenu aparait au survol des onglets... Enfin, c'est juste le <script type="text/javascript"> en trop qui faisait buger, mais le reste était inutile ;)

    Bon, colle tout ce code a la place du tien:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     

      <script type="text/javascript">

     

     

    //<!--

                    function change_onglet(name)

                    {

    document.getElementById('onglet_'+anc_onglet)

    .className = 'onglet_0 onglet';

    document.getElementById('onglet_'+name).

    className = 'onglet_1 onglet';

    document.getElementById('contenu_onglet_'+anc_onglet)

    .style.display = 'none';

    document.getElementById('contenu_onglet_'+name).

    style.display = 'block';

                            anc_onglet = name;

                    }

            //-->   </script> 

      

           

      <style type="text/css">

     

    .onglet,

    .onglet_0 {display:inline-block;

              border-radius; }

     .contenu_onglet{display:none;

              height : 550px; /* HAUTEUR */

              width : 250px; /*LARGEUR*/

              overflow : auto;

              border-radius: 10px;

              10px;

              10px;

    }

    </style>

     

    </head>

     

        <body>

           

     

        <body>

            <div class="onglets">

    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Moi</span>

    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Ma Signature</span>

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Mon Avatar</span>

            </div>

              <div class="contenu_onglet" id="contenu_onglet_1er">

              Bonjour ! Moi c'est Tauron Adanedhel !

                  Je suis obligé de parcourir Alona pour trouvé l'antidote qui guérirras mon pére.

                  Nos guérrisseurs ne peuvent rien contre cette maladie inconnue. Je dois sauvé mon pére !

                  Je ne sais pas exactement où chercher mais, ce qui est sur, c'est que je trouverais

                  la potion, et tout rentras dans l'ordre !

                  Je suis un elfe de sang pure voyons ! ^^

              </div>

              <div class="contenu_onglet" id="contenu_onglet_2eme">

               http://data0.ek.la/the-world-of-mangas-graph/perso/signature%20alona.png 

              </div>

              <div class="contenu_onglet" id="contenu_onglet_3eme">

               http://data0.ek.la/the-world-of-mangas-graph/perso/avatar%20alona%20avec%20couleur%20fond%20forum.jpg 

              </div>

            <script type="text/javascript">

            //<!--

                    var anc_onglet = '1er';

                    change_onglet(anc_onglet);

            //-->

            </script> 

    </body>

    </body></html>    

    32
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 13:24
    33
    Dimanche 24 Juin 2012 à 16:37

    Désolé, je suis bête ^^'
    Il faut que le javascript sois activé sur ton blog. Fais en la demande au staff d'EklaBlog

    34
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 16:54

    Javascript = activé sur mon compte !! Alors je suis fichu !! *pleure avec des larmes d'elfes*

    35
    Dimanche 24 Juin 2012 à 19:01

    Là, j'avoue que je comprend pas...

    -Supprime ton code actuel
    -Enregistre
    -Colle le code du com's 21
    -Enregistre
    -Ouvre ton fichier 

    36
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 19:05

    ok je test...................................non toujours pas ! Attend je vais tester sur mon deuxiéme blog (ce serais un miracle si ça marche^^)

    37
    Dimanche 24 Juin 2012 à 19:06

    Si ça remarche pas, tu peux me donner la perm sur un de tes blog ? (je VEUX comprendre ce qui marche pas -.-)

    38
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 19:09

    ça marche presque !!! regarde ce que ça me donne et dit moi ce qu'il faut que je fasse > 

    http://ekladata.com/MPi-85bpmSe9sytAzOJKzFtkNI0/signature.html! Je suis à tes ordres Nagalia, elfes noirs pure souche ! X'd

    39
    Odd Dellarobia Profil de Odd Dellarobia
    Dimanche 24 Juin 2012 à 19:36

    Ok perm 3 sur mon deuxiéme blog !! http://the-world-of-mangas-graph.ek.la/

    40
    MiYoi Profil de MiYoi
    Mardi 26 Juin 2012 à 09:23

    Hello ~ ô/ 

    Je suis totallement perdu ._.   même en lisant les autres com's ou t'as aider j'ai toujours pas comprit xDD

    J'ai même essayé avec ton code mais sa marche pas *-* a chaque fois sa fait " Le code CSS comporte une erreur, merci de le corriger avant d'enregistrer "   '-' 

    J'ai peut-être pas activer Java' x']  

    En tout cas,merci pour le code :3 et desolée du derangement ~ \o/ 

    41
    Mardi 26 Juin 2012 à 12:54

    Faut pas le mettre dans le CSS. Mets sur un Bloc Note, enregistre en .html importe le doc' avec Ekla.. Et voilà.

    42
    MiYoi Profil de MiYoi
    Mardi 26 Juin 2012 à 12:55

    Merd* j'avais pas comprit xDD

    Merci :3

    43
    MiYoi Profil de MiYoi
    Mercredi 27 Juin 2012 à 18:47

    J'ai essayé et sa me donne sa >> http://data0.eklablog.com/brookol-universe/perso/brookol%20universe.htlm c'est bon ? :P 


    44
    Mercredi 27 Juin 2012 à 18:50

    Enregistre en .html pas en .htlm ;)

    45
    MiYoi Profil de MiYoi
    Mercredi 27 Juin 2012 à 18:52

    Mince y'a pas plus bête que mwa -_- 

    Merci :3 

    46
    Mercredi 27 Juin 2012 à 18:53

    ça m'arrive souvent aussi les fautes de frappe ;)

    47
    MiYoi Profil de MiYoi
    Mercredi 27 Juin 2012 à 19:02

    X3 

    heu....sa marche mais je me suis gourré complet : http://data0.eklablog.com/brookol-universe/perso/brookol%20universe.html  x'DD

    48
    Mercredi 27 Juin 2012 à 23:09

    Ben, c'est bon. Qu'est-ce qui ne va pas?

    49
    Mercredi 27 Juin 2012 à 23:40

    j'ai corrigé pour ca :P

    50
    Vendredi 6 Juillet 2012 à 11:35

    Voilà j'ai un probleme quand je mets un lien vers un autre site (en format target ="_blank") ca me met ca:  http://data0.eklablog.com/LinkinPark.com  hellllp

    51
    Vendredi 6 Juillet 2012 à 14:28

    c'est bon j'ai réusi ! 

    Apres 2heures d'essai xD J'avais oublié un <div>

    52
    Vendredi 6 Juillet 2012 à 17:15

    Super tuto :D Merci ;)

    53
    Vendredi 6 Juillet 2012 à 18:07

    Merci, mais le résulats se trouve où ? Parce-que j'ai mit le code et tout, mais je sais pas où il est, eet j'aimerais bien le mettre à l'accueil pour ma présentation :/ Donc, si j'ai bien compris, il faut crée un nouveau fichier (sur le blog, comme la dit Nagalia)mais, est-ce qu'il faut mettre le code CCS DANS le CCS (Apparence>..etc) ou pas ?

    Si quelqu'un pouvait m'éclairer, merci d'avance :D

    54
    Vendredi 6 Juillet 2012 à 18:11

    Tu dois creer un fichier texte sur ton blog (Contenu>gerer les fichiers>nouveau document (txt, html...)) que tu appelle "Signature.html"

    Aprés tu mets tout les codes dans le document et tu enregistre !

    Ensuite tu ouvre le document et c'est faits !

    55
    Samedi 7 Juillet 2012 à 07:43

    OkOk, dons après, quand on l'ouvre, on récupère le lien, et on le met dans l'article, c'est ça ?

    Désolée, les codes assez long, c'est pas mon fort <.<

    Edit : J'ai mit le code de Nagalia (Sa signature) et sa ne marche pas, sa me met :

    http://data0.eklablog.com/leslegendairesshimyjadina/perso/signature.html

    C'est normal ?

    Et aussi, est-ce que quelqu'un connaîtrer un hébergeur ?

    Merci

    56
    Samedi 7 Juillet 2012 à 10:47

    Tu as pas besoin d'hébérger vu que tu l'hébérge dés le départ dans les fichiers de ton blog ! Pour ce qui est du code de Nagalia, il marche ! Je vois sa signature dans le lien que tu ma passé ! N'hésite a poser d'autres questions, même si moi, j'ai pas tout compris ! ^^

    57
    Samedi 7 Juillet 2012 à 10:57

    Oui j'ai encore une petite questions xD :

    Tu utilise quel navigateur?

    Et, après,  on prend le lien, et on le met dans un article ?

    58
    Samedi 7 Juillet 2012 à 11:14

    Euh...pourquoi tu me demande mon navigateur ?? J'ai Google Chrome !

    Aprés je crois que tu doit prendre le lien et le mettre dans "insertion/edition d'un objet multimédia" ou un truc dans le genre !

    59
    Samedi 7 Juillet 2012 à 11:43

    elle te demande ton navigateur car sur certains navigateurs le html ou le css ne fonctionne pas (du moins il ne se voit pas) alors si par exemple si tu es  sur explorer tu ne vois ni le css ni le html 

    60
    Samedi 7 Juillet 2012 à 13:01

    J'utilise Firefox, je veis essayer avec Google Chroom.

    Odd : Ok, je regarde.

    61
    Samedi 7 Juillet 2012 à 13:06

    Oui j'avais pas pensé que c'était pour la visibilité CSS et HTML ! ^^'

    Ok Shimy

    62
    didi130606 Profil de didi130606
    Dimanche 15 Juillet 2012 à 12:58

    g jamais reussi a mettre un code mais bon moi quand je publie sa met le code bref... g internet explorer pourtant je les vois mes html

    63
    Odd déconnect
    Dimanche 15 Juillet 2012 à 13:30

    Internet Explorer ne reconnais pas le CSS ! Et il ne faut pas mettre ça dans un article ! Il faut que tu fasse "contenu" "Gerer les fichiers" et là tu creer un nouveau doc txt, html ! Aprés tu mets tes codes et tu clique sur enregistrer ! Tu ouvre et tu regarde si c'est bon ! (Désolé de pas mettre connecté mais j'ai la flemme ! u_u)

    64
    Dimanche 15 Juillet 2012 à 13:30

    Tu as le javascript activé?

    EDIT pour Odd: IE reconnais le CSS (encore heureux!) mais pour beaucoup de propriétés (genre les ombres, les arrondis...) ne fonctionne pas si on les écrit de la même façon que pour les autres navigateur ;)

    65
    didi130606 Profil de didi130606
    Dimanche 15 Juillet 2012 à 18:13

    dsl j ete pas conecter ba vu que je c pas ce que c nn g pas javascript

    66
    Odd déconnect
    Dimanche 15 Juillet 2012 à 18:55

    Tu peux le faire activer si tu veux ! Tu as juste a envoyer un mail à EklaBlog ! (@Nagalia: Oui heureusement que IE reconnait le css sinon ce serais vraiment galère ! XD Mais oui tu a raison, il reconnait mais n'affiche pas certains codes ! Moi j'ai pas ce problème vu que j'utilise Fiefox, Chrome et Safri ! u_u )

    67
    didi130606 Profil de didi130606
    Dimanche 15 Juillet 2012 à 20:01

    re dsl je manger ^^ ba c pg je demande a quelquun de me le mettre ^^

    68
    Dimanche 15 Juillet 2012 à 20:18

    J'ai pas compris ton comm ^^' ! En même temps on n'est pas sur un portable ! Pour demander à faire activer le Javascript sur ton compte, demande >ICI< !

    69
    MiYoi Profil de MiYoi
    Dimanche 15 Juillet 2012 à 20:34

    Traduction de son com' :

    Je suis revenu désolée j'tétait parti mangé ^^ bah c'est pas grave je vais demander a quelqu'un de me le mettre ^^ 

    ....

    Sur ceux a tte ! 8D 

    70
    Dimanche 15 Juillet 2012 à 21:00

    Merci Serenaetenza ! ^^ Donc maintenant que j'ai cmpris ton comm didi, je peux te dire que seule les Staffs d'eklablog peuvent te l'activer ! Personne d'autre peut le faire !

    71
    didi130606 Profil de didi130606
    Dimanche 15 Juillet 2012 à 22:12

      ba comme g dit je demande mais la je vais pas le mettre sa ^^'  je voulais dire quand g un code en general je demande

    72
    Dimanche 15 Juillet 2012 à 23:16

    Ah ok !! ^^" Sinon tu sais, le javascript ne sert pas qu'à faire des signatures codées ! Mais là c'est l'objet du tuto donc je vais pas m'étendre là dessus !

    73
    didi13-06
    Dimanche 15 Juillet 2012 à 23:54

    daccord :3

    74
    didi13-06
    Dimanche 15 Juillet 2012 à 23:55

    et oui c toujours moi g la fleme de me conecter :3

    75
    Enkara
    Lundi 16 Juillet 2012 à 22:44

    Bonjour,

    Tout d'abord, merci pour ce super tuto :) Cette signature est éxactement ce que je recherchait et tes explications m'ont permis de faire quelques progres dans le langages Htlm and co.

    Je voulais juste poser une petite question :

    Dans le 3eme onglet, celui intitulé "Moi", j'aimerai savoir s'il est possible de diminuer la largeur de l'encadré de droite avec tout le blabla et si oui comment ?

    Encore merci :)

    Enkara

    76
    Enkara
    Mardi 17 Juillet 2012 à 11:53

    Je viens de m'y replonger ce matin et a tête reposée j'ai vite trouvé ce qu'il fallait modifier :)

    Encore merci pour cette signature.

    77
    Mardi 17 Juillet 2012 à 18:34

    De rien :)

    78
    maba Profil de maba
    Mercredi 25 Juillet 2012 à 10:59

    Je comprends rien du tout mais ça a l'air génil!

    79
    Mercredi 25 Juillet 2012 à 18:26

    Il faut avoir quelques bases pour faire ça quand même ;)

    80
    Samedi 25 Août 2012 à 12:17

    J'adore ça aussi!♥♥

    81
    Vendredi 31 Août 2012 à 14:10

    Je comprend riiiien

    *Reste Zeeen*

    82
    Samedi 3 Novembre 2012 à 14:54

    J'adore ce genre de signature *w*, la première fois que je l'ai vue, elle était portée par ma graphiste adorée *w*

    83
    Dimanche 18 Novembre 2012 à 12:33

    snif

    trop compliqué j'y arrive pas...

    84
    Dimanche 18 Novembre 2012 à 13:17

    Ça demande un peu de connaissance en css et html ;)

    85
    Dimanche 18 Novembre 2012 à 13:46

    ouais.... tant pis

    en tout cas merci bc pour tes tutos GIMP ils sont géniaux!!!! grace a toi g fait ça: http://artistic.eklablog.com/-g69447

    86
    Akiba Profil de Akiba
    Dimanche 16 Décembre 2012 à 14:01

    tout d'abord merci Nagalia pour cette signature codée j'ai réussis parfaitement à la codé modofier et rajouté des onglets merci mais j'aimerais savoir ne sait pas comment on pourrais modifier le design comme ceci http://img15.hostingpics.net/pics/321442Signacod.jpg

    87
    Mihoki non connecté
    Dimanche 30 Décembre 2012 à 18:20

    Bonjour, je voulais savoir comment intétgrée ma signature que j'ai faite dans un forum (message d'acceuil) en sachant que c'est en .html je ne sais pas comment l'intégré :/.

    Je ne sais pas si ça pourras servir mais voici le lien :

    http://ekladata.com/hat2sqlmExndxNdJts3m_U4m630/acceuilforum.html

    Et merci beaucoup pour le tuto' c'est la 1ère fois que je me lance dans un truc pareil :)

    Merci d'avance.

    PS : Le forum a été fait sur Xooit

    88
    Mihoki non connecté
    Dimanche 30 Décembre 2012 à 18:55

    Ah désolé du dérangement, je suis vraiment bête, je n'avais pas vu l'iframe !!

    Argh  --'

    Sinon merci infiniment j'ai réussi je suis super contente :D

    Et merci surtout du partage !

    89
    Jeudi 3 Janvier 2013 à 20:13

    Désolé du dérangement, c'est encore moi...

    Bref je ne sais pas pourquoi l'onglet "Customisation" ne s'affiche pas !

    Att' je te passe le lien > http://ekladata.com/pullip-attitude.ek.la/perso/amypresentation.html

     

    Je te passe aussi ma partie HTML (je pense que le problème doit être dedans)

     

     </style>

    </head>

     

        <body>

           

        <div class="onglets">

    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Photos</span>

    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Presentation</span>

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Customisations</span>

            </div>

     <div class="contenu_onglet" id="contenu_onglet_1er">

              <div style="width: 600px; height: 800px; overflow-x: auto; overflow-y: auto;"><marquee scrollamount=7 ><p>&nbsp;</p><p style="text-align: center;">

    <img src="http://ekladata.com/UqQd9NNwazoTkEuaVST4yaVDHXI/mod-article45888902-4f8ae40cc30df.jpg"> En mode "Stock"

    <img src="http://ekladata.com/pullip-attitude.ek.la/perso/8013017017_291127be86.jpg"> Avec sa premiere wig "non stock" qui est aussi sa wig actuelle.</p></marquee><br></br></div>

              </div>

     

              <div class="contenu_onglet" id="contenu_onglet_2eme">

                <div style="width: 600px; height: 800px; overflow-x: auto; overflow-y: auto;"><p><p style="text-align: center;"><strong>Pr&eacute;nom:&nbsp;</strong>Amy<strong><br /></strong></p>

    <p style="text-align: center;"><strong>Age:&nbsp;</strong>16 ans<strong></strong></p>

    <p style="text-align: center;"><strong>Surnom: </strong>Amimi<strong><br /></strong></p>

    <p style="text-align: center;"><strong>Model:&nbsp;</strong>Prunella</p>

    <p style="text-align: center;"><strong>Anniversaire</strong>&nbsp;10/03/2012 (Le jour o&ugrave; je l'ai re&ccedil;us)</p>

    <p style="text-align: center;"><strong>Marra&icirc;ne: </strong>Alex<strong>,</strong>Milari-Pullip, Kimmie, Kiwako et D&eacute;lice</p>

    <p style="text-align: center;"><strong>Caract&egrave;re:</strong>&nbsp;Souvent heureuse, gentille mais des fois elle fait la snobe et un peu coquine ;3<strong><br /></strong></p>

    <p style="text-align: center;"><strong>Aime:&nbsp;</strong>Le shopping (Come Azu' ;)), Le style de M&eacute;low-chan et les filles qui ont du go&ucirc;t (&agrave; son go&ucirc;t xD)&nbsp;<strong><br /></strong></p>

    <p style="text-align: center;"><strong>D&eacute;teste: </strong>Faire de gros efforts, les gens immatures...<strong><br /></strong></p>

    <p style="text-align: center;"><strong>&nbsp;</strong></p>

              </div>

     

     

              <div class="contenu_onglet" id="contenu_onglet_3eme">

         <p style="text-align: center;">Les customisations d'Amy :</p>

    <p style="text-align: center;">&nbsp;</p>

    <p style="text-align: center;"><span style="text-decoration: underline; color: #99cc00;"><strong>En ce moment... :&nbsp;</strong></span></p>

    <p style="text-align: center;">-Obistu SBH White 27cm S</p>

    <p style="text-align: center;">--Wig de Jolie doll " Styler Pullip Aubrun "</p>

    <p style="text-align: center;">&nbsp;</p>

    <p style="text-align: center;"><span style="text-decoration: underline; color: #ff0000;"><strong>A venir :</strong></span></p>

    <p style="text-align: center;"><span style="color: #000000;">Rien</span></p>

        

              </div>

     

            <script type="text/javascript">

            //<!--

                    var anc_onglet = '1er';

                    change_onglet(anc_onglet);

            //-->

            </script> 

            

        </body>

    </html>

     

    Je ne sais pas si quelqu'un pourras faire quelque chose mais merci d'avance :D

    90
    Mercredi 16 Janvier 2013 à 19:23

    Moi je n'ai rien qui s'affiche.

    VOici mon code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">
    <script type="text/javascript">
     
    //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->   </script>
      
           
      <style type="text/css">

    .onglet,
    .onglet_0 {display:inline-block;
              width: 150px;           
              background: #999999;
               margin:auto;
               margin-bottom: -1px;
               padding:3px;
               border:1px solid black;
               border-top: 4px solid black;
               border-radius: 10px 10px 0 0;
               font-family : jack the ripper;
               letter-spacing: 3px;
               text-align: center;
               -webkit-transition: 300ms;
               -moz-transition: 300ms;
               transition: 300ms;
     }  
          
    .onglet:hover {background: #797979
           }
          .contenu_onglet{display:none;
              height : 300px; /* HAUTEUR */
              width : 500px; /*LARGEUR*/
              overflow : auto;
              font-size : 14px ;            
              background: #999999;
               border-radius : 20px;
               border: 1px solid #000000;
               border-left: 6px solid black;
               border-right: 6px solid black;
               box-shadow: 0 0 10px black, inset 0 0 10px black;
               padding: 10px;                
               display:none;
               height : 200px;
               width : 600px;
               overflow : auto;
               color: #000000;
               text-shadow : 1px 1px 0px black;

              
    }
           .cadre { border-radius: 10px;           
              background: rgba(0, 0, 0, 0.3);
               width: 400px;
               height: 187px;
               float: right;
               text-align: left;
               padding: 5px;
               box-shadow: 0 0 10px #797979, inset 0 0 5px black;
               overflow : auto;
     }

     

      </style>
    </head>

        <body>
           

         <body>
             <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Jack the ripper</span>
    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Moi</span>
    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Kit "THE RIPPER"</span>
            </div>
               <div class="contenu_onglet" id="contenu_onglet_1er">
              Littéralement "Jack l'éventreur" est un tueur en série de Londres au XIXème siècle.
              On n'a jamais connu ça réelle identité.Il tua cinq prostitués du quartier de
              Whitechapel en 1888.
                   Il commis trois meurtres dans des lieux publics,un dans une rue et le dernier
                   dans un immeuble.
               Ses victimes étaient d'abord égorgés ,puis il leur ouvra le ventre et en extraiya
                certains de leur organes(en l'ocurance intestins, reins, utérus et parfois les seins).
                   Bref il est pas très connu mais il était super dangereux
              </div>
               <div class="contenu_onglet" id="contenu_onglet_2eme">
                   Je suis une fille qui est polyglotte(mais ça tout le monde s'en fout).
                   J'aidore écrire ,lire ,grapher...Bref j'ai beaucoup de passion mais tout
                   le monde s'en fout aussi.Sinon je suis nulle en français ,pas très fortiche
                   en maths mais qui adore tout ce qui est science.Bon assez parler de moi.
                   Bonne visite de mon blog.
             </div>
               <div class="contenu_onglet" id="contenu_onglet_3eme">
              <iframe style="width: 150px; height: 200px; display: block; margin-left: auto; margin-right: auto;" src="http://www.4shared.com/photo/vdDYcfZF/avatar.html" frameborder="no" scrolling="no" width="320" height="240"></iframe>
             <iframe style="width: 450px; height:150px; display: block; margin-left: auto; margin-right: auto;" src="http://dc615.4shared.com/img/Xd8L08FC/s7/0.6060967056747929/signa.jpg" frameborder="no" scrolling="no" width="320" height="240"></iframe>
             </div>
             <script type="text/javascript">
            //<!--
                    var anc_onglet = '1er';
                    change_onglet(anc_onglet);
            //-->
            </script>
     </body>
     </body></html>
         
            
       

    91
    Invitée
    Vendredi 25 Janvier 2013 à 21:12

    Bonjour,

    ESt ce que je peux utiliser la version déjà prête mais je l'a modifie juste s'il vous plait ?

    Je ne code pas donc je sais pas faire...

    92
    Vendredi 25 Janvier 2013 à 22:47

    Question idiote: comment fait on pour activer la javascript??

    93
    Vendredi 25 Janvier 2013 à 23:46

    En faitesça marche merci beaucoup!

    94
    Jeudi 21 Février 2013 à 14:03

    Superbe tuto,merci

     

    Quelqu'un n'aurait pas un site d'hébergement gratuit ? :/

    95
    Jeudi 21 Février 2013 à 21:48

    tu peux tout simplement créer une page sur ton blog pour héberger :)

    96
    Samedi 9 Mars 2013 à 14:02

    Bonjour! J'aimerais savoir comment héberger mon fichier .html pour le mettre sur mon forum. Je ne trouve pas de site. Merci d'avance =)

    97
    Samedi 9 Mars 2013 à 14:03

    Tu peux l'héberger sur Eklablog.

    98
    Samedi 9 Mars 2013 à 14:06

    Ah d'accord, merci :D 

    99
    tipo12 Profil de tipo12
    Samedi 9 Mars 2013 à 14:14

    Bonjour/Bonsoir!

    Je suis un peu nulle, du coup je n'ai pas compris comment faire après avoir enregistré le document en .html Les hébergeurs d'images n'acceptent pas ce format. Vu que j'ai un compte eklablog, j'ai essayé de télécharger le fichier avec les documents mais ça ne marche pas non plus. je voudrais mettre la signature sur mon forum.

    100
    Samedi 9 Mars 2013 à 14:16

    Il faut l'héberger en allant ici:

    Contenu ->Gérer les fichiers.

    101
    tipo12 Profil de tipo12
    Samedi 9 Mars 2013 à 14:19

    Merci beaucoup pour cette réponse rapide :D

    102
    Kikzou
    Mardi 2 Avril 2013 à 20:48

    Je sais que c'est une question idiote mais je ne comprends pas trop comment on met dans sa signature dans un foruù

    103
    Kikzou
    Mardi 2 Avril 2013 à 20:51

    Pliz aidez-moi

    Forum*

    104
    Mardi 2 Avril 2013 à 21:06

    Bah c'est simple, tu mets en signature avec le code de Nagalia ;)

    <iframe style="width: LARGEUR DE TA SIGNATUREpx; height: HAUTEUR DE TA SIGNATUREpx; display: block; margin-left: auto; margin-right: auto;" src="URL DE TON FICHIER .HTML" frameborder="no" scrolling="no" width="320" height="240"></iframe>

    105
    Etoile du Léopard Profil de Etoile du Léopard
    Mercredi 5 Juin 2013 à 14:11

    Je comprends RIEN ._.

     

    S.O.S please ._.

    106
    Iku- Profil de Iku-
    Lundi 1er Juillet 2013 à 14:26

    Bonjour pour commencer merci pour ton aide Nagalia , et aussi serait-tu comment faire pour enlever le petite espace qu'il y'a entre les onglets ? ^^

    107
    maba Profil de maba
    Lundi 1er Juillet 2013 à 14:30

    Nagalia: Bon ben... peut être que je n'ai pas les bases alors! ;p

    108
    Lundi 1er Juillet 2013 à 17:10

    @Misa: dans le css de l'onglet:

    .onglet,
    .onglet_0 {display:inline-block;
                    margin-left: Xpx;
                    margin-right: Xpx;
                    PROPRIETE: VALEUR; }

    Modifie les marges à gauche et à droite pour modifier l'écartement des onglets. Tu peux mettre des nombres négatifs.

    @maba: Ça va venir ;)

    109
    maba Profil de maba
    Lundi 1er Juillet 2013 à 18:08

    Nagalia: Mais tu pourrait m'apprendre dis donc! *sourire imbécile*  :p

    110
    Lundi 1er Juillet 2013 à 18:14

    Ben je ne saurais pas trop quoi apprendre ^^'

    Il vaut mieux que tu ai une idée de ce que tu veux faire, d'essayer, et si ça ne marche pas, poser des questions ;)

    111
    Iku- Profil de Iku-
    Lundi 1er Juillet 2013 à 19:52

    Sa marche merci beaucoup nagalia :)

    112
    Lundi 1er Juillet 2013 à 20:23

    De rien :)

    113
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 23:27

    Un truc que j'arriverai jamais à faire quoi xDD

    Moi grande flemmarde à apprendre des trucs, nouvelles et paumée sur Ekla... Celle qui ne comprend plus rien...

    Pourquoi je suis Mizuru ? J'aurais dut me surnommer " LA paumée " XDXD

    114
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 23:30

    Je vais tout de même tenter même si je ne comprend rien, que je sais que ça va tout de suite ne pas marcher...

    Et que je sais que...

     

    Je vais très VITE abandonner 8D8D xD

    115
    Lundi 22 Juillet 2013 à 18:10

    Yeah un grand merci à toi, tu m'as bien aidée !! =)

    116
    Gars
    Jeudi 1er Août 2013 à 22:35

    Et le copyright t'aurai du le mettre ...

    117
    Etoile du Léopard Profil de Etoile du Léopard
    Samedi 3 Août 2013 à 12:54
    J'ai un problème, 'jai vraiment du mal pour la personnalisation ! Il me reste lus qu'a faire la "forme de ma signature", mettre les couleurs ect... mais franchement je galère, quelqu'un pourrait m'aider ?
    118
    Samedi 3 Août 2013 à 15:34

    Hey. :3
    Pour la partie CSS y'a beaucoup de tutoriels sur le site qui pourront t'aider, mais montre ce que tu as fait pour l'instant, et ce que tu veux faire... ?

    119
    Etoile du Léopard Profil de Etoile du Léopard
    Samedi 3 Août 2013 à 17:33
    • J'ai fais "un croquis" de ce que j'aimerai faire, je ne sais pas si c'est possible...
    • Ca
    • Si c'est pas possible, tout simplement ça :
    • oufd

    Je sais déjà ce que je vais metre dedans, (le contenue est sur le premier article/Rubrique de mon blog)

     

    Sinon voici ce que j'ai fais :

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">
    //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->   
      </script>
           
      <style type="text/css">
    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }
     .contenu_onglet{display:none;
              height : 35px; /* HAUTEUR */
              width : 50px; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;
    }

      </style>
    </head>

        <body>
           
    <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Welcome</span>
    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Partenaria</span>
    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
            </div>
              <div class="contenu_onglet" id="contenu_onglet_1er">
              CONTENU DU 1ER ONGLET BLABLABLABLABLABLABLABKA
              </div>
              <div class="contenu_onglet" id="contenu_onglet_2eme">
              CONTENU DU 2EME ONGLET CACACA PROUT PIPI
              </div>
              <div class="contenu_onglet" id="contenu_onglet_3eme">
              <iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="http://image.noelshack.com/fichiers/2013/31/1375526491-tatata.png" frameborder="no" scrolling="no" width="320" height="240"></iframe>
              </div>
            <script type="text/javascript">
            //<!--
                    var anc_onglet = '1er';
                    change_onglet(anc_onglet);
            //-->
            </script>
        
            
        </body>
    </html>

    120
    Samedi 3 Août 2013 à 18:54

    Tu sais comment faire du CSS ?
    Tu peux tout apprendre >ici<, ça va t'aider à modifier l'apparence.
    Après, la façon dont tu l'arranges, c'est de l'HTML, et de base, ça te donnera la même forme que pour la deuxième image.
    Tu devrais essayer de reprendre le code de quelqu'un, et le modifier, ce sera plus simple.

    121
    Etoile du Léopard Profil de Etoile du Léopard
    Samedi 3 Août 2013 à 19:52

    Pour les CSS j'avoue que je galère, pour les HTML je me débrouille mais bon... ça m'énnerve rapidement.

    Ouai mais j'aurai aimé le faire moi même  ! ^^

    122
    Samedi 31 Août 2013 à 15:14

    Merci beaucoup ^.^

    123
    Jeudi 24 Octobre 2013 à 19:23

    Bonsoir ,ça ne fonctionne pas pour moi D:

    Voici mon code :

    <iframe style="width: 600px; height: 200px; display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/jewelnana.ek.la/perso/Sans-nom-1.html" frameborder="no" scrolling="no" width="320" height="240"></iframe>

     

    Aurait-tu une solution pliz T.T

    124
    Jeudi 24 Octobre 2013 à 22:35

    Hm, le javascript est-il activé sur ton compte ?

    125
    Vendredi 25 Octobre 2013 à 10:01

     Oui .

    126
    Lundi 28 Octobre 2013 à 14:21

    je comprends pas moi le css marche pas....

    127
    Dimanche 17 Novembre 2013 à 14:23

    J'ai pas compris ce qu'il faut mettre à la place de PROPRIETE: VALEUR

    128
    Lundi 18 Novembre 2013 à 12:01

    Et bien c'est simple.
    A la place de PROPRIETE tu peux mettre par exemple color ou box-shadow, et pour VALEUR tu mets, ben, la valeur.

      <style type="text/css">
    .onglet,
    .onglet_0 {display:inline-block;
              color: black; }
    (Le texte sera écrit en noir)

    Voilà un exemple tout bête. >IcI< il y a quelques propriétées.

    129
    Vendredi 31 Janvier 2014 à 18:39

    Sa ne marche QUE sur les forums?

    130
    Lundi 3 Février 2014 à 21:34

    Du moment que tu peux utiliser le javascript, c'est bon ;) Tu peux réutiliser cette technique pour faire une fiche de présentation sur ton blog par exemple.

    131
    Mardi 4 Février 2014 à 12:14

    Oki merci ^^

    132
    Mardi 4 Mars 2014 à 14:10

    Bonjour ^^

    J'ai fait un blog sur elkablog mais je ne trouve pas l'adresse après l'avoir hébergé :s

    133
    Mardi 4 Mars 2014 à 16:22

    Voilà le lien de ton blog pandakawaii ;) 

    134
    Mardi 4 Mars 2014 à 17:29

    Merci ^^ Mais maintenant j'ai un autre problème xD Le code ne marche pas et le HTML, javascript et le reste est ativé : 

    1. <iframe style="width: 500px; height: 200px; display: block; margin-left:auto; margin-right: auto;" src="http://ekladata.com/hDbB0__tYNaxMmfYoPa4kEBn3LM/signature.html" frameborder="no" scrolling="no" width="320" height="240"></iframe>
    2.  
    135
    Mardi 4 Mars 2014 à 17:40

    Lorsque je clique pour accéder à ta signature, je ne vois que ceci :


    <script type="text/javascript"> <script type="text/javascript"> // </script>  <script type="text/javascript"> // </script> 

    Signature ♥ Cadeau ♥ Autre ♥

    <script type="text/javascript"> // </script>


    Je pense que tu n'as pas bien suivi le tuto' pour créer cette signature ! As-tu bien rempli le sections ? Je veux dire, les parties "HTML", "CSS", et "Javascript" ? Envoie-moi le code de ta signature par MP :)

    136
    Mardi 4 Mars 2014 à 17:41

    Oui j'ai tout bien fait (enfin je crois xD)

    137
    Mardi 4 Mars 2014 à 17:48

    ah et moi aussi ça donne ça :s

    138
    Samedi 2 Août 2014 à 14:45

    Merci beaucoup, c'est vraiment parfait ! :D

    139
    Dimanche 7 Septembre 2014 à 11:24

    Je vais prendre, merci ^^

    140
    Lisy Nila
    Vendredi 21 Novembre 2014 à 09:52

    Il y a quelqu'un?
    Je voudrais savoir si c'est possible d'utiliser ce code dans une signature de "forumactif"... Et si oui, comment fait-on?
    Help please.

    141
    Samedi 28 Février 2015 à 15:03

    Merci beaucoup pour ce tutoriel !!! :D

    142
    P'tite Aby
    Lundi 19 Octobre 2015 à 16:53

    Merci pour ce tuto, il est super bien fait *-*

    par contre, comme le demande Lisy Nila, j'aurais aimé savoir si ça marchait sur un forum du groupe forumactif ^^

    et, si on peut héberger la page en html, est-ce qu'il faut héberger la partie en JavaScript autre part ou ça marche en la laissant dans le doc html?

    Merci d'avance ^^

    ~Une Serdaigle~

    143
    Lundi 19 Octobre 2015 à 18:33

    Pour l'utiliser sur forumactif, il faut que l'administrateur autorise ses membres à mettre du html dans les articles / signatures. Je ne sais pas comment ça fonctionne sur les autres plateforme, donc renseigne toi auprès de l'admin.

    Tel que le tuto est écrit, le JS et le CSS se trouvent dans la page HTML, tu n'as donc qu'un seul fichier à enregistrer.

    144
    Dimanche 21 Février 2016 à 21:56

    Coucou ! ^^

    J'ai essayé une signature codée avec ton tuto (j'ai même réussi, c'était plutôt pas mal #fierté) et j'ai deux question : 

    1- Comment faire pour passer d'un contenu à un autre en cliquant sur l'onglet au lieu de le survoler ? (j'espère que je suis assez claire, en gros, Je suis sur la signature et je veux passer aux kits en cliquant sur l'onglet "kits" et pas en le survolant)

    2- Quand je suis sur un contenu (prenons par exemple celui de la signature) comment faire pour que l'onglet concerné (donc celui ou il y a marqué "signature") soit d'une couleur plus, par exemple? (Mais il reste clair tant que je suis sur le contenu de la signature, et par exemple, si je vais sur le contenu des anciens kits, l'onglet "signature" redeviens foncé et l'onglet "anciens kit" devient clair).

     Merci d'avance ! :)

    EDIT : J'ai trouvé pour ma première question, mais je reste toujours bloquée pour la 2e :)

    145
    Mardi 24 Janvier à 18:27

    Merci pour ce tuto très clair et bien expliqué ! :)

    Je suis plutôt contente de mon résultat:

    146
    Samedi 21 Octobre à 16:48

    Super code :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :