• Libre-service & tutoriels

  • Table à onglets

     

    Trucs à savoir:

    - Il faut accompagner l'apparition du cadre quand vous voulez faire apparaître l'un des onglets

    - Le contenu d'un onglet ne reste pas affiché lorsque votre souris ne le survole plus!

    - Ne mettez pas de trics trop longs pour les titres d'onglets

    - Si vous avez des problèmes affichages avec le survol des cadres, vous pouvez jouer avec les marges ("margin") dans le CSS, si vous avez des problèmes avec le code, envoyez moi un MP ou postez un commentaire!

    - Vous pouvez mettre des images dans les cadres (mais il faut qu'elles aient moins de 490px de largeur)

    - Et vous pouvez aussi mettre mon crédit quelque part sur votre blog si vous utilisez le code!

     

    Ce que vous pouvez changer:

    - La hauteur des cadres

    - Les couleurs des titres d'onglets

     

    Evitez de changer les largeurs (titre comme cadre), si vous ne vous y connaissez pas trop bien ou que vous n'êtes pas à l'aise en codage.

     

    Pour voir le code en live, c'est ici!

     

    CODE HTML:

    <p style="text-align: center;">&nbsp;</p>
    <table style="margin-left: auto; margin-right: auto;">
    <tbody>
    <tr>
    <td>
    <table>
    <tbody>
    <tr>
    <td>
    <div class="menuonglet">
    <p style="text-align: justify;">Quelque part aux Etats-Unis, quelque part o&ugrave; le d&eacute;sert et la verdure se m&eacute;langent. O&ugrave; l'amour et la haine cohabitent. O&ugrave; la joie et la tristesse se frappent. O&ugrave; l'espoir et le d&eacute;sespoir se croisent. Il y a Cantervalley. Une ville normale o&ugrave; les &acirc;mes &eacute;corch&eacute;es semblent se retrouver, errant &agrave; la recherche de quelque chose qu'elles ne peuvent atteindre.</p>
    <p style="text-align: justify;">Quoiqu'ils fassent, ils y arrivent toujours, &agrave; Cantervalley. Dans la plus simple des mani&egrave;res ou de la plus biscornues des fa&ccedil;ons. Apr&egrave;s avoir tout laiss&eacute; tomber pour partir &agrave; l'inconnu sur une route ou apr&egrave;s avoir trouv&eacute; une carte dans un sac abandonn&eacute; au bord d'une route avec un bouquin dont le po&egrave;me parlait d'une fille perdue au milieu de l'endroit qu'il manque sur la carte.</p>
    <p style="text-align: justify;">Entre tar&eacute;s, simples fonctionnaires, fugueurs et perdus, Cantervalley est comme le refuge est esprits &eacute;plor&eacute;s, l'endroit o&ugrave; l'on est s&ucirc;rs que l'herbe est plus verte, o&ugrave; l'on est s&ucirc;re que c'est meilleur qu'ailleurs. Mais est-ce vrai? Est-ce vraiment le cas? Est-ce qu'on peut vraiment y trouver le bonheur?</p>
    <p><br /><br /></p>
    </div>
    <div style="background-color: #a3dd3f; min-width: 100px; min-height: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; padding: 5px; margin: 5px; color: white; text-align: center;">contexte</div>
    </td>
    <td>
    <div class="menuonglet2">
    <p><span style="font-family: terminal,monaco;">24.07 </span>nouveau th&egrave;me + &eacute;vent: bal masqu&eacute; + nouvelle partie du contexte.<br />&nbsp;<span style="font-family: terminal,monaco;"><br />21.06 </span>&eacute;vent: f&ecirc;te de la musique. (fini)<br />&nbsp;<span style="font-family: terminal,monaco;"><br />24.01</span> nouveau th&egrave;me. <br />&nbsp;<br /><span style="font-family: terminal,monaco;">24.01</span> ouverture du blog.<br /><br /></p>
    </div>
    <div style="background-color: #d07b40; min-width: 100px; min-height: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; padding: 5px; margin: 5px; color: white; text-align: center;">trucs &agrave; savoir</div>
    </td>
    <td>
    <div class="menuonglet3">
    <p><strong>REPERTOIRE</strong> &mdash; <a href="http://rpg-project.eklablog.fr/">rpg r&eacute;pertori&eacute; ici!</a></p>
    <p><br /><br /></p>
    </div>
    <div style="min-width: 100px; min-height: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; padding: 5px; margin: 5px; background-color: #89b2dc; color: white; text-align: center;">partenaires</div>
    </td>
    <td>
    <div class="menuonglet4">
    <p><strong>DESIGN:</strong> by machin<br /><strong>CODAGE:</strong> by machin<br />&nbsp;<br />Le blog, son contenu et son contexte appartiennent &agrave; <strong>pseudo</strong>, <strong>pseudo</strong> et <strong>pseudo</strong>. Toute copie totale ou partielle est interdite.<br /><br /></p>
    </div>
    <div style="min-width: 100px; min-height: 10px; font-family: arial; text-transform: uppercase; letter-spacing: 1px; padding: 5px; margin: 5px; background-color: #cc6a6d; color: white; text-align: center;">cr&eacute;dits</div>
    </td>
    </tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr>
    <td>
    <div style="width: 430px; height: 150px; font-family: arial; line-height: 11px; border: 1px solid lightgrey; padding: 20px; margin: 5px; background-color: #f2f2f2; color: grey; text-align: justify; overflow: auto;">Bienvenue &agrave; vous sur ce blog RPG city, qui portera sur la tranche de vie, et autres choses au quotidien (pas si banal que &ccedil;a, finalement)! Le contexte est &eacute;volutif et n'attend que vous pour avancer! <br />&nbsp;<br />&nbsp;<br /><em>Blog cr&eacute;&eacute; en <strong>2015</strong> (j'ai oubli&eacute; le mois, ouais), derni&egrave;re mise &agrave; jour du design le <strong>24 Janvier 2016</strong>.</em><br />&nbsp;<br />&nbsp;<br />Une ville pas comme les autres. Un endroit o&ugrave; les gens sont diff&eacute;rents. O&ugrave; chacun porte un terrible secret enfoui au fond de son coeur. O&ugrave; divers sentiments se m&eacute;langent. O&ugrave; on peut avoir une deuxi&egrave;me chance. <em>Bienvenue &agrave; Cantervalley.</em></div>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <p>&nbsp;</p>

     

    CODE CSS:

    /*menu à onglets*/
     
    .menuonglet {
        border: 1px solid lightgrey; /*couleur et largeur de la bordure*/
        margin: 5px;
        font-family: Arial;
        font-size: 8pt;
        overflow-y: auto;
        padding: 10px;
        background-color: #F1F1F1; /*Couleur de fond*/
        height: 4px; 
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survolé*/
        position: absolute;
        width: 89px; 
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }
     
    .menuonglet:hover {
        margin-top: 41px;
        height: 170px; /*hauteur de ton cadre*/
        opacity: 1;
        width: 450px; /*largeur de ton  cadre*/
    }
     
    .menuonglet2 {
        border: 1px solid lightgrey; /*couleur et largeur de la bordure*/
        margin: 5px;
        font-family: Arial;
        font-size: 8pt;
        overflow-y: auto;
        padding: 10px;
        background-color: #F1F1F1; /*Couleur de fond*/
        height: 4px; 
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survolé*/
        position: absolute;
        width: 89px; 
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }
     
    .menuonglet2:hover {
        margin-top: 41px;
        margin-left: -115px;
        height: 170px; /*hauteur de ton cadre*/
        opacity: 1; 
        width: 450px; /*largeur de ton cadre*/
    }
     
    .menuonglet3 {
        border: 1px solid lightgrey; /*couleur et largeur de la bordure*/
        margin: 5px;
        font-family: Arial;
        font-size: 8pt;
        overflow-y: auto;
        padding: 10px;
        background-color: #F1F1F1; /*Couleur de fond*/
        height: 4px; 
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survolé*/
        position: absolute;
        width: 89px;
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }
     
    .menuonglet3:hover {
        margin-top: 41px;
        margin-left: -236px;
        height: 170px; /*hauteur de ton cadre*/
        opacity: 1; 
        width: 450px; /*largeur de ton cadre*/
    }
     
    .menuonglet4 {
        border: 1px solid lightgrey; /*couleur et largeur de la bordure*/
        margin: 5px;
        overflow-y: auto;
        font-family: Arial;
        font-size: 8pt;
        padding: 10px;
        background-color: #F1F1F1; /*Couleur de fond*/
        height: 4px; 
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survolé*/
        position: absolute;
        width: 89px; 
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }
     
    .menuonglet4:hover {
        margin-top: 41px;
        margin-left: -356px;
        height: 170px; /*hauteur de ton cadre*/
        opacity: 1;
        width: 450px; /*largeur de ton cadre*/
    }

     

    Voilàà, j'espère que ça vous plaît!
    (puis en ce moment, je suis en train de voir si je peux faire en sorte que le cadre reste hors survol)


    23 comments
  •  


    INFORMATIONS;

    NOM: écrire ici — PRÉNOM: écrire ici — ÂGE: écrire ici — DATE DE NAISSANCE: écrire ici — NATIONALITÉ écrire ici — ORIENTATION SEXUELLE: écrire ici — STATUT CIVIL: écrire ici — PROFESSION/ÉTUDES: écrire ici


    CARACTÈRE;

    AIME: écrire ici — AIME PAS: écrire ici — SI TU ÉTAIS UN ANIMAL: écrire ici — SI TU ÉTAIS UN JOUR DE LA SEMAINE: écrire ici — TA PLUS GRANDE PEUR: écrire ici — QUI ES-TU? : écrire ici (humain/magus/faucheur) — QUEL CAMP? : écrire ici
     
     
    Décris ton caractère ici.
     

     


    POUVOIR;

    L'AS-TU DEPUIS LONGTEMPS? : écrire ici — T'EN SERS TU SOUVENT? : écrire ici — EST-CE QUE TU CONNAIS D'AUTRES MAGUS? : écrire ici — EN AS-TU PEUR?  écrire ici
     
     
     
    NOM DE TON POUVOIR (éventuellement)
    — Décris ici ton pouvoir, ce qu'il fait, et peut être des effets secondaires?


    HISTOIRE;

    AS-TU DES RÊVES? : écrire ici — CROIS-TU EN L'AMOUR? : écrire ici — VIS TU BIEN TA CONDITION? : écrire ici — SI TU POUVAIS CHANGER UN TRUC DANS TA VIE, CE SERAIT QUOI? : écrire ici — CRAINS-TU LE FUTUR? : écrire ici
     
     
    Écris son histoire ici.

     

    HTML:

    <p style="text-align: center;">&nbsp;</p>
    <table style="margin-left: auto; margin-right: auto;">
    <tbody>
    <tr>
    <td style="text-align: center;">
    <table>
    <tbody>
    <tr>
    <td>
    <p style="text-align: center;"><img style="padding: 3px; border: 1px solid lightgrey;" src="http://ekladata.com/lVOLUcyGUtidr-EWmzLAFBxlPcE.png" alt="" /></p>
    </td>
    </tr>
    <tr>
    <td>
    <div style="background-color: #f2f2f2; width: 468px; min-height: 25px; line-height: 11px; margin: 10px; border: 1px solid lightgrey; padding: 20px; overflow: auto; text-align: justify;">
    <p><span style="font-family: 'Dosra'; font-size: 36pt; color: #808ea8; letter-spacing: 3px;"> <br />INFORMATIONS;<br /></span></p>
    <strong>NOM:</strong> &eacute;crire ici &mdash; <strong>PR&Eacute;NOM:</strong> &eacute;crire ici &mdash; <strong>&Acirc;GE:</strong> &eacute;crire ici &mdash; <strong>DATE DE NAISSANCE:</strong> &eacute;crire ici &mdash; <strong>NATIONALIT&Eacute;</strong> &eacute;crire ici &mdash; <strong>ORIENTATION SEXUELLE:</strong> &eacute;crire ici &mdash; <strong>STATUT CIVIL:</strong> &eacute;crire ici&nbsp;&mdash; <strong>PROFESSION/&Eacute;TUDES:</strong> &eacute;crire ici</div>
    </td>
    </tr>
    <tr>
    <td>
    <div style="background-color: #808ea8; width: 468px; min-height: 25px; line-height: 11px; margin: 10px; border: 1px solid lightgrey; padding: 20px; overflow: auto; text-align: justify;">
    <p><span style="font-family: 'Dosra'; font-size: 36pt; color: #f2f2f2; letter-spacing: 3px;"> <br />CARACT&Egrave;RE;<br /></span></p>
    <span style="color: #cad0e3;"><strong>AIME:</strong> &eacute;crire ici &mdash; <strong>AIME PAS:</strong> &eacute;crire ici &mdash; <strong>SI TU &Eacute;TAIS UN ANIMAL:</strong> &eacute;crire ici &mdash;&nbsp;<strong>SI TU &Eacute;TAIS UN JOUR DE LA SEMAINE:</strong> &eacute;crire ici &mdash; <strong>TA PLUS GRANDE PEUR:</strong> &eacute;crire ici &mdash; <strong>QUI ES-TU? :</strong> &eacute;crire ici (humain/magus/faucheur) &mdash; <strong>QUEL CAMP? :</strong> &eacute;crire ici </span><br /><span style="color: #cad0e3;">&nbsp;</span><br /><span style="color: #cad0e3;">&nbsp;</span><br /><span style="color: #cad0e3;">D&eacute;cris ton caract&egrave;re ici.</span></div>
    </td>
    </tr>
    <tr>
    <td>&nbsp;
    <p style="text-align: center;"><img style="padding: 3px; border: 1px solid lightgrey;" src="http://ekladata.com/lVOLUcyGUtidr-EWmzLAFBxlPcE.png" alt="" /></p>
    </td>
    </tr>
    <tr>
    <td>&nbsp;
    <table>
    <tbody>
    <tr>
    <td>
    <div style="background-color: #f2f2f2; width: 468px; min-height: 25px; line-height: 11px; margin: 10px; border: 1px solid lightgrey; padding: 20px; overflow: auto; text-align: justify;">
    <p><span style="font-family: 'Dosra'; font-size: 36pt; color: #808ea8; letter-spacing: 3px;"> <br />POUVOIR;<br /></span></p>
    <strong>L'AS-TU DEPUIS LONGTEMPS? :</strong> &eacute;crire ici &mdash; <strong>T'EN SERS TU SOUVENT? :</strong> &eacute;crire ici &mdash; <strong>EST-CE QUE TU CONNAIS D'AUTRES MAGUS? :</strong> &eacute;crire ici &mdash; <strong>EN AS-TU PEUR?&nbsp;</strong> &eacute;crire ici<strong><br />&nbsp;<br />&nbsp;<br />&nbsp;<br />NOM DE TON POUVOIR (&eacute;ventuellement) </strong>&mdash; D&eacute;cris ici ton pouvoir, ce qu'il fait, et peut &ecirc;tre des effets secondaires?</div>
    </td>
    </tr>
    <tr>
    <td>
    <div style="background-color: #808ea8; width: 468px; min-height: 25px; line-height: 11px; margin: 10px; border: 1px solid lightgrey; padding: 20px; overflow: auto; text-align: justify;">
    <p><span style="font-family: 'Dosra'; font-size: 36pt; color: #f2f2f2; letter-spacing: 3px;"> <br />HISTOIRE;<br /></span></p>
    <span style="color: #cad0e3;"><strong>AS-TU DES R&Ecirc;VES? :</strong> &eacute;crire ici &mdash; <strong>CROIS-TU EN L'AMOUR? :</strong> &eacute;crire ici &mdash; <strong>VIS TU BIEN TA CONDITION? :</strong> &eacute;crire ici &mdash; <strong>SI TU POUVAIS CHANGER UN TRUC DANS TA VIE, CE SERAIT QUOI? :</strong> &eacute;crire ici &mdash; <strong>CRAINS-TU LE FUTUR? :</strong> &eacute;crire ici </span><br /><span style="color: #cad0e3;">&nbsp;</span><br /><span style="color: #cad0e3;">&nbsp;</span><br /><span style="color: #cad0e3;">&Eacute;cris son histoire ici.<br /></span></div>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

     

    Pour avoir la même police que sur la fiche:

    @font-face {font-family: "Dosra";
     src: url('http://ekladata.com/sursaut-gamma.cd.st/perso/police/Dorsa-Regular.ttf');}

     

    Vous pouvez:

    - Changer les couleurs

    - Changer la police des textes

    - Changer les textes et autres trucs à remplir comme vous le souhaitez

    - Supprimer des blocs

     

    J'avais fait cette fiche y a un bail, mais elle traînait, donc je la met en libre-service! Vous pouvez l'utiliser comme fiche sur un RPG mais vous pouvez aussi l'utiliser d'une autre manière, un fiche explicative, un message d'accueil, je sais pas, c'est vraiment comme vous voulez!

    Si vous avez des questions à propos du code, n'hésitez pas! Postez un commentaire avant de le prendre.

     


    19 comments
  • Pour faire apparaître du texte au survol d'une image. C'est pas super compliqué une fois qu'on a compris, même si ça peut paraître rebutant la première fois qu'on voit les codes. Il y a une partie CSS et une partie HTLM.

     

     

    PARTIE CSS:

    .NOM DE TON CODE {
        background-color: #ffffff; /*Couleur de fond*/
        height: XXpx; /*hauteur de ton image*/
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survollé*/
        position: absolute;
        width: XXpx; /*largeur de ton image*/
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }

    #image:hover .NOM DE TON CODE {
        height: XXpx; /*hauteur de ton image*/
        opacity: 0.9; /*opicité du fond lorsqu'il apparaît, si y a 0.9 c'est qu'il est un peu transparent*/
        width: XXpx; /*largeur de ton image*/
    }

     

    Alors, le NOM DE TON CODE, faut le remplacer par une truc du style "suvolimage" ou "survol1" (sans espace) pour créer une balise il me semble. Ensuite, une fois cette balise créée, on la rappelle pour l'utiliser sur une image survolée.

     

     

    PARTIE HTML

    <div id="image">
    <div class="NOM DE TON CODE">
    <p><span>TON TEXTE<br /><br /></div>
    </div>
    <p style="text-align: center;"><img src="URL DE TON IMAGE" alt=" " /></p>

     

    Du coup, y a rien de  bien compliqué ici. Comme dit plus haut, le NOM DE TON CODE constitue une balise. Et si tu veux utiliser cette balise, il faut que tu la rappelle en la nommant dans ton code HTLM. Attention, cette balise ne peut être utiliser que pour des images ayant les mêmes dimensions. Si tu veux refaire le même effet mais avec une image ayant d'autres dimensions il faut que tu refasses ce code, mais cette fois-ci en nommant ton code différemment.

     

    (+) au cas où, pour ceux qui se demande comment se nomme le code, en fait, il faut remplacer le NOM DE TON CODE par ce que vous voulez afin que vous puissiez reconnaître le code dans votre CSS.

     

    (Ah et si jamais le texte est plus long que la hauteur de l'image bah tu mets simplement une scrollbar.)

     

    Le code n'est pas de moi, il est de tumblr (fin, il est dispo sur un plein de blog codage sur tumblr quoi). Je me suis juste contentée d'expliquer.


    30 comments


    Follow this section's article RSS flux
    Follow this section's comments RSS flux