• [CSS & HTML] Table à onglets

    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)


  • Comments

    1
    Monday 15th August 2016 at 19:10

    gg

    2
    Monday 15th August 2016 at 19:21

    Wow, je pense que je vais l'utiliser ! Merci pour les codes ! (:

    3
    Monday 15th August 2016 at 21:58

    Je te le pique,Merci !

    4
    Monday 24th October 2016 at 15:21

    Juste wow. :o Je le prends. ♥

    5
    Saturday 5th November 2016 at 18:05

    Je prends ! ^^

      • Tuesday 8th November 2016 at 21:23

        Oki! c:

    • Name / User name:

      E-mail (optional):

      Website (optional):

      Comment:


    6
    Sunday 5th March 2017 at 16:06

    Magnifique, je le prends ! (j'espère que ça ne te dérange pas si je fais quelques retouches ?)

    7
    Monday 6th March 2017 at 18:39

    Oui ne t'inquiètes, je mettrais ça dans la partie remerciements. :)

    8
    Monday 6th March 2017 at 21:52

    #Pickpocketde passage 

    Merci beaucoup 

    9
    Tuesday 7th March 2017 at 18:55

    Je te pique ça ! merci bien

    10
    Tuesday 14th March 2017 at 18:13

    Je te pique celui-ci aussi^^ Merci!

    11
    Thursday 27th April 2017 at 21:50

    Je vais l'utiliser pour mon blog, merci du partage !^^

    12
    Thursday 10th August 2017 at 20:32

    J'ai une question, si on veut directement cliquer sur le bouton pour que ça apparaisse, comment faire ?

    • Voir les réponses
    13
    Thursday 7th June 2018 at 09:55

    Bonjour, je te pique aussi. Et je n'oublierais pas de créditer. Merci pour ce code^^

    14
    Tuesday 14th August 2018 at 21:55

    Je prends le codage! Je le modifierais mais je n'oublierai pas de mettre d'où vient le code de base! ~

    15
    Tuesday 30th April 2019 at 12:10

    Super code, je te piques ça! :3

    16
    Monday 19th October 2020 at 19:27

    Merci pour ce super tuto, je vais l'utiliser c:

    • Voir les réponses
    Suivre le flux RSS des commentaires


    Add comment

    Name / User name:

    E-mail (optional):

    Website (optional):

    Comment: