Fiche de présentation

Bonjour! Je vous présente mon premier code. Jeme suis inspirée du tutoriel de Nyo the neko pour la faire, mais le reste du code c'est de moi. Merci de votre patience et de votre aide, car il subsiste un bug: Si j'édite le message, le code se casse la gueule et je sais pas pourquoi ^^"

J'ai tenté de créer un code adapté aux versions mobiles, et dont les couleurs sont indexées sur le forum employeur. J'ai chercher à regrouper le CSS, de façon à ce que tout le monde puisse l'utiliser dans un message, pardon si ce n'est pas très clair. J'ai fait en sorte autant que possible que les images et fonds soient personnalisables, cependant.

Un aperçu ici, pour montrer les différences entre 2 forums
un screen de la version mobile

Aperçu:

Code:

<style>.ficheperso .presentation > input{display: none;}.ficheperso .etiquettes{text-align: center; margin: 5px;}.ficheperso .etiquettes label{font-size: 120%; border: 1px solid;padding: 2px 3px;}.ficheperso .etiquettes label:hover {font-style: italic;transition: all ease 0.5s;}.ficheperso .donnees {display: inline-block; position: relative; height: 180px;width: 100%;border-bottom: 1px dotted; margin-bottom: 15px;}.ficheperso .donnees .contdonnees { position: absolute; width: 95%; height: 170px; padding: 0 10px 10px; margin: auto; overflow: auto; text-align: justify; opacity: 0; visibility: hidden; transition: all ease 0.5s;}.ficheperso #ongcarteid:checked ~ .etiquettes .eti.boutcarteid, .ficheperso #ongopinions:checked ~ .etiquettes .eti.boutopinions, .ficheperso #ongjoueur:checked ~ .etiquettes .eti.boutjoueur{border-bottom: 3px double;}.ficheperso #ongcarteid:checked ~ .donnees .carteid.contdonnees, .ficheperso #ongopinions:checked ~ .donnees .opinions.contdonnees,.ficheperso #ongjoueur:checked ~ .donnees .joueur.contdonnees{opacity: 1; visibility: visible; transition: all ease 0.5s;}.ficheperso {max-width: 600px;border-width: 1px 1px 5px 5px;border-style: double;border-radius: 50px 50px 10px 10px;margin: 10px auto;padding: 10px;}.ficheperso .NP {font-family: 'Lucida Calligraphy';font-size: 30px;text-shadow: 2px 2px 4px black;width: max-content; margin: auto;padding:15px 0 5px;max-width: 49%;text-align: center;}.ficheperso #imggauche{float: left; border-radius: 40px 10px 10px 10px;}.ficheperso #imgdroite{float: right; border-radius: 10px 40px 10px 10px;}.ficheperso .imgpres{width: 100px; height: 100px; background-size: cover; background-position: center center; max-width:25%; border: 1px solid;}.ficheperso .feat {text-align: center; font-size: 80%;}.ficheperso .carteid .ulid{float: left;padding-left: 15px;}.ficheperso .textid {text-decoration: underline; font-style: italic; }.ficheperso .pid:first-letter {font-weight: bold;}.ficheperso .desc {border-collapse: separate; border-spacing:0; vertical-align: middle;margin: auto;}.ficheperso .desc td {padding: 0; margin: 0 ;}.ficheperso .ongletdesc {line-height:15px; background-color: #494a4f20; border:1px black solid ; border-radius: 10px 0px 0px 10px; text-align:center;vertical-align: middle; position: relative; box-sizing: border-box; }.ficheperso .textong{padding:0 10px;}.ficheperso .textong:first-letter { font-weight: bold;}.ficheperso .phy{height: 150px; max-width: 450px;overflow: hidden; background-color: #afa9ac25;}.ficheperso .phy_img{position: relative; z-index: 2;max-width: 450px;height: 150px;margin-left: 0px;transform: all;transition: 1s;}.ficheperso .phy:hover .phy_img{margin-top: 250px;transform: all;transition: 1s;}.ficheperso .phy_desc{position: relative;z-index: 1;max-width: 430px;height: 130px;margin-top: -400px;text-align: justify;padding: 10px;overflow: auto;}.ficheperso .hist:hover .hist_img{margin-top: 300px;}.ficheperso .hist:hover .hist_desc{margin-top: -600px;}#mpage-body-modern .ficheperso .phy_img{display:none;}#mpage-body-modern .ficheperso .phy_desc{margin-top: 0;}</style><!--






--><div class="ficheperso" style="background: linear-gradient(339deg, rgba(0,0,0,0.2) 0%, rgba(128,128,128,0) 10%, rgba(255,255,255,0.2) 20%, rgba(119,119,119,0) 35%, rgba(0,0,0,0.2) 50%, rgba(133,133,133,0) 65%, rgba(255,255,255,0.2) 80%, rgba(115,115,115,0) 90%, rgba(0,0,0,0.2) 100%),linear-gradient(13deg, rgba(0,0,0,0.2) 0%, rgba(128,128,128,0) 10%, rgba(255,255,255,0.2) 20%, rgba(119,119,119,0) 35%, rgba(0,0,0,0.5004202364539565) 50%, rgba(133,133,133,0) 65%, rgba(255,255,255,0.2) 80%, rgba(115,115,115,0) 90%, rgba(0,0,0,0.2) 100%),radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(128,128,128,0) 10%, rgba(255,255,255,0.1) 20%, rgba(119,119,119,0) 35%, rgba(0,0,0,0.1) 50%, rgba(133,133,133,0) 65%, rgba(255,255,255,0.1) 80%, rgba(115,115,115,0) 90%, rgba(0,0,0,0.1) 100%);"><div class="presentation"><div style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRb7bzMHhFONo-08QUq6TaW7uY5wsqQp_KO_2ckK0JNd9GCegEm);" class="imgpres" id="imggauche"></div><div style="background-image: url(https://c4.wallpaperflare.com/wallpaper/929/19/761/kate-winslet-women-redhead-digital-art-wallpaper-preview.jpg);" class="imgpres" id="imgdroite"></div><div class="NP"> Lauranna Ariyin</div>
<div class="feat">ft. <b>kate winslet</b> (fanarts)</div>
<!-- Les boutons radio               
--><input checked="" name="abc" id="ongcarteid" type="radio" /> <!-- celui là il est checked parce qu'il s'affiche de base.
--> <input name="abc" id="ongopinions" type="radio" /> <!--
--> <input name="abc" id="ongjoueur" type="radio" />

<!--Les étiquettes
--><div class="etiquettes"><!--
--> <label for="ongcarteid" class="eti boutcarteid">Carte d'identité</label> <!--
--> <label for="ongopinions" class="eti boutopinions">Opinions</label> <!--
--> <label for="ongjoueur" class="eti boutjoueur">Derrière l'écran</label></div><!--

Le contenu de chaque parties.
--> <div class="donnees"><!--

Carte d'identité
--><div class="carteid contdonnees"><ul class="ulid"><!--
 --><li class="pid"><span class="textid">Prénom(s) :</span>  </li><!--
 --><li class="pid"><span class="textid">Surnom :</span> </li><!--
 --><li class="pid"><span class="textid">Âge Physique :</span> </li><!--
 --><li class="pid"><span class="textid">Race :</span> </li><!--
 --><li class="pid"><span class="textid">Genre :</span> </li><!--
 --><li class="pid"><span class="textid">Groupe :</span> </li><!--
 --><li class="pid"><span class="textid">Si Humain, avec ou sans pouvoir :</span> </li> </ul><ul class="ulid"><!--
 --><li class="pid"><span class="textid">Nom :</span> </li> <!-- 
 --><li class="pid"><span class="textid">Date de Naissance :</span>  </li><!--
 --><li class="pid"><span class="textid">Âge Réel :</span> </li><!--
 --><li class="pid"><span class="textid">Nationalité :</span> </li><!--
 --><li class="pid"><span class="textid">Profession:</span> </li><!--
 --><li class="pid"><span class="textid">Rang :</span>  </li><!--
 --><li class="pid"><span class="textid">Si pouvoir, lequel ?</span> </li><!--
 --><li class="pid"><span class="textid">Inscription au Sort :</span> </ul></div><!--

Opinions
--><div class="opinions contdonnees"><ul><li class="pid"><span class="textid">Sur la puce ?</span> Bla</li><!--

 --><li class="pid"><span class="textid">Sur les autres races ?</span> Bla</li></ul></div><!--

Joueur
--><div class="joueur contdonnees"><ul><li class="pid"><span class="textid">Prénom :</span> </li><!--

 --><li class="pid"><span class="textid">Âge :</span> </li><!--

 --><li class="pid"><span class="textid">Pseudo :</span> </li><!--

 --><li class="pid"><span class="textid">Comment nous avez-vous connu ?</span> </li><!--

 --><li class="pid"><span class="textid">Un parrain ?</span> </li><!--

 --><li class="pid"><span class="textid">Un commentaire ?</span> </li><!--

 --><li class="pid"><span class="textid">D'autres personnages ici ?</span> </li></ul></div></div><!--
 
 
 
 --><table class="desc"><tr><td class="ongletdesc" style="height:150px;"><p class="textong">P<br />h<br />y<br />s<br />i<br />q<br />u<br />e</p></td><td style="border-top: 1px solid #000000; border-right: 1px solid #000000;"><div class="phy"><div style="background-image: url(https://i.servimg.com/u/f83/14/68/18/69/lauran11.jpg); background-position:center top;" class="phy_img"></div><div class="phy_desc"> Blablabla
</div></div></td></tr>
<tr><td class="ongletdesc" style="height:150px;"><p class="textong">M<br />e<br />n<br />t<br />a<br />l</p><td style="border-right: 1px solid #000000;"><div class="phy"><div style="background-image: url(https://i.servimg.com/u/f83/14/68/18/69/lauran11.jpg); background-position:center -150px;" class="phy_img"></div><div class="phy_desc">BLABLABLA</div></div></td></tr>
<tr><td class="ongletdesc" style="height:300px;"><p class="textong">H<br />i<br />s<br />t<br />o<br />i<br />r<br />e</p><td style="border-bottom: 1px solid #000000;border-right: 1px solid #000000;"><div class="phy hist" style="height: 300px;"><div style="background-image: url(https://i.servimg.com/u/f83/14/68/18/69/lauran11.jpg); background-position:center bottom;height: 300px;" class="phy_img hist_img"></div><div class="phy_desc hist_desc" style="height:300px;"> BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA BLABLABLA</div></div></td></tr></table></div></div>

Hello !
En cliquant sur ton lien je ne vois pas de rendu ^^"
Est-ce que tu pourrais aussi retirer le spoiler autour du code ? Ce serait plus pratique pour els gens je pense ^^

Il est dans le spoiler du lien. Je corrigerai ça demain.

Edit: Corrigé

Merci =D

Alors du coup j'ai copié/collé ici et ça ne marche pas sur moi. Je pense qu'il doit y avoir des erreurs d'espaces dans ce que tu as dans tes balises style. Cela arrive parfois que cela fasse tout bugger ^^" Il va falloir vérifier ça ^^

C'est le bug dont je parlais.

Merci de votre patience et de votre aide, car il subsiste un bug: Si j'édite le message, le code se casse la gueule et je sais pas pourquoi ^^"

Et effectivement ça venait de la balise style. J'ai prévisualisé plusieurs fois ça à plus l'air de le faire. MERCI ^^

Alors les onglets marchent mais plus les hover x) Je suppose que c'est le même genre de problème ^^ (Le lien en haut si jamais =) )

... Désolée... Je crois que ça y est... J'espère ^^"

Et c'est tout bon ! Je classerais dans l'après-midi !