AccueilRechercherS'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.


    Harmoniser fiche d'information personnage

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

    le Ven 24 Mai 2019 - 19:33

    Bonjour,

    je travaille actuellement pour me faire la main sur une fiche d'information qui viendrait remplacer les fiches de présentations, de liens et de suivis rp. J'ai réussis à faire une fiche avec des onglets à peu près propres mais j'aimerais peaufficner la partie présentation. A savoir rajouter un encadrer ombrée pour l'avatar du personnagee t un autre encadrer pour ce qu'il faut savoir du personnage, mis des que j'essaie de rajouter un nouvelle encadrer tous se décale.

    Ensuite j'aimerais rendre plus propre la partie liens et la partie rp ou on dissocie bien chaque cadre avec unoverflow mais des que j'essaie de réécrire mon code avec cela me détruit tout. Idéalement je rajouterais sans doute un dernier onglet pour l'histoire du personnage pareil sous forme d'encadrer ombré en overflow, mais ayant du al déjà avec les 3 premiers je n'ais pas encore tenter de créer la quatrième partie. Si quelqu'un à une suggestion je suis preneuse.

    merci par avance


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

    le Sam 25 Mai 2019 - 10:20

    Bonjour en continuant mon codage j'ai pu donc intégrer ma page histoire à mon code et je l'ai légèrement agrandit par contre je rencontre toujours autant de problème pour réussir à mettre les éléments comme je veux à l'intérieur de chaque page pour avoir un ensemble harmonieux. De plus je n'arrive pas à maintenir les pages répertorier en onglet en mod caché tant que je ne vais pas sur l'onglet en question. j'ai du oublier quelque chose dans mon code maisje ne trouve pas.



    Spoiler:
    Code:
    <div style="background-image: url('https://media.giphy.com/media/wsafF4NaQTCIU/giphy.gif'); width: 500px; height:200px;"></div><div style="background-color: #6d7da1; width: 400px; padding: 10px 50px;"><div style="text-align: center;"><font size="6" color="#FFFFFF" face="chopin">Prénom P. Nom</br><div style="width:450px; text-align:center; font-family:chopin; font-size:9px; color:#7b1c1c; padding-left:10px; padding-rig*ht:10px; margin-top:5px;line-height:100%; letter-spacing: 2px; text-transform: uppercase;">Et une petite citation...</div></font></div></div><div style="background-color: #384157; width: 460px; padding: 20px;"><div style="text-align: center;"><font face="arial" color="#666666" size="3"><a href="#1" title="" target="" ><font color="#6b82b8">Etat Civil</font></a>  - <a href="#2" title="" target=""><font color="#6b82b8">Mes liens</font></a>  -  <a href="#3" title="" target=""><font color="#6b82b8">Mon suivi RP</font></a> - &nbsp;<a href="#4" title="" target=""><font color="#6b82b8">Mon Histoire</font></a></font></div><div style="text-align: center;"><div style="border-bottom: 1px solid #bbb;"><br></div></div></div><div style="background-color: #384157; width: 500px; height:600px; overflow: hidden;">

    <div style="height: 600px; width: 450px; overflow: auto; padding:0px 25px 25px 25px; background-color: #384157;"><a name="1"></a><div style="text-align: center;"><font color="#6b82b8">Moi je suis...</font></div><span style="display: block; text-align: left; font-family: 'Poiret One', cursive; font-size: 20px; color: #003333; text-shadow: 0px 0px 15px #ffffff; margin: 30px 0px -30px 240px;">Prénom P. Nom</span><table style= " border-spacing: 30px;"><div style="width:500px;"><table cellspacing="20"><tr><td><img src="https://i.servimg.com/u/f47/19/96/70/98/origin10.jpg" style="height:400px; width:200px; border:1px dotted Gray;"></td><td style="width: 200px; background-color: #6d7da1; padding: 20px; text-align: justify; color: #ffffff; font-family: 'chopin; font-size: 10px; line-height: 30px; box-shadow: 3px 4px 6px #ffffff; border-radius: 25px;">
    [list]
    [*]Je suis fille de [nom du dieu]
    [*]Je suis née le [date de naissance]
    [*]Je viens de [Origine]
    [*]J'aime [3choses]
    [*]Je déteste [3 choses] - Mon défault fatal est [1 default]
    [*]Mes pouvoirs sont: [3 pouvoirs]
    [*]Avatar : [acteur/mangas]
    [/list]
    </td></tr></table></div></div></div></font></div></div>

    <div style="height: 600px; width: 450px; overflow: auto; padding:25px; background-color: #384157;"><a name="2"></a><div style="text-align: center;"><font color="#668ce3">Mes Liens</font></div><div style="text-align: left;"><font color="#ccffcc"><div style="text-align: center;"><font color="#666666">Mes connaissances... </font></div>

    <spanstyle="color: #339966;">★</span><a href="lien fiche perso">Nom du lien </a> -  Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien fiche perso">Nom du lien </a> -  Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien fiche perso">Nom du lien </a> -  Nom Prénom  
    <spanstyle="color: #339966;">★</span><a href="lien fiche perso">Nom du lien </a> -  Nom Prénom  
    </font></div></div>

    <div style="height: 600px; width: 450px; padding:25px; background-color: #384157;"><a name="3"></a><div style="text-align: center;"><font color="#668ce3">Mon Suivi RP</font></div><div style="text-align: center;"><font color="#668ce3">Mes aventures... </font></div><div style="text-align: left;"><font color="#000033"><div style="width:450px; text-align:center; font-family:Chopin; font-size:9px; color:#336666; padding-left:0px; padding-rig*ht:0px; margin-top:5px;line-height:100%; letter-spacing: 2px; text-transform: uppercase;"><b>Rps Réservés</b></div>

    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom  
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom

    <div style="text-align: left;"><font color="#000033"><div style="width:450px; text-align:center; font-family:Chopin; font-size:9px; color:#336666; padding-left:0px; padding-rig*ht:0px; margin-top:5px;line-height:100%; letter-spacing: 2px; text-transform: uppercase;"><b>Rps en Cours</b></div>

    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom  
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom

    <div style="text-align: left;"><font color="#000033"><div style="width:450px; text-align:center; font-family:Chopin; font-size:9px; color:#336666; padding-left:0px; padding-rig*ht:0px; margin-top:5px;line-height:100%; letter-spacing: 2px; text-transform: uppercase;"><b>Rps Terminés</b></div>

    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom  
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    <spanstyle="color: #339966;">★</span><a href="lien du rp">Titre</a> - ft. Nom Prénom
    </div></font></div></div>
    <br/>

    <div style="height: 600px; width: 450px; padding:25px; background-color: #384157;"><a name="4"></a><div style="text-align: center;"><font color="#668ce3">Ma Storie </font></div><div style="text-align: left;"><font color="#668ce3"><div style="text-align: center;"><font color="#666666">Il était une fois ... </font></div>

    <div style="text-align: center;"><br></div></div>

    <div style="float: left; width: 100%;"><div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 25px; width: 420px; border: 0px solid black; border-radius: 20px; box-shadow: 3px 4px 6px black;"><div style="height: 250px; width: 300px; overflow: auto;"><div style="text-align: center;">[color=#000033]TAt nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.

    Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

    Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

    Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.

    Hac ita persuasione reducti intra moenia bellatores obseratis undique portarum aditibus, propugnaculis insistebant et pinnis, congesta undique saxa telaque habentes in promptu, ut si [/color]</div></div></div></div>

    <a style="color: #1c1b38 !important; font-size: 10px; padding : 0px; font-family: 'Chopin'; letter-spacing: 2px;">:copyright: Illeanëlia </a>
    </div> </center>
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 362

    le Sam 25 Mai 2019 - 21:18

    Bon après maintes péripéthie j'ai obtenue on va dire des fiches à peu près correcte et disposée comme je veux. Cependant reste le problème que je ne comprends pas pourquoi toute les fiches restes les unes derrière les autres alors que je les voulais par onglet en transition et que dans mon code j'ai bien mis que je voulais un float. Quelqu'un pourrait-il m'aider là dessus?


    codage:
    Illeanëlia
    Illeanëlia
    FémininAge : 33Messages : 362

    le Ven 31 Mai 2019 - 21:35

    Voilà j'ai enfin pu finir ma fiche et cela donne ce rendu. En cliquant sur les liens j'obtiens les autre fiches qui remplace l'état civil.





    Apperçue:

    Prénom P. Nom
    Et une petite citation...
    Etat civil
    Prénom P. Nom


    • Je suis fille de [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]




    Mes liens
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.  
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.  
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.  
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.  
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation. 
    Nom du personnage -  Historique de la relation.



    Mes RP
    Rps Réservés


    Titre - ft. Nom Prénom 
    Titre - ft. Nom Prénom  
    Titre - ft. Nom Prénom 
    Titre - ft. Nom Prénom 

    Rps en Cours


    Titre - ft. Nom Prénom 
    Titre - ft. Nom Prénom  
    Titre - ft. Nom Prénom 
    Titre - ft. Nom Prénom 

    Rps Terminés


    Titre - ft. Nom Prénom 
    Titre - ft. Nom Prénom  
    Titre - ft. Nom Prénom 
    Titre - ft. Nom Prénom





    Mon Histoire



    TAt nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.

    Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

    Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

    Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.

    Hac ita persuasione reducti intra moenia bellatores obseratis undique portarum aditibus, propugnaculis insistebant et pinnis, congesta undique saxa telaque habentes in promptu, ut si



    :copyright: Illeanëlia

    Contenu sponsorisé


      La date/heure actuelle est Mer 13 Nov 2019 - 16:34