• 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)


    32 comments


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