AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Blue and Pink onglets [Fiche à utilisation diverse]

    Partagez
    Sélène
    FémininAge : 18Messages : 314

    le Sam 12 Jan 2013 - 14:04

    Hellow,

    Voilà une fiche que vous pouvez utiliser pour vos messages comme les annonces ...




    Ton titre à toi

    Et le sous titre qui claque



    Petite phrase que tu peux écrire




    Ta phrase qui défile



    Voilà l'installation de celle-ci :


    Voilà le code de la fiche :

    Code:
    <div style="background-color:#c6a3bf;width:400px;border-top:5px solid #00003d;border-bottom:5px solid #00003d;color:black;box-align:center;margin-left:auto;margin-right:auto;border-left:1px dotted #00003d;border-right:1px dotted #00003d;">

    <table><div style="border:2px dotted #00003d;width:300px;height:20px;padding:35px;margin-left:15px;"> <div style="text-align:center; line-height:5px; font-size:35px;">
      <span style="color:white;font-style:italic;text-shadow:black 2px 2px 2px;">Ton titre à toi</span><br/>
    <span style="font-size:15px;font-style:italic;text-shadow:black 1px 1px 8px;">Et le sous titre qui claque</span>
    </div></div></table><p> </p>

    <div style="border-bottom:5px solid #00003d;margin-left:25px;width:350px;"><span style="color:white;font-style:bold;text-shadow:black 1px 1px 2px;font-size:20px;">Petite phrase que tu peux écrire</span><br/> </div><p> </p>

    <iframe name="iframe" SRC="http://editionalways.purforum.com/h2-tuto" scrolling="no" height="185" width="395" FRAMEBORDER="no"></iframe>
    <marquee> Ta phrase qui défile </marquee>

    <div style="text-align:right;margin-top:50px;"><span style="text-align:right;"> <a href="http://www.never-utopia.com/"> @ Sélène </a> </span>
    </div>
    </div>

    Juste cette partie là :
    Code:

    <iframe name="iframe" SRC="http://editionalways.purforum.com/h2-tuto" scrolling="no" height="185" width="395" FRAMEBORDER="no"></iframe>

    Créer une page html avec ce code :

    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" />
    <title>Menu accordéon</title>
    <style type="text/css">
    * { margin:0; padding:0; list-style:none; }

    body {
    font-family: Times New Roman, Arial, sans-serif;
      font-size: 11px;
      margin:10px;
    }



    .bouton{
    text-align:center;                              /* est le bouton à l'état normal */
    color:#fff;
    cursor:pointer;
    font-weight:bold;
    font-variant:small-caps;
    font-size: 14px;
    padding:5px;
    margin : 3px;
    background-color: #324e5a;
    border: 2px solid #bdbdbd;
    -moz-border-radius: 15px 0px 15px;
    -webkit-border-radius: 15px 0px 15px;
    -border-radius: 15px 0px 15px;
    text-shadow: 0 0 3px black;
    box-shadow: 0 0 10px #000000;
    }

    .bouton:hover{                    /* est le bouton au survol */
      background:#00003d;
    }


    .bouton_actif{                    /* est le bouton sélectionné */
      background:#00003d;
    }

    .bouton_container{        /* est la largeur et position des boutons */
    width: 120px;
    float: left;
    }

    .contenu_accordeon{        /*  est le fond accordéon ou s'affiche le texte */
    padding:15px;
    color:#b8b8b8;
    background-color: #00003d;
    font-size:13px;
    -moz-border-radius: 15px 0px 15px;
    -webkit-border-radius: 15px 0px 15px;
    -border-radius: 15px 0px 15px;
    height:115px;
    }

    .contenu_accordeon2{        /*  est le fond accordéon ou s'affiche le titre */
    padding-left:5px;
    font-size:15px;
    padding-top:2px;
    padding-bottom:2px;
    color:#ffffff;
    text-align:center;
    background-color: #505c66;
    border:1px solid #505c66;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -border-radius:5px;
    }

    .contenu_accordeon3{        /*  est le fond accordéon ou s'affiche le texte pour décrire les forums de SELENE */
    padding-left:5px;
    padding-right:5px;
    width:240px;
    padding-top:2px;
    padding-bottom:2px;
    text-align:center;
    background-color: #505c66;
    border:1px solid #505c66;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -border-radius:5px;
    height:
    }

    .tout_accordeon{                            /*  est la largeur et position de l accordeon  */
    width: 255px;
    float: left;
    }

    </style>
    <script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accor_surv.js"></script>
    </head>
    <body onload="new Accordian('fond_principal',4,'bouton_actif');"><div id="fond_principal" ><div class="bouton_container"><div id="ouvrir1-selection" class="bouton bouton_actif">Ton titre 1</div> <div id="ouvrir2-selection" class="bouton" >Ton titre 2</div> <div id="ouvrir3-selection" class="bouton" >Ton titre 3</div> <div id="ouvrir4-selection" class="bouton" > Ton titre 4</div>
    </div><div class="tout_accordeon"><div id="ouvrir1-content"><div class="contenu_accordeon"> <div class="contenu_accordeon2"> Ton texte à toi, ici et pas ailleurs </div> <br><br><br> 



    </div>
    </div>
     <div id="ouvrir2-content"><div class="contenu_accordeon"><div class="contenu_accordeon2">Et hop on se retrouve ici</div><br>

    </div>
    </div>
    <div id="ouvrir3-content"><div class="contenu_accordeon"><div class="contenu_accordeon2">Par là aussi tu peux mettre ton texte</div><br>



    </div>
    </div><div id="ouvrir4-content"><div class="contenu_accordeon"><div class="contenu_accordeon2">
    Vous êtes arrivé à destination, fin du message.
    <center><table cellspacing="5" cellpadding="0" width="50%" border="0">
      <tr>
         
      </tr>

    </body>


    Puis génère ton iframe avec le lien de ta page html à l'aide de : http://creer-un-site.fr/generateur-d-iframe-118.php

    Et remplace le à la place du mien pour que tu puisses éditer les champs de message, la couleur ...

    Pour plusieurs messages différents avec ce code il faut simplement recréer une page html et générer l'iframe correspondant à celle-ci.



    Dernière édition par Sélène le Mer 16 Jan 2013 - 0:45, édité 2 fois





    Thanks père nono ou mère nono anonyme
    Natsuya Gaïaguard
    FémininAge : 26Messages : 144

    le Lun 14 Jan 2013 - 20:24

    Superbe !!!

    je l'utiliserais surement après avoir agrandi la zone



    Sélène
    FémininAge : 18Messages : 314

    le Lun 14 Jan 2013 - 23:00

    Merci et pas de problème tu peux te faire plaisir sur les mesures, j'ai fais au départ à la demande u demandeur ^^





    Thanks père nono ou mère nono anonyme
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Lun 14 Jan 2013 - 23:07

    Très classe ta fiche Sélène ! *o* J'adore Very Happy
    Par contre pour le crédit, je pense qu'il vaut mieux directement que tu l'ajoutes en bas de fiche, comme ça t'es sûre que les gens l'auront (ou presque sûre disons XD). Tu peux mettre par exemple : (c) Sélène - Never-Utopia, en lien vers ce topic directement x).

    Merci en tout cas pour ton partage Wink



    Sélène
    FémininAge : 18Messages : 314

    le Mar 15 Jan 2013 - 13:23

    Coucou Captain,

    Merci beaucoup ♥ Ah oui c'est vrai, j'oublie toujours ce fichu crédit, en même temps je n'ai jamais pris l'habitude d'en mettre en code comme en graph ^^ bon je vais aller le mettre.





    Thanks père nono ou mère nono anonyme
    Natsuya Gaïaguard
    FémininAge : 26Messages : 144

    le Mar 15 Jan 2013 - 23:00

    je voulais te demander comment changer la hauteur de l'accordéon?

    J'ai une partie du contenu que je voudrais mettre dedans qui est caché

    (ps : je crois qu'il manque une partie de la fin du code de la page html )

    -----------------

    J'ai trouvé pour mon problème



    Sélène
    FémininAge : 18Messages : 314

    le Mer 16 Jan 2013 - 0:45

    Tu as trouvé donc ou non ?





    Thanks père nono ou mère nono anonyme
    Natsuya Gaïaguard
    FémininAge : 26Messages : 144

    le Ven 18 Jan 2013 - 14:52

    Oui oui c'est bon ^^



    Arthuragon
    MasculinAge : 18Messages : 61

    le Sam 26 Jan 2013 - 5:24

    Je n'y arrive pas, c'est pas grave? Voila un screen
    Sélène
    FémininAge : 18Messages : 314

    le Sam 26 Jan 2013 - 14:17

    Bonjour,

    De mon côté ça marche, n'auriez vous pas mal collé votre Page HTML par hasard ?





    Thanks père nono ou mère nono anonyme
    katia06
    FémininAge : 47Messages : 192

    le Dim 17 Mar 2013 - 12:07

    super j'adore merci



    Sakura Sumeragi
    FémininAge : 26Messages : 60

    le Mer 27 Mar 2013 - 11:27

    Super, Merci !
    Ririn
    FémininAge : 19Messages : 18

    le Jeu 4 Avr 2013 - 12:10

    Merci beaucoup pour ce code, il est vraiment super ♥, première fois que je code en HTML et je m'en suis plutôt bien sortie.
    Par contre, j'ai une question : Si on l'utilise en fiche de présentation (donc nos membres copieront le code et la rempliront avec les informations de leur personnages), mais on ne peut que modifier le contenu de l'accordéon via la page HTML ... Donc cela pose problème. Comment faire pour qu'on puisse la modifier via les messages postés sur le forum ? Merci d'avance \o/

    EDIT : Problème résolu, merci!
    MARLEY SMITH.
    FémininAge : 22Messages : 120

    le Sam 6 Avr 2013 - 17:00

    J'aime beaucoup l'encadrement qui défile Very Happy merci beaucoup Razz
    Crown
    MasculinAge : 21Messages : 16

    le Sam 6 Avr 2013 - 17:35

    Merci beaucoup pour cette fichette géniale ! Pourrait-on m'expliquer comment modifier les champs directement depuis le forum, afin de rendre cela utilisable comme fiche de présentation ? Je sais que la question a déja été posée, mais la réponse n'apparait pas :)



    Miku
    MasculinAge : 24Messages : 70

    le Ven 12 Avr 2013 - 2:24

    Je me pose la même question que Crow ! Elle serait géniale en fiche de présentation chez moi... :)
    Contenu sponsorisé

    Aujourd'hui à 13:29


      La date/heure actuelle est Lun 5 Déc 2016 - 13:29