Coucou !

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

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.

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 !

D'accord ^^

En tout cas merci beaucoup de ton aide Luinil.

Up

UP

UP ?

Up?

Up?

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 https://cocktail-graph.org/html/Kao/Ombinou%20fiche%20onglet%20sans%20js.html

Spoiler:

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.

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?

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 ?

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?

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

Info 1

Info 2

Info 3

Info 4

Info 5

Info 6

Autre...

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

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 ^^

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

Merci beaucoup