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
    avatar
    Sélène
    FémininAge : 18Messages : 321

    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
    avatar
    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



    avatar
    Sélène
    FémininAge : 18Messages : 321

    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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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



    avatar
    Sélène
    FémininAge : 18Messages : 321

    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
    avatar
    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



    avatar
    Sélène
    FémininAge : 18Messages : 321

    le Mer 16 Jan 2013 - 0:45

    Tu as trouvé donc ou non ?





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

    le Ven 18 Jan 2013 - 14:52

    Oui oui c'est bon ^^



    avatar
    Arthuragon
    MasculinAge : 19Messages : 61

    le Sam 26 Jan 2013 - 5:24

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

    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
    avatar
    katia06
    FémininAge : 48Messages : 199

    le Dim 17 Mar 2013 - 12:07

    super j'adore merci



    avatar
    Sakura Sumeragi
    FémininAge : 26Messages : 62

    le Mer 27 Mar 2013 - 11:27

    Super, Merci !
    avatar
    Ririn
    FémininAge : 20Messages : 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!
    avatar
    MARLEY SMITH.
    FémininAge : 23Messages : 152

    le Sam 6 Avr 2013 - 17:00

    J'aime beaucoup l'encadrement qui défile Very Happy merci beaucoup Razz
    avatar
    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 :)



    avatar
    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... :)
    avatar
    Mymyy
    FémininAge : 17Messages : 29

    le Mer 31 Mai 2017 - 18:54

    mrc <3
    avatar
    Kelalin
    FémininAge : 24Messages : 1506

    le Mer 31 Mai 2017 - 22:42

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Ven 23 Juin 2017 - 17:25