AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-29%
Le deal à ne pas rater :
PC portable Gamer ERAZER DEPUTY P60 – 15,6” FHD 144Hz – i7-12è ...
999.99 € 1399.99 €
Voir le deal

    Fiche de présentation

    Lauranna
    Lauranna
    FémininAge : 34Messages : 30

    Ven 17 Jan 2020 - 19:52

    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>


    Dernière édition par Lauranna le Sam 18 Jan 2020 - 12:31, édité 5 fois
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 17 Jan 2020 - 23:05

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



    Lauranna
    Lauranna
    FémininAge : 34Messages : 30

    Ven 17 Jan 2020 - 23:16

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

    Edit: Corrigé
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Sam 18 Jan 2020 - 11:48

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



    Lauranna
    Lauranna
    FémininAge : 34Messages : 30

    Sam 18 Jan 2020 - 12:05

    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 ^^
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Sam 18 Jan 2020 - 12:16

    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 =) )



    Lauranna
    Lauranna
    FémininAge : 34Messages : 30

    Sam 18 Jan 2020 - 12:31

    ... Désolée... Je crois que ça y est... J'espère ^^"
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Sam 18 Jan 2020 - 13:12

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



    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 10:17