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.


    Demande de code fiche multi

    Partagez
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mer 21 Fév 2018 - 18:57

    Ma demande



    Bonjour bonjour tout le monde. Je chercherai un codage de fiche qui pourrait me servir à plusieurs choses. Comme fiche de prédéfinis, fiche de lien, fiche d'information.


    Schéma(s) et Eléments


    Schémas :
    Normal:
    Après un clic:
    Tailles des éléments :
    - Le cadre de base : 600px de large, 300px de haut
    - Le cadre de sélection à gauche : 150px de large, 260px de haut
    - Le cadre d'information à droite : 370px de large, 260px de haut
    - Le cadre bouton information : 150px de large, 40px de haut
    - Image : 100px sur 100px
    Effets voulus : Effet bouton qu'on clique pour la colonne de gauche. Quand on clique sur l'un des boutons , la couleurs change (plus foncé par exemple). Et dans la colonne de droite les informations apparaissent. Pour les deux colonnes mettre un scroll afin de mettre plusieurs informations ou boutons.
    Version de votre forum : PHPBB2


    Ressources


    Eeeeuh je n'ai pas vraiment d'idée d'image pour cette fiche.


    Autres précisions ?


    Je cherche un effet comme pour un menu de sélection pour voir diverses informations.
    Comme ça cette fiche pourra servir de listing de prédéfini, mais aussi une fiche d'information multiple.
    Des couleurs foncés ou grises. Les couleurs du schémas ne sont pas forcément celle que je souhaiterai. C'était plus simple pour réaliser le schéma.

    avatar
    Luinil
    FémininAge : 26Messages : 19

    le Jeu 22 Fév 2018 - 20:34

    Coucou !

    Désolé ça ne marche pas alors que ça marche sur un autre forum :sad: et je ne trouve pas où supprimer mon message !




    Pseudo
    Prénom
    Nationalité
    Age
    Statut
    Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte


    Pseudo
    Prénom
    Nationalité
    Age
    Statut
    Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte


    Pseudo
    Prénom
    Nationalité
    Age
    Statut
    Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte


    Info 2


    Info 3


    Info 4


    Info 5


    Info 6





    After all this time?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Jeu 22 Fév 2018 - 23:44

    Bonjour.
    En tout cas de ce que je peux voir c'est totalement l'effet que je cherche. *^* C'est génial.

    Après une question, les tailles sont adaptables? J'ai mis des tailles par défaut pour être certaine que cela ne déforme pas le corps du message.
    avatar
    Luinil
    FémininAge : 26Messages : 19

    le Ven 23 Fév 2018 - 22:58

    OUi je peux adapter si tu le souhaites ! J'ai demandé de l'aide dans le laboratoire, avec un peu de chance c'est tout bête !





    After all this time?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Sam 24 Fév 2018 - 0:59

    D'accord ^^

    En tout cas merci beaucoup de ton aide Luinil.
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mar 27 Fév 2018 - 16:38

    Up
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Ven 2 Mar 2018 - 16:29

    UP
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Dim 4 Mar 2018 - 18:03

    UP ?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mer 7 Mar 2018 - 15:35

    Up?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Sam 10 Mar 2018 - 22:23

    Up?
    avatar
    Senk
    MasculinAge : 18Messages : 47

    le Lun 12 Mar 2018 - 18:32

    Je vais tenter de te faire ça.
    Je ne te promets rien ^^
    Il faut comprendre que les onglets dans des fiches qu'on poste directement dans un message, ne peuvent pas être faits avec du javascript. Il faut le faire avec des astuces de CSS que beaucoup ne connaissent pas ou n'ont pas l'habitude d'utiliser.

    Edit : ce n'est pas fini, mais je te laisse regarder où ça en est Wink https://cocktail-graph.org/html/Kao/Ombinou%20fiche%20onglet%20sans%20js.html

    Spoiler:
    supprimé pour que le code suivant fonctionne

    Edit:
    La version proposée par Luinil devrait fonctionner sur ton forum malgré tout (il y a juste un conflit entre un code présent ici et son code). Mais si malgré tout il ne fonctionne pas, tu pourras prendre ma version. C'est comme tu le souhaites ^^
    Pour ce qui est des tailles, c'est une chose modifiable oui, je te montrerai comment faire.


    Dernière édition par Senk le Mer 14 Mar 2018 - 11:36, édité 1 fois
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mar 13 Mar 2018 - 23:58

    Bonjour Senk et merci de ton intervention.

    Cela veut dire que pour le codage il y aurait une partie html, et une partie CSS que je pourrais héberger et réintégrer dans la partie html?
    avatar
    Senk
    MasculinAge : 18Messages : 47

    le Mer 14 Mar 2018 - 0:29

    Non, le CSS et le HTML sont ensemble dans le code.
    Bien que si tu es admin du forum en question tu puisses placer le CSS dans ta fiche de style générale.

    Donc ma version te convient ?
    Des adaptations à faire ?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mer 14 Mar 2018 - 11:23

    Je suis l'admin du forum en question. Je peux donc mettre la partie qu'il faut dans le css?
    Comme ça cela allège le message quand je dois écrire dedans.

    Ta version me convient Senk, car avec la version de Luinil je comprenais pas à chaque fois que je cliquais sur un onglet la page se déplaçait.
    Après comment faire pour mettre l'image et organiser un peu le contenu?
    avatar
    Senk
    MasculinAge : 18Messages : 47

    le Mer 14 Mar 2018 - 11:48

    Donc voici la version la plus récente :
    • Nom
    • Prénom
    • Nationalité
    • Âge
    • Statut

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.

    • Nom
    • Prénom
    • Nationalité
    • Âge
    • Statut

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.

    • Nom
    • Prénom
    • Nationalité
    • Âge
    • Statut

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.

    2
    3
    4
    5
    6
    7


  • Et donc je vais te donner le CSS et le html séparé et te dire comment faire :
    Donc voici le HTML à placer dans ton message :
    Code:

    <section id="conteneurFicheOmbinou"> <input id="radio1" name="menu" type="radio" checked/> <section id="ongletOmbinou1"> <div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span> <p class="descriptionIdentiteOmbinou"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod. </p></div><div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span> <p class="descriptionIdentiteOmbinou"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod. </p></div><div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span> <p class="descriptionIdentiteOmbinou"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod. </p></div></section> <input id="radio2" name="menu" type="radio"/> <section id="ongletOmbinou2"> 2 </section> <input id="radio3" name="menu" type="radio"/> <section id="ongletOmbinou3"> 3 </section> <input id="radio4" name="menu" type="radio"/> <section id="ongletOmbinou4"> 4 </section> <input id="radio5" name="menu" type="radio"/> <section id="ongletOmbinou5"> 5 </section> <input id="radio6" name="menu" type="radio"/> <section id="ongletOmbinou6"> 6 </section> <input id="radio7" name="menu" type="radio"/> <section id="ongletOmbinou7"> 7 </section> <menu id="barreMenuOmbinou"> <li> <label id="labelOmbinou1" for="radio1">Info 1</label> </li><li> <label id="labelOmbinou2" for="radio2">Info 2</label> </li><li> <label id="labelOmbinou3" for="radio3">Info 3</label> </li><li> <label id="labelOmbinou4" for="radio4">Info 4</label> </li><li> <label id="labelOmbinou5" for="radio5">Info 5</label> </li><li> <label id="labelOmbinou6" for="radio6">Info 6</label> </li><li> <label id="labelOmbinou7" for="radio7">Autre...</label> </li></menu></section>
    Comme tu peux le voir, c'est difficilement lisible car pour que cela fonctionne correctement, on est obligé de minifier le code, c'est à dire de le compacter.
    Pour le modifier je t'invite donc à utiliser ceci :
    Quand tu veux modifier, tu veux que le code devienne lisible, donc tu le mets ici :
    http://minifycode.com/html-beautifier/
    Et tu obtiendras ça :
    Code:

    <section id="conteneurFicheOmbinou">
       <input id="radio1" name="menu" type="radio" checked/>
       <section id="ongletOmbinou1">
          <div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span>
             <p class="descriptionIdentiteOmbinou">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.</p>
          </div>
          <div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span>
             <p class="descriptionIdentiteOmbinou">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.</p>
          </div>
          <div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span>
             <p class="descriptionIdentiteOmbinou">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.</p>
          </div>
       </section>
       <input id="radio2" name="menu" type="radio" />
       <section id="ongletOmbinou2">2</section>
       <input id="radio3" name="menu" type="radio" />
       <section id="ongletOmbinou3">3</section>
       <input id="radio4" name="menu" type="radio" />
       <section id="ongletOmbinou4">4</section>
       <input id="radio5" name="menu" type="radio" />
       <section id="ongletOmbinou5">5</section>
       <input id="radio6" name="menu" type="radio" />
       <section id="ongletOmbinou6">6</section>
       <input id="radio7" name="menu" type="radio" />
       <section id="ongletOmbinou7">7</section>
       <menu id="barreMenuOmbinou">
          <li>
             <label id="labelOmbinou1" for="radio1">Info 1</label>
          </li>
          <li>
             <label id="labelOmbinou2" for="radio2">Info 2</label>
          </li>
          <li>
             <label id="labelOmbinou3" for="radio3">Info 3</label>
          </li>
          <li>
             <label id="labelOmbinou4" for="radio4">Info 4</label>
          </li>
          <li>
             <label id="labelOmbinou5" for="radio5">Info 5</label>
          </li>
          <li>
             <label id="labelOmbinou6" for="radio6">Info 6</label>
          </li>
          <li>
             <label id="labelOmbinou7" for="radio7">Autre...</label>
          </li>
       </menu>
    </section>
    Comme tu peux le voir, c'est beaucoup plus lisible.
    Je t'invite à regarder spécifiquement ça :
    Code:

    <div class="carteIdentiteOmbinou"> <span class="photoEtInfoBasesOmbinou"> <img src="URL IMAGE" style="width: 100px; height: 100px; background-color: navajowhite;"/> <ul class="infoBasesOmbinou"> <li>Nom</li><li>Prénom</li><li>Nationalité</li><li>Âge</li><li>Statut</li></ul> </span>
             <p class="descriptionIdentiteOmbinou">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut ea, ex facere id incidunt molestias natus nihil, nisi nulla obcaecati odit praesentium quibusdam ratione, recusandae vel vero. Explicabo, quod.</p>
          </div>
    Ceci te permet d'avoir la fiche d'identité. Dans la balise img, là où il y a marqué URL image, tu colleras l'url de ton image(attention elle doit être carrée pour ne pas être déformée).
    Ensuite tu modifies les textes comme tu l'entends et puis voilà.
    Une fois que tu as fini, tu colles ton code dans ça : http://minifycode.com/html-minifier/
    Cela compactera le code à nouveau, et tu pourras enfin placer ton code dans ton message sur un forum Wink

    Et voici le CSS à ajouter au CSS de ton forum :
    Code:

        #conteneurFicheOmbinou * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: #63a484;
            border: 0;

        }

        #conteneurFicheOmbinou li {
            display: block;
        }

        #conteneurFicheOmbinou {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #1A1D26;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: row-reverse;
        }

        #barreMenuOmbinou label {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 37px;
            background-color: #DCDCDC;
            border: 3px solid black;
            cursor: pointer;
        }

        #barreMenuOmbinou label:hover {
            background-color: #223645;
        }

        #conteneurFicheOmbinou input {
            display: none;
        }

        #conteneurFicheOmbinou section {
            display: none;
            overflow: auto;
        }

        #barreMenuOmbinou {
            width: 150px;
            height: 260px;
            display: flex;
            flex-direction: column;
            flex-flow: column;

        }

        #radio1:checked ~ #barreMenuOmbinou li #labelOmbinou1,
        #radio2:checked ~ #barreMenuOmbinou li #labelOmbinou2,
        #radio3:checked ~ #barreMenuOmbinou li #labelOmbinou3,
        #radio4:checked ~ #barreMenuOmbinou li #labelOmbinou4,
        #radio5:checked ~ #barreMenuOmbinou li #labelOmbinou5,
        #radio6:checked ~ #barreMenuOmbinou li #labelOmbinou6,
        #radio7:checked ~ #barreMenuOmbinou li #labelOmbinou7 {
            background-color: #112534;
            cursor: default;
        }

        #conteneurFicheOmbinou input:checked + section {
            display: block;
            width: 370px;
            height: 260px;
            background-color: #dcdcdc;
            padding: 10px;
            overflow: auto;
        }

        #conteneurFicheOmbinou .carteIdentiteOmbinou {
            flex-direction: column;
            display: flex;
            margin-bottom: 10px;
        }

        #conteneurFicheOmbinou .photoEtInfoBasesOmbinou {
            display: flex;
            margin-bottom: 10px;
        }

        #conteneurFicheOmbinou .infoBasesOmbinou {
            margin-left: 10px;
        }

    Edit : si tu as un problème, n'hésite surtout pas à le signaler ^^
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Lun 2 Avr 2018 - 17:06

    Merci Senk!
    Tout marche a merveille.
    Et avec tes astuces je me perds pas dans le code quand je le rempli.

    Merci beaucoup :aww:
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 22:19