AccueilDernières imagesRechercherS'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.


    (Onyx) Fiche prédéfinis avec onglets

    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Dim 14 Aoû 2016 - 0:50

    Fiches prédef avec onglets



    Bonjour à vous, les codeurs. J'aimerais avoir une fiche de prédéfinis avec des onglets qui se mariera bien avec la fiche de présentation que j'ai personnalisée. Je suis pas si mal pour faire des personnalisation, mais pour faire des onglets, je suis pas géniale. Donc merci à l'avance pour l'aide que vous pourrez me donner!

    Schéma(s) et Eléments
    Schémas : Schéma onglet 1
    Schéma onglet 2
    Schéma onglet 3.
    Tailles des éléments : la largeur de la fiche de 500px avec cette image de fond. La zone où se trouvent les zones de texte et les images de 450px, hauteur libre. Le format des images de 200*320.
    Effets voulus : La police d'écriture UnifrakturCook pour le titre, avec un sous titre en plus petites lettres. Les boutons qui se fondent bien dans l'arrière plan du bloc de texte, police d'écriture Playfair Display SC. La zone grise dans lequel les zones de texte et les images se trouvent en opacité 0.75. Les zones de texte avec un overflow pour que la fiche demeure toujours de la même grandeur :)

    Ressources
    Image de fond
    Police UnifrakturCook
    Police Playfair Display SC


    Autres précisions ?
    Je ne crois avoir rien d'autre à ajouter... Juste un autre merci en avance pour votre amabilité...


    Dernière édition par MPGuenette le Jeu 22 Sep 2016 - 4:03, édité 3 fois
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Mar 16 Aoû 2016 - 4:03

    Bonjour! Cette demande est toujours d'actualité :) merci à l'avance!
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Jeu 18 Aoû 2016 - 20:10

    Toujours d'actu', merci d'avance!
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Dim 21 Aoû 2016 - 17:55

    Toujours d'actu! Merci à l'avance!
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Ven 26 Aoû 2016 - 2:43

    Toujours d'actu' ! Up et merci à l'avance :)))
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Sam 10 Sep 2016 - 20:39

    Bonjour! Cette demande est toujours d'actualité!! Merci à l'avance
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Lun 12 Sep 2016 - 21:23

    Encore un up ici!
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Mer 14 Sep 2016 - 23:46

    Bonjour les copains, c'est toujours d'actu' ici!
    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Sam 17 Sep 2016 - 0:34

    Up ici :)
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 21 Sep 2016 - 2:20

    Salut!

    Une petite question : on change d'onglets quand on les survole ou quand on les clique?

    Sinon, voilà ce que ça donne (au clic) :
    http://forum-test-5.forum-canada.com/t87-predefini-pour-une-demande#105



    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Mer 21 Sep 2016 - 15:16

    OMG! Quand on clique! J'adore la fiche que tu a fait, elle est trop hot!
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 21 Sep 2016 - 19:12

    Salut!

    Si c'est bon, je te file les codes ^^

    Le html (les majuscules sont les endroits où mettre des trucs) :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|UnifrakturCook:700" rel="stylesheet" /><div class="predef_bloc"><div class="predef_title">TITRE OU NOM DU PRÉDÉFINI<div class="predef_cite">SOUS-TITRE OU CITATION</div></div><div class="predef_bloc_middle"><span class="predef_onglet predef_actif">Général</span><span class="predef_onglet">Histoire</span><span class="predef_onglet">Autres</span><div class="predef_contenu predef_contenu_actif"><img class="predef_img" src="URL IMAGE 1ER ONGLET" alt="avatar1" /><div class="predef_text">TEXTE DU 1ER ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 2E ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 3E ONGLET</div><img class="predef_img" src="URL IMAGE 3E ONGLET" alt="avatar2" /><div style="clear: both;"></div></div></div><div class="predef_credit">Par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></div></div>

    Ce CSS :
    Code:
    /*Bloc de predef*/
    .predef_bloc {
      width: 500px;
      margin: auto;
      background: url('http://www.zupimages.net/up/16/36/ss1h.jpg') center top;
      font-family: 'Playfair Display SC', serif;
      padding-bottom: 25px;
      font-size: 14px;
      position: relative;
    }
    /*Titre de predef*/
    .predef_title {
      background: #101010;
      padding: 10px 5px 5px 5px;
      font-family: 'UnifrakturCook', cursive;
      margin-bottom: 25px;
      font-size: 32px;
      color: #656565;
      text-align: center;
    }
    /*Citation de predef*/
    .predef_cite {
      padding-top: 5px;
      font-size: 20px;
      color: #454545;
    }
    /*Bloc milieu*/
    .predef_bloc_middle {
      padding-top: 5px;
      margin: auto;
      width: 450px;
      background-color: rgb(53, 53, 53);
      background-color: rgba(53, 53, 53, 0.75);
      text-align: center;
    }
    /*Onglet predef*/
    .predef_onglet {
      display: inline-block;
      width: 120px;
      margin: 10px;
      text-align: center;
      font-size: 24px;
      color: #959595;
      cursor: pointer;
    }
    .predef_onglet:hover {
      color: #a3a3a3;
    }
    /*Onglet predef actif*/
    .predef_actif {
      color: #b5b5b5!important;
      cursor: default;
    }
    /*Contenu de onglet*/
    .predef_contenu {
      display: none;
      margin: auto;
      padding: 5px 15px 15px 15px;
      width: 420px;
      text-align: justify;
    }
    .predef_contenu_actif {
      display: block;
    }
    /*Image*/
    .predef_img {
      float: left;
      height: 320px;
      width: 200px;
    }
    /*Bloc de texte*/
    .predef_text {
      border: 2px solid #b5b5b5;
      color: #b5b5b5;
      float: left;
      width: 196px;
      margin-left: 10px;
      height: 306px;
      padding: 5px;
      overflow: auto;
    }
    .predef_contenu:nth-of-type(2) .predef_text {
      margin-left: 0px;
      width: 406px;
    }
    .predef_contenu:nth-of-type(3) .predef_text {
      margin-left: 0px;
      margin-right: 10px;
    }
    /*Crédits*/
    .predef_credit {
      position: absolute;
      text-align: center;
      width: 100%;
      bottom: 1px;
      left: 0px;
      font-size: 10px;
      color: #000000;
    }
    .predef_credit a {
      color: #c4c4c4;
    }
    .predef_credit a:hover {
      color: #ffffff;
    }

    Et ce javascript à mettre en placement "sur les sujets" :
    Code:
    $(function() {
      var index_onglet;
      $('.predef_onglet').click(function(){
        $(this).parent().find('.predef_actif').removeClass('predef_actif');
        $(this).parent().find('.predef_contenu_actif').removeClass('predef_contenu_actif');
        index_onglet = $(this).index();
        $(this).parent().find('.predef_contenu').eq(index_onglet).addClass('predef_contenu_actif');
        $(this).addClass('predef_actif');
      });
    });



    • Revenir en haut
    MPGuenette
    MPGuenette
    FémininAge : 29Messages : 111

    Jeu 22 Sep 2016 - 4:03

    Salut Onyx!! Merci beaucoup pour la fiche, c'est exactement ce qu'il me fallait ^^
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 12:32