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.


    Problème avec mon code

    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Sam 22 Juin 2019 - 0:25

    Bonsoir,

    je m'attèle à une nouvelle fiche de rp pour me faire la main et celle-ci comporte des onglets ramenant sur des fiches persos compact. Mais je rencontre un problème avec la table de mes pages pour organiser. Je souhaiterais avoir en hoover sur Si quelqu'un peut m'aider merci par avance.

    ma fiche:
    Ceci est un joli Titre
    Et une petite citation...
    Message RP
    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

    Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.

    (C) par  Illeanëlia



    Etat civil N°1
    Fille/fils de [nom du dieu]
    Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]
    (C) par  Illeanëlia



    Etat civil N°2
    Fille/fils de [nom du dieu]
    Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]
    (C) par  Illeanëlia

    le code:
    Code:
    <div style="background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg'); width: 500px; height:200px; margin: auto;"></div><div style="background-color: #691228; width: 400px; padding: 10px 50px; text-align: center; margin: auto; color: #ab4b58; font-family: 'Fredericka the Great', cursive; font-size:25px;"><b>Ceci est un joli Titre</b></br><div style="width:450px; text-align:center; font-family: 'Fredericka the Great', cursive; font-size:9px; color:#824040; padding-left:10px; padding-right:10px; margin-top:5px;line-height:50%; letter-spacing: 2px; text-transform: uppercase;">Et une petite citation...</div></div><div style="position: relative; left: 105px; top: -100px; height:0px;"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" style="border: 2px solid #ab4b58; width: 80px; height: 80px; border-radius: 80px;"></div><div style="background-color: #870c2b; width: 460px; padding: 20px; margin: auto;"><div style="text-align: center;"><font face="Fredericka the Great" color="#ab4b58" size="4"><a href="#1" title="" target=""><font color="#ab4b58"><b>Mon RP </b></font></a>  -  <a href="#2" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°1</b></font></a>  -  <a href="#3" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°2</b></font></a></div><div style="text-align: center;"><div style="border-bottom: 1px solid #bbb;"><br></div></div></div><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="1"></a><div style="text-align: center; color : #ab4b58;"><b>Message RP</b></div><div style="text-align:justify; padding:35px; font-size:12px; font-family: Fredericka the Great; margin: auto; letter-spacing:-1px; overflow: auto;"><b>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

    Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.</b></div>
    <center><a style="color: #824040 !important; font-size: 12px; padding : 0px; font-family: 'Fredericka the Great'; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="2"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°1</b></div><div style="text-align: left;"><div style="display: block; text-align: left; font-family: 'Fredericka the Great', cursive; font-size: 14px; color: #ab4b58; text-shadow: 0px 0px 15px Silver; margin: 30px 0px -30px 240px;"><b>Fille/fils de [nom du dieu]</b></div><table style= " border-spacing: 30px;"><div style="width:500px;"><table cellspacing="20"><tr><td><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" style="height:400px; width:200px; border-style: 3px rainure Black; background-size: cover; box-shadow: 4px 4px 10px Silver;"></td><td style="text-align:justify; padding:0px; font-size:12px; font-family: Fredericka the Great; margin: auto; letter-spacing:-1px; overflow: auto;">Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]
    </td></tr></table></font><center><a style="color: #824040 !important; font-size: 12px; padding : 0px; font-family: 'Fredericka the Great'; letter-spacing: 2px; margin: auto;"></b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="3"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°2</b></div><div style="text-align: left;"><div style="display: block; text-align: left; font-family: 'Fredericka the Great', cursive; font-size: 14px; color: #ab4b58; text-shadow: 0px 0px 15px Silver; margin: 30px 0px -30px 240px;"><b>Fille/fils de [nom du dieu]</b></div><table style= " border-spacing: 30px;"><div style="width:500px;"><table cellspacing="20"><tr><td><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" style="height:400px; width:200px; border-style: 3px rainure Black; background-size: cover; box-shadow: 4px 4px 10px Silver;"></td><td style="text-align:justify; padding:0px; font-size:12px; font-family: Fredericka the Great; margin: auto; letter-spacing:-1px; overflow: auto;">Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]
    </td></tr></table></font><center><a style="color: #824040 !important; font-size: 12px; padding : 0px; font-family: 'Fredericka the Great'; letter-spacing: 2px; margin: auto;"></b>(C) par  Illeanëlia</b></a></center>
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Dim 23 Juin 2019 - 0:14

    Bon j'ai avancé réussi grâce à des modèles trouver sur le net à faire mon code pour mon hoover, mais je dois oublier ou mettre des trucs en trop car cela me casse totalement mon code. Au lieu d'avoir la même écriture dans les 2 onglets j'ai une différence d'écriture partout entre le hoover mais aussi la seconde partie. Si quelqu'un pourrais me dire coment faire. Merci d'avance.

    mon code actuellement:
    Code:
    <div style="background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg'); width: 500px; height:200px; margin: auto;"></div><div style="background-color: #691228; width: 400px; padding: 10px 50px; text-align: center; margin: auto; color: #ab4b58; font-family: 'Fredericka the Great', cursive; font-size:25px;"><b>Ceci est un joli Titre</b></br><div style="width:450px; text-align:center; font-family: 'Fredericka the Great', cursive; font-size:9px; color:#824040; padding-left:10px; padding-right:10px; margin-top:5px;line-height:50%; letter-spacing: 2px; text-transform: uppercase;">Et une petite citation...</div></div><div style="position: relative; left: 100px; top: -100px; height:0px;"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" style="border: 2px solid #ab4b58; width: 80px; height: 80px; border-radius: 80px;"></div><div style="background-color: #870c2b; width: 460px; padding: 20px; margin: auto;"><div style="text-align: center;"><font face="Fredericka the Great", cursive color="#ab4b58" size="4"><a href="#1" title="" target=""><font color="#ab4b58"><b>Mon RP </b></font></a>  -  <a href="#2" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°1</b></font></a>  -  <a href="#3" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°2</b></font></a></div><div style="text-align: center;"><div style="border-bottom: 1px solid #bbb;"><br></div></div></div><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="1"></a><div style="text-align: center; color : #ab4b58;"><b>Message RP</b></div><div style="text-align:justify; padding:35px; font-size:12px; font-family: 'Fredericka the Great', cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><b>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

    Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.</b></div><center><a style="color: #824040 !important; font-size: 12px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="2"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°1</b></div><div style="text-align: left;"><table cellspacing="20"><tr><td><link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet"><div class="etatcivil"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" alt="" class="img_pres" /><div class="contenu_bloc_etatcivil"><img src="https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg" alt="" />
    <h2><b>Prénom P. Nom</b></h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3><p>Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]</p></div></div><div class="clear"></div></td><td style="text-align:justify; padding:35px; font-size:12px; font-family: 'Fredericka the Great', Cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><b>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</b></td></tr></table></font><center><a style="color: #824040 !important; font-size: 12px; padding : 0px; font-family: 'Fredericka the Great', Cursive; letter-spacing: 2px; margin: auto;"></b>(C) par Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="3"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°2</b></div><div style="text-align: left;"><table cellspacing="20"><tr><td><link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet"><div class="etatcivil"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" alt="" class="img_pres" /><div class="contenu_bloc_etatcivil"><img src="https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg" alt="" />
    <h2><b>Prénom P. Nom</b></h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3><p>Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]</p></div></div><div class="clear"></div></td><td style="text-align:justify; padding:35px; font-size:12px; font-family: 'Fredericka the Great', Cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><b>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</b></td></tr></table></font><center><a style="color: #824040 !important; font-size: 12px; padding : 0px; font-family: 'Fredericka the Great', Cursive; letter-spacing: 2px; margin: auto;"></b>(C) par Illeanëlia</b></a></center>

    mon CSS qui va avec:
    Code:
    /****************************************************** Etat Civil ******************************************************/
    .etatcivil {
            width: 200px;
            margin: auto;
    }

    /* SCROLLBAR */
    .etatcivil  ::-webkit-scrollbar {
           width: 5px;
    }

    .etatcivil  ::-webkit-scrollbar-thumb {
            background: #eb433d;
            border-radius: 200px;
    }

    .etatcivil  ::-webkit-scrollbar-track {
           background: #d9d9d9;
    }

    .bloc_etatcivil {
            float: left;
            height: 250px;
            margin: 2.8%;
            overflow: hidden;
            position: relative;
            width: 200px;
            box-shadow: 4px 4px 10px Silver;
         border-style: 3px rainure Black;
    }

    .img_pres{
            transition: 5s all;
            z-index: 1;
            position: relative;
    }

    .bloc_etatcivil:hover .img_pres {
            margin-top: 100px;
            transition: .5s all;
    }

    .contenu_bloc_etatcivil {
            background: url('https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg');
            box-sizing: border-box;
            color: #ab4b58;
            padding: 3.5%;
            position: absolute;
            top: 0;
            height: 350px;
         width: 200px;
         margin: auto;
    }

    /* TITRES */
    .contenu_bloc_etatcivil h2 {
            font-family: Fredericka the Great;
            text-align: center;
            font-size: 20px;
            margin: 5% 0;
            color: #ab4b58;
    }

    .contenu_bloc_etatcivil h3 {
            color: #ab4b58;
            font-weight: normal;
            font-size: 12px;
            margin: 0;
         text-align: center;
            padding: 0;
    }

    .contenu_bloc_etatcivil p {
            border: 1px solid;
            box-sizing: border-box;
            color: #ab4b58;
            height: 200px;
            overflow: auto;
            padding: 3%;
            text-align: justify;
            width: 150%;
            margin: 1% 0 0 0;
    }
    Hancok
    Hancok
    FémininAge : 35Messages : 1140

    le Dim 23 Juin 2019 - 10:40

    Coucou, alors effectivement il y a un petit cafouillage.
    Que désir tu exactement comme hover? L'image qui descend vers le bas... qui montre quelle chose derrière?




    Problème avec mon code 3ylp
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Dim 23 Juin 2019 - 10:51

    En faite au survol de l'image je souhaiterais que l'on voit apparaitre la petite image avec le texte de présentation qui apparait pendant que l'image de départ descend progressivement pour disparaitre. Cependant je n'ai pas réussit à voir ce qui n'allait pas et le but est de me retrouver avec la même chose sur les pages 2 et 3 sans décalage de grosseur d'écriture comme c'est actuellement. Ensuite j'ai aussi un cafouillage de ce côté là avec le texte sur la psyche du perso mais rien à faire je vois pas ou j'ai cafouiller en écrivant mon code>>
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Dim 23 Juin 2019 - 23:18

    Désolé pour le double poste d'avance, mais j'ai réussie avec beaucoup de mal à rétablir mon hoover et son contenue. Mais j'ai toujours un problème que chez moi les pages d'état civil ne sont pas du tout pareil alors que je les ais codé de la même manière. De plus j'aimerais réduire mon code en retirant ce qui est inutile car il doit y en avoir, mais je n'arrive pas à trouver ce qui faut retirer. Donc une aide ne serait pas de refus sur ses 2 points restants si quelqu'un à une idée sur la question qui me permettrait d'améliorer ses petits soucis ça m'arrangerais bien car seule j'arrive pas à trouver.

    Merci d'avance.

    Ma fiche + Code:
    Ceci est un joli Titre
    Et une petite citation...
    Message RP
    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
    (C) par  Illeanëlia



    Etat civil N°1
    Problème avec mon code Sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin
    Problème avec mon code Imgjap10

    Prénom P. Nom

    Fille/fils de [nom de l'attribut du parent divin]

    Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]

    Psyche du Personnage

    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
    (C) par  Illeanëlia



    Etat civil N°2
    Problème avec mon code Sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin
    Problème avec mon code Imgjap10

    Prénom P. Nom

    Fille/fils de [nom de l'attribut du parent divin]

    Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]

    Psyche du Personnage

    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
    (C) par  Illeanëlia

    Code:
    <div style="background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg'); width: 500px; height:200px; margin: auto;"></div><div style="background-color: #691228; width: 400px; padding: 10px 50px; text-align: center; margin: auto; color: #ab4b58; font-family: 'Fredericka the Great', cursive; font-size:25px;"><b>Ceci est un joli Titre</b></br><div style="width:450px; text-align:center; font-family: 'Fredericka the Great', cursive; font-size:9px; color:#824040; padding-left:10px; padding-right:10px; margin-top:5px;line-height:50%; letter-spacing: 2px; text-transform: uppercase;">Et une petite citation...</div></div><div style="position: relative; left: 100px; top: -100px; height:0px;"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" style="border: 2px solid #ab4b58; width: 80px; height: 80px; border-radius: 80px;"></div><div style="background-color: #870c2b; width: 460px; padding: 20px; margin: auto;"><div style="text-align: center;"><font face="Fredericka the Great", cursive color="#ab4b58" size="4"><a href="#1" title="" target=""><font color="#ab4b58"><b>Mon RP </b></font></a>  -  <a href="#2" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°1</b></font></a>  -  <a href="#3" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°2</b></font></a></div><div style="text-align: center;"><div style="border-bottom: 1px solid #bbb;"><br></div></div></div><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="1"></a><div style="text-align: center; color : #ab4b58;"><b>Message RP</b></div><div style="text-align:justify; padding:35px; font-size:12px; font-family: 'Fredericka the Great', cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><b>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</b></div><center><a style="color: #824040 !important; font-size: 10px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="2"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°1</b></div><div style="text-align: left;"><table cellspacing="20"><tr><td><link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet"><div class="etatcivil"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" alt="" class="img_pres" /><div class="contenu_bloc_etatcivil"><img src="https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg" alt="" />
    <h2><b>Prénom P. Nom</b></h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3><p>Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]</p></div></div><div class="clear"></div></td><td style="text-align:justify; padding:20px; font-size:12px; font-family: 'Fredericka the Great', Cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><div style="text-align: center; color : #ab4b58;"><b>Psyche du Personnage</b></div><br/>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</td></tr></table></font><center><a style="color: #824040 !important; font-size: 10px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="3"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°2</b></div><div style="text-align: left;"><table cellspacing="20"><tr><td><link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet"><div class="etatcivil"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" alt="" class="img_pres" /><div class="contenu_bloc_etatcivil"><img src="https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg" alt="" />
    <h2><b>Prénom P. Nom</b></h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3><p>Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]</p></div></div><div class="clear"></div></td><td style="text-align:justify; padding:20px; font-size:12px; font-family: 'Fredericka the Great', Cursive; margin: auto; letter-spacing:-1px; overflow: auto; color : #ab4b58;"><div style="text-align: center; color : #ab4b58;"><b>Psyche du Personnage</b></div><br/>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</td></tr></table></font><center><a style="color: #824040 !important; font-size: 10px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Ven 28 Juin 2019 - 8:45

    Up

    je suis toujours bloquée
    Hancok
    Hancok
    FémininAge : 35Messages : 1140

    le Ven 28 Juin 2019 - 11:18

    Coucou, dans ton message précédent tu n'as pas mi le code Very Happy . Après tout dépend du problème, si j'arrive ou pas.




    Problème avec mon code 3ylp
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Ven 28 Juin 2019 - 12:39

    Spoiler:
    Code:
    <div style="background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg'); width: 500px; height:200px; margin: auto;"></div><div style="background-color: #691228; width: 400px; padding: 10px 50px; text-align: center; margin: auto; color: #ab4b58; font-family: 'Fredericka the Great', cursive; font-size:25px;"><b>Ceci est un joli Titre</b></br><div style="width:450px; text-align:center; font-family: 'Fredericka the Great', cursive; font-size:9px; color:#824040; padding-left:10px; padding-right:10px; margin-top:5px;line-height:50%; letter-spacing: 2px; text-transform: uppercase;">Et une petite citation...</div></div><div style="position: relative; left: 100px; top: -100px; height:0px;"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" style="border: 2px solid #ab4b58; width: 80px; height: 80px; border-radius: 80px;"></div><div style="background-color: #870c2b; width: 460px; padding: 20px; margin: auto;"><div style="text-align: center;"><font face="Fredericka the Great", cursive color="#ab4b58" size="4"><a href="#1" title="" target=""><font color="#ab4b58"><b>Mon RP </b></font></a>  -  <a href="#2" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°1</b></font></a>  -  <a href="#3" title="" target=""><font color="#ab4b58"><b>Feat Joueur N°2</b></font></a></div><div style="text-align: center;"><div style="border-bottom: 1px solid #bbb;"><br></div></div></div><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="1"></a><div style="text-align: center; color : #ab4b58;"><b>Message RP</b></div><div style="text-align:justify; padding:35px; font-size:12px; font-family: 'Fredericka the Great', cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><b>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</b></div><center><a style="color: #824040 !important; font-size: 10px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="2"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°1</b></div><div style="text-align: left;"><table cellspacing="20"><tr><td><link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet"><div class="etatcivil"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" alt="" class="img_pres" /><div class="contenu_bloc_etatcivil"><img src="https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg" alt="" />
    <h2><b>Prénom P. Nom</b></h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3><p>Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]</p></div></div><div class="clear"></div></td><td style="text-align:justify; padding:20px; font-size:12px; font-family: 'Fredericka the Great', Cursive; margin: auto; letter-spacing:-1px; overflow: auto;"><div style="text-align: center; color : #ab4b58;"><b>Psyche du Personnage</b></div><br/>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</td></tr></table></font><center><a style="color: #824040 !important; font-size: 10px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    <br/><div style="background-color: #b5556d; width: 500px; height:500px; overflow: hidden; margin: auto;"><div style="height: 500px; width: 450px; overflow: hidden; padding:0px 25px 25px 25px; background-color: #780c27;"><a name="3"></a><div style="text-align: center; color : #ab4b58; font-size:16px;"><b>Etat civil N°2</b></div><div style="text-align: left;"><table cellspacing="20"><tr><td><link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet"><div class="etatcivil"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" alt="" class="img_pres" /><div class="contenu_bloc_etatcivil"><img src="https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg" alt="" />
    <h2><b>Prénom P. Nom</b></h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3><p>Je suis [fille/fils] d'un mortel[nom du parent] et d'un Dieu [nom du dieu] - Je suis née le [date de naissance] - Je viens de [Origine]- J'aime [3 choses] - Je déteste [3 choses] - Mon défaut fatal est [1 défaut] - Mes pouvoirs sont: [3 pouvoirs] - Avatar : [acteur/mangas]</p></div></div><div class="clear"></div></td><td style="text-align:justify; padding:20px; font-size:12px; font-family: 'Fredericka the Great', Cursive; margin: auto; letter-spacing:-1px; overflow: auto; color : #ab4b58;"><div style="text-align: center; color : #ab4b58;"><b>Psyche du Personnage</b></div><br/>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</td></tr></table></font><center><a style="color: #824040 !important; font-size: 10px; padding : 0px; font-family: 'Fredericka the Great', cursive; letter-spacing: 2px; margin: auto;"><b>(C) par  Illeanëlia</b></a></center>

    il était juste avant le up en fait mais voilà ^^
    Hancok
    Hancok
    FémininAge : 35Messages : 1140

    le Sam 29 Juin 2019 - 14:15

    Je suis blonde j'avais pas vue mdr, je vais voir ça. :joie:




    Problème avec mon code 3ylp
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Sam 29 Juin 2019 - 14:22

    mdr pas bien grave et merci d'avance Very Happy
    Hancok
    Hancok
    FémininAge : 35Messages : 1140

    le Sam 6 Juil 2019 - 13:31

    Coucou, je suis désoler, j'ai pas eu le temps de voir le problème Embarassed Je vais voir ça maintenant. Mais je ne te garantit rien.

    Édite: J'ai essayer des trucs, mais ça marche pas non plus. Y a des parties dans ton code que je ne comprend pas. J'espère qu'un codeur pourra te venir en aide, car je cale sur ce code, désoler. Embarassed Embarassed




    Problème avec mon code 3ylp
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 262

    le Lun 8 Juil 2019 - 16:31

    Ce n'est pas grave merci d'avoir essayer en tous les cas ^^
    Iguolta
    Iguolta
    MasculinAge : 19Messages : 168

    le Jeu 18 Juil 2019 - 21:20

    Bonjour/bonsoir,

    Tes onglets fonctionnaient de base ? Je n'ai pas réussi à les faire fonctionner correctement et je ne vois pas dans ton code comment tu gères ça (j'vois pas de hide, j'vois juste le système d'ancrage).

    Je vais revenir sur plusieurs points puis ensuite on se chargera de modifier en fonction de tes besoins :

    Mon avis sur ton code

    • J'ai pu voir l'utilisation de link un peu n'importe comment. On évite de le placer en plein milieu dans un code et encore moins plusieurs fois pour la même chose. De préférence on le place dans le head de ton code HTML, si tu le veux dans toutes les pages de ton forum, mets le dans ton template overall_header par exemple.
    Code:
    <link href="https://fonts.googleapis.com/css?family="Fredericka the Great", cursive rel="stylesheet">
    Je ne comprends pas trop le ", cursive", et le href n'est même pas "fermé" (en réalité si car tu utilises également des doubles guillemets pour le nom de la police, donc il considère que la fin du href est au =", utilise des guillemets simple plutôt pour encadrer le href.

    Code:
    <link href='https://fonts.googleapis.com/css?family="Fredericka the Great"' rel="stylesheet" />

    • L'attribut name est devenu obsolète pour la balise "a" depuis HTML 5. Utilise id à la rigueur pour faire ça. Ou n'utilise juste pas la balise a, elle n'a aucun intérêt ici.
    Code:
    <a name="3"></a>


    • Ta signature est commune a chacun de tes onglets, ça ne sert à rien de le faire à chaque fois, une fois suffi.

    • "les pages d'état civil ne sont pas du tout pareil alors que je les ais codé de la même manière". Normal, puisque le tout est mal architecturé.
    Admettons nous n'utilisons plus a name="3" mais une div avec l'id 3, idem pour les autres. Si tu veux que tout soit ordonné, alors tu devrais avoir :
    Code:
    <div>
      <div id="2">
          <!-- Le corps de l'onglet 2 -->
      </div>
      <div id="3">
          <!-- Le corps de l'onglet 3 -->
      </div>
    </div>
    Et non pas la div id="3" dans le "2" s'ils possèdent tous les deux des décalages.

    • Ta signature est commune a chacun de tes onglets, ça ne sert à rien de le faire à chaque fois, une fois suffi.

    • "En faite au survol de l'image je souhaiterais que l'on voit apparaitre la petite image avec le texte de présentation qui apparait pendant que l'image de départ descend progressivement pour disparaitre."
    Honnêtement, je doute que faire disparaître une fois l'image totalement abaissé soit agréable pour l'utilisateur. D'autant plus que tu souhaites mettre également une balise p de description (semblerait-il), or tu n'auras jamais assez de place pour le faire, pas avec une image de cette taille, et une scrollbar ne serait pas agréable également pour l'utilisateur.
    Dans les exemples si dessous j'ai donc juste mis le pseudo et la phrase d'accroche. On y reviendra ensemble si vraiment tu voudrais autre chose.

    • Attention également, il semblerait que quelques balises ne soient pas fermé. Utilise un éditeur de texte quand c'est comme ça, style Notepad++ ou Sublim Text, ça va t'aider a y voir plus clair.

    • Y'a des morceaux de codes qui auraient vraiment pu être simplifier, je te laisse voir ça avec les codes qui suit. Je pense notamment à la partie avec la navigation des onglets. C'est en théorie une remarque que je ne fais pas puisque chacun code comme bon lui semble, avec des méthodes qui le souhaite mais comme tu as précisé que tu souhaitais retirer ce qui était inutile, je préfère le souligner, alors que je suis sûr que même mon code pourrait être simplifier (j'ai pas trop voulu touché a l'architecture autour de l'image qui s'abaisse donc j'ai laissé a peu près comme avant).

    • Pour l'icone dans le cercle, je ne sais pas du tout si c'est normal qu'il soit tout à gauche de manière isolé donc je l'ai replacé de manière a ce qu'il soit sur la fiche, si ce n'était pas voulu, tu n'auras qu'à remettre le CSS que tu avais mis pour cette partie.

    Propositions de solution

    Ancrage : Tout d'abord, si on souhaite avoir un onglet par défaut, il nous suffira de le placer en dernier dans la liste des contenues des onglets. Cela s'explique au fait qu'on ne peut pas (pour l'instant) parcourir en CSS les balises frères inférieur, ainsi que les parents, il nous serait donc incapable de savoir si l'élément qui est actuellement target n'est pas le 1er onglet tout en le sélectionnant. Puisqu'on active de base le 1er onglet, si on ne vérifie pas ce qui vient d'être dit, alors le 1er onglet sera toujours actif, peut importe l'onglet sélectionné, ce qui est problématique.
    Mais comme cette vérification peut être faite pour le "dernier" contenu, c'est celui ci qui sera celui par défaut.

    Du coup pour résumer un peu tout ça, voilà ce que pourrais donner ton code avec le système d'ancrage :
    Page HTML:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf8" />
        <title>Test</title>
        <link href='https://fonts.googleapis.com/css?family="Fredericka the Great', cursive rel="stylesheet" />
        <style>
          /** La bannière **/
          .header{
            background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg');
            width: 500px;
            height: 200px;
            margin: auto;
          }
         
          /** Le titre de la fiche **/
          .title{
            position:relative;
            background-color: #691228;
            width: 400px;
            padding: 10px 50px;
            text-align: center;
            margin: auto;
            color: #ab4b58;
            font-family: 'Fredericka the Great', cursive;
            font-size:25px;
          }
         
          /** La citation **/
          .quote{
            width:450px;
            text-align:center;
            font-family: 'Fredericka the Great', cursive;
            font-size:9px;
            color:#824040;
            padding-left:10px;
            padding-right:10px;
            margin-top:5px;
            line-height:50%;
            letter-spacing: 2px;
            text-transform: uppercase;
          }
         
          /** Icone en position absolute **/
          .icone{
            position: absolute;
            left: -50px;
            bottom: 50px;
            height:0px;
          }
         
          .icone img{
            border: 2px solid #ab4b58;
            width: 80px;
            height: 80px;
            border-radius: 80px;
          }
         
          /** Toute la partie onglet **/
          .onglet{
             background-color: #870c2b;
             width: 460px;
             padding: 20px;
             margin: auto;
             text-align: center;
          }
         
          .onglet a, .onglet a:hover{
             color: #ab4b58;
             font-weight: bold;
          }
         
          .onglet hr{
             margin: 20px 20px 0 20px;
             background-color: #aaa;
             border: none;
             height: 1px;
          }
         
          /** Corps pour chaque onglet **/
          .corps{
            background-color: #780c27;
            width: 500px;
            height:500px;
            overflow: hidden;
            margin: auto;
          }
         
          /** On cache les éléments qu'on a pas besoin **/
          div.corps > div {display: none}
          div.corps > div:target, #o1 {display: block}
          div.corps > div:target:not(#o1) ~ #o1 {display: none!important}

          /** Les titres des parties **/
          div.title-part{
            text-align: center;
            color : #ab4b58;
             font-weight: bold;
             font-size: 18px;
          }
         
          /** Les textes des parties **/
          div.text-part{
             text-align:justify;
            padding:35px;
            font-size:12px;
            font-family: 'Fredericka the Great', cursive;
            margin: auto;
            letter-spacing:-1px;
            overflow: auto;
             color: rgba(171, 75, 88);
             font-weight: bold;
          }
         
       
         
          /****************************************************** Etat Civil ******************************************************/
          div.ec{
            margin:auto;
            text-align:center;
          }

          div.ec div.text-part{
            padding:30px;
            width: 30%;
            vertical-align: top;
            font-weight: normal;
          }

          div.ec div.text-part > div.title-part{
            font-size: 12px;
            margin-bottom:10px;
          }

          div.ec > div{ display: inline-block; }

          span.credit{
            color: #824040 !important;
            font-size: 10px;
            padding : 0px;
            font-family: 'Fredericka the Great', cursive;
            letter-spacing: 2px;
            margin: auto;
            font-weight: bold;
            display: block;
            text-align: center;
          }


          .bloc_etatcivil {
            height: 250px;
            margin: 2.8%;
            overflow: hidden;
            position: relative;
            width: 200px;
            box-shadow: 4px 4px 10px Silver;
            border-style: 3px rainure Black;
          }
     
          .bloc_etatcivil:hover .img_pres {
            margin-top: 100px;
            transition: .5s all;
          }

          .img_pres{
            transition: 5s all;
            z-index: 1;
            position: relative;
          }
     
          .bloc_etatcivil:hover .img_pres {
            margin-top: 100px;
            transition: .5s all;
          }
     
          .contenu_bloc_etatcivil {
            background: url('https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg');
            box-sizing: border-box;
            color: #ab4b58;
            padding: 3.5%;
            position: absolute;
            top: 0;
            height: 350px;
            width: 200px;
            margin: auto;
          }
     
          /* TITRES */
          .contenu_bloc_etatcivil h2 {
            font-family: Fredericka the Great;
            text-align: center;
            font-size: 20px;
            margin: 5% 0;
            color: #652C33;
          }
     
          .contenu_bloc_etatcivil h3 {
            color: #652C33;
            font-weight: normal;
            font-size: 12px;
            margin: 0;
             text-align: center;
            padding: 0;
          }
     
          .contenu_bloc_etatcivil p {
            border: 1px solid;
            box-sizing: border-box;
            color: #ab4b58;
            height: 200px;
            overflow: auto;
            padding: 3%;
            text-align: justify;
            width: 150%;
            margin: 1% 0 0 0;
          }
        </style>
      </head>
     
      <body>
       
        <div class="header"></div>
        <div class="title"><b>Ceci est un joli Titre</b><br />
          <div class="quote">Et une petite citation...</div>
          <div class="icone">
            <img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" />
          </div>

        </div>
       
        <div class="onglet">
          <a href="#o1">Mon RP</a> -
          <a href="#o2">Feat Joueur N°1</a> -
          <a href="#o3">Feat Joueur N°2</a>
          <hr />
        </div>
       
        <div class="corps"> 
          <div id="o2">
            <div class="title-part">État civil n°1</div>
           
            <div class="ec">
              <div class="image-ec">
                <div class="bloc_etatcivil">
                  <img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" />
                  <div class="contenu_bloc_etatcivil">
                    <h2>Prénom P. Nom</h2>
                    <h3>Fille/fils de [nom de l'attribut du parent divin]</h3>
                  </div>
                </div>
              </div>
              <div class="text-part"><div class="title-part">Psyche du Personnage</div><br />
                Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
              </div>
            </div>
          </div>
         
          <div id="o3">
            <div class="title-part">État civil n°2</div>
           
            <div class="ec">
              <div class="image-ec">
                <div class="bloc_etatcivil">
                  <img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" />
                  <div class="contenu_bloc_etatcivil">
                    <h2>Prénom P. Nom</h2>
                    <h3>Fille/fils de [nom de l'attribut du parent divin]</h3>
                  </div>
                </div>
              </div>
              <div class="text-part"><div class="title-part">Psyche du Personnage</div><br />
                Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
              </div>
            </div>
          </div>

          <div id="o1">
            <div class="title-part">Message RP</div>
            <div class="text-part">
              Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
              <br /><br />
    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.
              <br /><br />
    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
            </div>
          </div>
          <span class="credit">(c) par  Illeanëlia</span>
        </div>
     

      </body>
    </html>



    Dans un message dans ton forum:

    Dans ton CSS :
    Code:
    /** La bannière **/
    .header{
      background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg');
      width: 500px;
      height: 200px;
      margin: auto;
    }

    /** Le titre de la fiche **/
    .title{
      position:relative;
      background-color: #691228;
      width: 400px;
      padding: 10px 50px;
      text-align: center;
      margin: auto;
      color: #ab4b58;
      font-family: 'Fredericka the Great', cursive;
      font-size:25px;
    }

    /** La citation **/
    .quote{
      width:450px;
      text-align:center;
      font-family: 'Fredericka the Great', cursive;
      font-size:9px;
      color:#824040;
      padding-left:10px;
      padding-right:10px;
      margin-top:5px;
      line-height:50%;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /** Icone en position absolute **/
    .icone{
      position: absolute;
      left: -50px;
      bottom: 50px;
      height:0px;
    }

    .icone img{
      border: 2px solid #ab4b58;
      width: 80px;
      height: 80px;
      border-radius: 80px;
    }

    /** Toute la partie onglet **/
    .onglet{
       background-color: #870c2b;
       width: 460px;
       padding: 20px;
       margin: auto;
       text-align: center;
    }

    .onglet a, .onglet a:hover{
       color: #ab4b58;
       font-weight: bold;
    }

    .onglet hr{
       margin: 20px 20px 0 20px;
       background-color: #aaa;
       border: none;
       height: 1px;
    }

    /** Corps pour chaque onglet **/
    .corps{
      background-color: #780c27;
      width: 500px;
      height:500px;
      overflow: hidden;
      margin: auto;
    }

    /** On cache les éléments qu'on a pas besoin **/
    div.corps > div {display: none}
    div.corps > div:target, #o1 {display: block}
    div.corps > div:target:not(#o1) ~ #o1 {display: none!important}

    /** Les titres des parties **/
    div.title-part{
      text-align: center;
      color : #ab4b58;
       font-weight: bold;
       font-size: 18px;
    }

    /** Les textes des parties **/
    div.text-part{
       text-align:justify;
      padding:35px;
      font-size:12px;
      font-family: 'Fredericka the Great', cursive;
      margin: auto;
      letter-spacing:-1px;
      overflow: auto;
       color: rgba(171, 75, 88);
       font-weight: bold;
    }


    /** Partie état civil **/
    div.ec{
      margin:auto;
      text-align:center;
    }

    div.ec > div{ display: inline-block; }

    /** Texte associé à l'image **/
    div.ec div.text-part{
      padding:30px;
      width: 30%;
      vertical-align: top;
      font-weight: normal;
    }

    /** Titre du texte associé à l'image **/
    div.ec div.text-part > div.title-part{
      font-size: 12px;
      margin-bottom:10px;
    }

    /** Crédits en bas d'onglets **/
    span.credit{
      color: #824040 !important;
      font-size: 10px;
      padding : 0px;
      font-family: 'Fredericka the Great', cursive;
      letter-spacing: 2px;
      margin: auto;
      font-weight: bold;
      display: block;
      text-align: center;
    }


    /** Le reste du CSS **/
    .bloc_etatcivil {
      height: 250px;
      margin: 2.8%;
      overflow: hidden;
      position: relative;
      width: 200px;
      box-shadow: 4px 4px 10px Silver;
      border-style: 3px rainure Black;
    }

    .bloc_etatcivil:hover .img_pres {
      margin-top: 100px;
      transition: .5s all;
    }

    .img_pres{
      transition: 5s all;
      z-index: 1;
      position: relative;
    }

    .bloc_etatcivil:hover .img_pres {
      margin-top: 100px;
      transition: .5s all;
    }

    .contenu_bloc_etatcivil {
      background: url('https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg');
      box-sizing: border-box;
      color: #ab4b58;
      padding: 3.5%;
      position: absolute;
      top: 0;
      height: 350px;
      width: 200px;
      margin: auto;
    }

    .contenu_bloc_etatcivil h2 {
      font-family: Fredericka the Great;
      text-align: center;
      font-size: 20px;
      margin: 5% 0;
      color: #652C33;
    }

    .contenu_bloc_etatcivil h3 {
      color: #652C33;
      font-weight: normal;
      font-size: 12px;
      margin: 0;
       text-align: center;
      padding: 0;
    }

    .contenu_bloc_etatcivil p {
      border: 1px solid;
      box-sizing: border-box;
      color: #ab4b58;
      height: 200px;
      overflow: auto;
      padding: 3%;
      text-align: justify;
      width: 150%;
      margin: 1% 0 0 0;
    }


    ajouter dans overall_header (l22 fait l'affaire) :
    Code:
    <link href='https://fonts.googleapis.com/css?family="Fredericka the Great"' rel="stylesheet" />

    en message :
    Code:
    <div class="header"></div><div class="title"><b>Ceci est un joli Titre</b><br /><div class="quote">Et une petite citation...</div><div class="icone"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" /></div></div><div class="onglet"><a href="#o1">Mon RP</a> - <a href="#o2">Feat Joueur N°1</a> - <a href="#o3">Feat Joueur N°2</a><hr /></div><div class="corps"><div id="o2"><div class="title-part">État civil n°1</div><div class="ec"><div class="image-ec"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" /><div class="contenu_bloc_etatcivil"><h2>Prénom P. Nom</h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3></div></div></div><div class="text-part"><div class="title-part">Psyche du Personnage</div>
    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</div></div></div><div id="o3"><div class="title-part">État civil n°2</div><div class="ec"><div class="image-ec"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" /><div class="contenu_bloc_etatcivil"><h2>Prénom P. Nom</h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3></div></div></div><div class="text-part"><div class="title-part">Psyche du Personnage</div>
    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</div></div></div><div id="o1"><div class="title-part">Message RP</div><div class="text-part">Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perfffferunt diutius caelum aut tractus unius soli illis umquam placet.</div></div><span class="credit">(c) par  Illeanëlia</span></div>


    Avec JavaScript :
    Je mets quand même la solution avec JavaScript, qui je trouve reste la plus simple.

    Version HTML:

    Code:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf8" />
        <title>Test</title>
        <link href='https://fonts.googleapis.com/css?family="Fredericka the Great', cursive rel="stylesheet" />
        <style>
          /** La bannière **/
          .header{
            background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg');
            width: 500px;
            height: 200px;
            margin: auto;
          }
         
          /** Le titre de la fiche **/
          .title{
            position:relative;
            background-color: #691228;
            width: 400px;
            padding: 10px 50px;
            text-align: center;
            margin: auto;
            color: #ab4b58;
            font-family: 'Fredericka the Great', cursive;
            font-size:25px;
          }
         
          /** La citation **/
          .quote{
            width:450px;
            text-align:center;
            font-family: 'Fredericka the Great', cursive;
            font-size:9px;
            color:#824040;
            padding-left:10px;
            padding-right:10px;
            margin-top:5px;
            line-height:50%;
            letter-spacing: 2px;
            text-transform: uppercase;
          }
         
          /** Icone en position absolute **/
          .icone{
            position: absolute;
            left: -50px;
            bottom: 50px;
            height:0px;
          }
         
          .icone img{
            border: 2px solid #ab4b58;
            width: 80px;
            height: 80px;
            border-radius: 80px;
          }
         
          /** Toute la partie onglet **/
          .onglet{
             background-color: #870c2b;
             width: 460px;
             padding: 20px;
             margin: auto;
             text-align: center;
          }
         
          .onglet span{
             color: #ab4b58;
             font-weight: bold;
            cursor: pointer;
          }
         
          .onglet hr{
             margin: 20px 20px 0 20px;
             background-color: #aaa;
             border: none;
             height: 1px;
          }

          /** On cache les divs des corps sauf le 1er **/
          .corps > div{ display: none; }
          .corps > div:first-child{ display: block;}
         
          /** Corps pour chaque onglet **/
          .corps{
            background-color: #780c27;
            width: 500px;
            height:500px;
            overflow: hidden;
            margin: auto;
          }
         
          /** Les titres des parties **/
          div.title-part{
            text-align: center;
            color : #ab4b58;
             font-weight: bold;
             font-size: 18px;
          }
         
          /** Les textes des parties **/
          div.text-part{
             text-align:justify;
            padding:35px;
            font-size:12px;
            font-family: 'Fredericka the Great', cursive;
            margin: auto;
            letter-spacing:-1px;
            overflow: auto;
             color: rgba(171, 75, 88);
             font-weight: bold;
          }
         
       
         
          /****************************************************** Etat Civil ******************************************************/
          div.ec{
            margin:auto;
            text-align:center;
          }

          div.ec div.text-part{
            padding:30px;
            width: 30%;
            vertical-align: top;
            font-weight: normal;
          }

          div.ec div.text-part > div.title-part{
            font-size: 12px;
            margin-bottom:10px;
          }

          div.ec > div{ display: inline-block; }

          span.credit{
            color: #824040 !important;
            font-size: 10px;
            padding : 0px;
            font-family: 'Fredericka the Great', cursive;
            letter-spacing: 2px;
            margin: auto;
            font-weight: bold;
            display: block;
            text-align: center;
          }


          .bloc_etatcivil {
            height: 250px;
            margin: 2.8%;
            overflow: hidden;
            position: relative;
            width: 200px;
            box-shadow: 4px 4px 10px Silver;
            border-style: 3px rainure Black;
          }
     
          .bloc_etatcivil:hover .img_pres {
            margin-top: 100px;
            transition: .5s all;
          }

          .img_pres{
            transition: 5s all;
            z-index: 1;
            position: relative;
          }
     
          .bloc_etatcivil:hover .img_pres {
            margin-top: 100px;
            transition: .5s all;
          }
     
          .contenu_bloc_etatcivil {
            background: url('https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg');
            box-sizing: border-box;
            color: #ab4b58;
            padding: 3.5%;
            position: absolute;
            top: 0;
            height: 350px;
            width: 200px;
            margin: auto;
          }
     
          /* TITRES */
          .contenu_bloc_etatcivil h2 {
            font-family: Fredericka the Great;
            text-align: center;
            font-size: 20px;
            margin: 5% 0;
            color: #652C33;
          }
     
          .contenu_bloc_etatcivil h3 {
            color: #652C33;
            font-weight: normal;
            font-size: 12px;
            margin: 0;
             text-align: center;
            padding: 0;
          }
     
          .contenu_bloc_etatcivil p {
            border: 1px solid;
            box-sizing: border-box;
            color: #ab4b58;
            height: 200px;
            overflow: auto;
            padding: 3%;
            text-align: justify;
            width: 150%;
            margin: 1% 0 0 0;
          }
        </style>
      </head>
     
      <body>
       
        <div class="header"></div>
        <div class="title"><b>Ceci est un joli Titre</b><br />
          <div class="quote">Et une petite citation...</div>
          <div class="icone">
            <img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" />
          </div>

        </div>
       
        <div class="onglet">
          <span>Mon RP</span> -
          <span>Feat Joueur N°1</span> -
          <span>Feat Joueur N°2</span>
          <hr />
        </div>
       
        <div class="corps">
          <div>
            <div class="title-part">Message RP</div>
            <div class="text-part">
              Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
              <br /><br />
    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.
              <br /><br />
    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
            </div>
          </div>

          <div>
            <div class="title-part">État civil n°1</div>
           
            <div class="ec">
              <div class="image-ec">
                <div class="bloc_etatcivil">
                  <img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" />
                  <div class="contenu_bloc_etatcivil">
                    <h2>Prénom P. Nom</h2>
                    <h3>Fille/fils de [nom de l'attribut du parent divin]</h3>
                  </div>
                </div>
              </div>
              <div class="text-part"><div class="title-part">Psyche du Personnage</div><br />
                Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
              </div>
            </div>
          </div>
         
          <div>
            <div class="title-part">État civil n°2</div>
           
            <div class="ec">
              <div class="image-ec">
                <div class="bloc_etatcivil">
                  <img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" />
                  <div class="contenu_bloc_etatcivil">
                    <h2>Prénom P. Nom</h2>
                    <h3>Fille/fils de [nom de l'attribut du parent divin]</h3>
                  </div>
                </div>
              </div>
              <div class="text-part"><div class="title-part">Psyche du Personnage</div><br />
                Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
              </div>
            </div>
          </div>

          <span class="credit">(c) par  Illeanëlia</span>
        </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script type="text/javascript">
        $(function(){
          $("div.onglet span").click(function(){
            $("div.corps > div").hide();
            $("div.corps > div").eq($(this).index()).show();
          });
        });

      </script>

      </body>
    </html>

    Dans un message dans ton forum:

    Dans ton CSS :
    Code:
    /** La bannière **/
    .header{
      background-image: url('https://www.lafetedupotiron.com/wp-content/uploads/2018/12/fond-d-ecran-fleur-incroyable-fond-ecran-pc-hd-of-fond-d-ecran-fleur.jpg');
      width: 500px;
      height: 200px;
      margin: auto;
    }

    /** Le titre de la fiche **/
    .title{
      position:relative;
      background-color: #691228;
      width: 400px;
      padding: 10px 50px;
      text-align: center;
      margin: auto;
      color: #ab4b58;
      font-family: 'Fredericka the Great', cursive;
      font-size:25px;
    }

    /** La citation **/
    .quote{
      width:450px;
      text-align:center;
      font-family: 'Fredericka the Great', cursive;
      font-size:9px;
      color:#824040;
      background-color: transparent;
      border: none;
      padding-left:10px;
      padding-right:10px;
      margin-top:5px;
      line-height:50%;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /** Icone en position absolute **/
    .icone{
      position: absolute;
      left: -50px;
      bottom: 50px;
      height:0px;
    }

    .icone img{
      border: 2px solid #ab4b58;
      width: 80px;
      height: 80px;
      border-radius: 80px;
    }

    /** Toute la partie onglet **/
    .onglet{
       background-color: #870c2b;
       width: 460px;
       padding: 20px;
       margin: auto;
       text-align: center;
    }

    .onglet span{
       color: #ab4b58;
       font-weight: bold;
       cursor: pointer;
    }

    .onglet hr{
       margin: 20px 20px 0 20px;
       background-color: #aaa;
       border: none;
       height: 1px;
    }

     /** On cache les divs des corps sauf le 1er **/
    .corps > div{ display: none; }
    .corps > div:first-child{ display: block;}

    /** Corps pour chaque onglet **/
    .corps{
      background-color: #780c27;
      width: 500px;
      height:500px;
      overflow: hidden;
      margin: auto;
    }


    /** Les titres des parties **/
    div.title-part{
      text-align: center;
      color : #ab4b58;
       font-weight: bold;
       font-size: 18px;
    }

    /** Les textes des parties **/
    div.text-part{
       text-align:justify;
      padding:35px;
      font-size:12px;
      font-family: 'Fredericka the Great', cursive;
      margin: auto;
      letter-spacing:-1px;
      overflow: auto;
       color: rgba(171, 75, 88);
       font-weight: bold;
    }


    /** Partie état civil **/
    div.ec{
      margin:auto;
      text-align:center;
    }

    div.ec > div{ display: inline-block; }

    /** Texte associé à l'image **/
    div.ec div.text-part{
      padding:30px;
      width: 30%;
      vertical-align: top;
      font-weight: normal;
    }

    /** Titre du texte associé à l'image **/
    div.ec div.text-part > div.title-part{
      font-size: 12px;
      margin-bottom:10px;
    }

    /** Crédits en bas d'onglets **/
    span.credit{
      color: #824040 !important;
      font-size: 10px;
      padding : 0px;
      font-family: 'Fredericka the Great', cursive;
      letter-spacing: 2px;
      margin: auto;
      font-weight: bold;
      display: block;
      text-align: center;
    }


    /** Le reste du CSS **/
    .bloc_etatcivil {
      height: 250px;
      margin: 2.8%;
      overflow: hidden;
      position: relative;
      width: 200px;
      box-shadow: 4px 4px 10px Silver;
      border-style: 3px rainure Black;
    }

    .bloc_etatcivil:hover .img_pres {
      margin-top: 100px;
      transition: .5s all;
    }

    .img_pres{
      transition: 5s all;
      z-index: 1;
      position: relative;
    }

    .bloc_etatcivil:hover .img_pres {
      margin-top: 100px;
      transition: .5s all;
    }

    .contenu_bloc_etatcivil {
      background: url('https://i.servimg.com/u/f93/20/07/46/56/imgjap10.jpg');
      box-sizing: border-box;
      color: #ab4b58;
      padding: 3.5%;
      position: absolute;
      top: 0;
      height: 350px;
      width: 200px;
      margin: auto;
    }

    .contenu_bloc_etatcivil h2 {
      font-family: Fredericka the Great;
      text-align: center;
      font-size: 20px;
      margin: 5% 0;
      color: #652C33;
    }

    .contenu_bloc_etatcivil h3 {
      color: #652C33;
      font-weight: normal;
      font-size: 12px;
      margin: 0;
       text-align: center;
      padding: 0;
    }

    .contenu_bloc_etatcivil p {
      border: 1px solid;
      box-sizing: border-box;
      color: #ab4b58;
      height: 200px;
      overflow: auto;
      padding: 3%;
      text-align: justify;
      width: 150%;
      margin: 1% 0 0 0;
    }


    ajouter dans overall_header (l22 fait l'affaire) :
    Code:
    <link href='https://fonts.googleapis.com/css?family="Fredericka the Great"' rel="stylesheet" />

    dans Modules > Gestion des codes Javascript > Créer un nouveau fichier Javascript > Cocher "Sur les sujets" uniquement (peut importe pour le titre) :
    Code:
    $(function(){
      $("div.onglet span").click(function(){
        $("div.corps > div").hide();
        $("div.corps > div").eq($(this).index()).show();
      });
    });

    en message :
    Code:
    <div class="header"></div><div class="title"><b>Ceci est un joli Titre</b><br /><div class="quote">Et une petite citation...</div><div class="icone"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" /></div></div><div class="onglet"><span>Mon RP</span> - <span>Feat Joueur N°1</span> - <span>Feat Joueur N°2</span><hr /></div><div class="corps"><div><div class="title-part">Message RP</div><div class="text-part">Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.

    Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perfffferunt diutius caelum aut tractus unius soli illis umquam placet.</div></div><div><div class="title-part">État civil n°1</div><div class="ec"><div class="image-ec"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" /><div class="contenu_bloc_etatcivil"><h2>Prénom P. Nom</h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3></div></div></div><div class="text-part"><div class="title-part">Psyche du Personnage</div>
    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</div></div></div><div><div class="title-part">État civil n°2</div><div class="ec"><div class="image-ec"><div class="bloc_etatcivil"><img src="https://www.lafetedupotiron.com/wp-content/uploads/2018/12/sakura-fleur-dessin-merveilleux-74-luxe-s-de-fleurs-de-cerisiers-dessin-of-sakura-fleur-dessin.jpg" class="img_pres" /><div class="contenu_bloc_etatcivil"><h2>Prénom P. Nom</h2><h3>Fille/fils de [nom de l'attribut du parent divin]</h3></div></div></div><div class="text-part"><div class="title-part">Psyche du Personnage</div>
    Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</div></div></div><span class="credit">(c) par  Illeanëlia</span></div>


    Tu peux aussi passer par des input/labels (exemple ici) mais il faudra faire en sorte que les input et la div.corps soient au même niveau (ou div.corps élément enfants d'un élément frère supérieur ou de l'input), sinon ça ne marchera pas.


    Bon c'est un peu long mais j'ai voulu présenter au moins deux méthodes, n'étant pas très fan personnellement de la méthode d'ancrage pour tout ce qui est onglet, mais comme tu avais commencé à le faire de cette façon, j'ai quand même voulu proposer une solution avec ça.

    Il est possible que tu dois faire des retouches comme des overflow par exemple, j'ai vraiment fait la base en voulant me rapprocher du peu de visuel que j'ai pu avoir.


    En cas de question ou de problème, j'essayerais de répondre assez vite Wink
    Bonne journée !
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Juil 2019 - 1:05