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 :
DYSON V8 Origin – Aspirateur balai sans fil
269.99 € 379.99 €
Voir le deal

    Personalisation d'une fiche de présentation

    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Lun 25 Juin 2012 - 14:31

    Bonjour,

    Comme finalement il s'agit plus d'une commande que d'un ajustement je viens ici faire ma demande.

    Merci à l'avance à la personne qui va me rendre ce service.


    Commande
    Type de document voulu : Personnalisation de la fiche type de personnage.
    Adresse du forum : http://mackaelah.forum-canada.com/
    Description des éléments : Il s'agit de prendre le code d'une fiche type pour la changer en codage CSS.
    Couleurs ou tons : Voir le code de la fiche
    Images : Voir le code de la fiche
    Autres précisions :
    Code:
    <span style="display: block; position: absolute; width: 160px; height: 180px; background: url(http://i221.photobucket.com/albums/dd52/xodramm/Mackaelah/fiche.png) center center; margin-top: 40px; margin-left: 830px">

    </span>
    </span>

    <div style="background-color: #142328; border-top: 12px solid #000000; border-bottom: 12px solid #000000; text-align: justify; font-family: verdana; font-size: 11px; color: #7589A8; margin-top: 50px; margin-left: 80px; min-height: 500px;">

    <span style="display: block; text-align: leftt; font-family: arial black; font-size: 46px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-right: 20px;">NOM DU PERSONNAGE</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; float: left; width: 200px; height: 400px; margin-left: 20px; margin-right: 10px; border: 2px solid #762e2e; -webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);"> [img]http://i221.photobucket.com/albums/dd52/xodramm/Mackaelah/vavaombrec.jpg[/img]</span><span style="display: block; height: 1000px; overflow: auto; font-size: 12px; color: #7589A8; text-align: justify; line-height: 12px; padding-right: 12px;">

    <span style="display: block; text-align: left; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-left: 40px;">Informations personnelles</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding: 20px;"
    [b]SURNOM[/b] :
    [b]ÂGE RÉEL[/b] :
    [b]ÂGE[/b] :
    [b]ANNIVERSAIRE[/b] :
    [b]LANGUE(S)[/b] :
    [b]TAILLE [/b]:
    [b]POIDS [/b];
    [b]GROUPE [/b]:
    [b]OCCUPATION [/b]: (pour les habitants surtout, à savoir le petit métier qu'ils font à l'intérieur du manoir)</span>

    <span style="display: block; text-align: left; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-left: 40px;">Description physique</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding: 20px;">histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire</span>

    <span style="display: block; text-align: left; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-left: 40px;">Description psychologique</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding: 20px;">apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère</span>

    <span style="display: block; text-align: left; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-left: 40px;">Biographie</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding: 20px;">apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère</span>

    <span style="display: block; text-align: left; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-left: 40px;">Autres informations</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding: 20px;">apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère</span>

    <span style="display: block; width: 400px; max-height: 300px; overflow: auto; float: left; margin-right: 10px; border: 3px solid #000000; padding: 10px;">
    <span style="display: center center;  margin: 05px;  "></span>
    <b>PSEUDO</b> :
    <b>âGE RÉEL</b> :
    <b>DÉCOUVERTE DU FORUM</b> :
    <b>FRÉQUENCE D'ACTIVITÉ</b> :
    <b>CODE DE RÈGLEMENTS</b> :
    <b>MOT À DIRE</b>
    </span>

    <div style="clear: both;"></div>

    <a style="display: block; text-align: center; color: #762e2e; font-size: 10px; font-family: arial narrow; letter-spacing: 2px;" href="http://www.never-utopia.com">© Never-Utopia</a>
    </div>

    Lien d'origine du tutoriel qui a été ajuster pour les besoins de mon forum : https://www.never-utopia.com/t38830-i-m-a-shinobi


    Encore merci beaucoup.


    Dernière édition par xodramm le Lun 2 Juil 2012 - 23:26, édité 1 fois
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Lun 25 Juin 2012 - 18:25

    Hello normalement on a pas le droit a deux commande simultanée de codage mais vu que c'est une personnalisation je la laisse.

    La commande est validée !▬ il est autorisé de la relancer toutes les 48h minimum
    ▬ une commande laissée sans nouvelles sera relancée au bout de 10 jours
    ▬ après la relance du modérateur, si nous n'avons toujours pas d'actualisation de la commande elle sera archivée après une semaine



    Personalisation d'une fiche de présentation 376864signichigo
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Mer 27 Juin 2012 - 11:41

    Personne pour m'aider :triste:
    Bôma Wolf
    Bôma Wolf
    MasculinAge : 33Messages : 87

    Mer 27 Juin 2012 - 14:40

    J'ai pas bien compris ce que tu voulais... Peux tu m'expliquer ?




    Personalisation d'une fiche de présentation Lkxa3-1d8bc28
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Mer 27 Juin 2012 - 18:48

    Salut, je suppose que ce que tu veux c'est avoir une fiche html plus simple grâce à un système de classe et le code css qui va avec. Si c'est bien ça je peux m'en occuper Very Happy



    Personalisation d'une fiche de présentation 962239linknever
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Mer 27 Juin 2012 - 22:10

    C'est pas mal ça oui. Ce que je voudrais c'est éviter de passer fiche par fiche si jamais j'ai un changement de thème XD :love:
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Mer 27 Juin 2012 - 23:35

    Ok, t'as raison c'est plus simple de cette manière puisque les couleurs changeront en fonction de la feuille css.
    Je suppose que l'on a l'autorisation vu que la fiche provient de NU, il ne faudra juste pas que tu oublies le crédit Very Happy
    Je m'en occupe demain dans la journée !



    Personalisation d'une fiche de présentation 962239linknever
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Jeu 28 Juin 2012 - 11:36

    Oui je m'occupe des crédits au fur et à mesure que j'ajoute des trucs sur mon forum XD Là en gros je crédite la fiche et ensuite je met ton nom pour l'ajustement ? Juste pour être bien sur.
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Jeu 28 Juin 2012 - 12:12

    Salut !
    Ne t’inquiètes pas pour les crédits je les ai laissés sur la fiche Wink (pas besoin d'inscrire mon pseudo la fiche d'origine est de NU et de toi)

    Voilà les codes, j'ai comparé les aperçus de l'ancienne et de la nouvelle et c'est la même chose.

    Le code HTML à mettre dans les messages :


    La fiche CSS qui va avec :


    Bien-sûr si quelque chose ne va pas fait moi signe !



    Personalisation d'une fiche de présentation 962239linknever
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Jeu 28 Juin 2012 - 16:15

    C'est presque ça ^^ Le rond dans l'image sort du texte par contre et j'aimerais bien avoir le texte des descriptions et biographie sous l'image du personnage.

    Merci encore

    Voici le lien du résultat : http://mackaelah.forum-canada.com/t24-fiche-type#88
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Jeu 28 Juin 2012 - 19:50

    Ok je vois bien. Le code que tu fournis n'a pas cette configuration. bizarre ? Quoi qu'il en soit je te fait ça Wink



    Personalisation d'une fiche de présentation 962239linknever
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Jeu 28 Juin 2012 - 20:51

    Ha je pense savoir pourquoi. C'est le code qui avait été corrigé que tu vois dans le lien.

    Code:
    <span style="display: block; position: absolute; width: 160px; height: 180px; background: url(http://i221.photobucket.com/albums/dd52/xodramm/Mackaelah/fiche.png) center center; margin-top: 40px; margin-left: 683px">

    </span>
    </span>

    <div style="background-color: #142328; border-top: 12px solid #000000; border-bottom: 12px solid #000000; text-align: justify; font-family: verdana; font-size: 11px; color: #7589A8; margin-top: 50px; margin-left: 80px; min-height: 500px;">

    <span style="display: block; text-align: leftt; font-family: arial black; font-size: 46px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-right: 20px;">NOM DU PERSONNAGE</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; height: 1000px; overflow: auto; font-size: 12px; color: #7589A8; text-align: justify; line-height: 12px; padding-right: 12px;">

    <span style="display: block; float: left; width: 200px; height: 400px; margin-left: 20px; margin-right: 10px; border: 2px solid #762e2e; -webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);"> <img src="http://i221.photobucket.com/albums/dd52/xodramm/Mackaelah/vavaombrec.jpg"/></span>

    <span style="display: block; text-align: left; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; padding-left: 40px;">Informations personnelles</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding: 20px;"
    [b]SURNOM[/b] :
    <br/>
    [b]ÂGE[/b] :
    <br/>
    [b]ÂGE APPARENT[/b] :
    <br/>
    [b]ANNIVERSAIRE[/b] :
    <br/>
    [b]LANGUE(S)[/b] :
    <br/>
    [b]TAILLE [/b]:
    <br/>
    [b]POIDS [/b]:
    <br/>
    [b]GROUPE [/b]:
    <br/>
    [b]OCCUPATION [/b]: (pour les habitants surtout, à savoir le petit métier qu'ils font à l'intérieur du manoir)</span>
    <br/>
    <br/>
    <br/>
    <span style="display: block; text-align: center; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000;">Description <br/>physique</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding:10px;">histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire - histoire</span>

    <span style="display: block; text-align: center; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000;">Description<br/>psychologique</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px; padding-right:200px"></span>

    <span style="display: block; padding:10px;">apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère</span>

    <span style="display: block; text-align: center; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000;">Biographie</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px;"></span>

    <span style="display: block; padding-right:10px;">apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère</span>

    <span style="display: block; text-align: center; font-family: arial black; font-size: 36px; color: #762e2e; text-shadow: 3px 3px 0px #000000; ">Autres informations</span>
    <span style="display: block; border-bottom: 6px solid #000000; margin-top: -20px; padding-right:200px"></span>

    <span style="display: block; padding:10px;">apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère - apparence & caractère</span>

    <span style="display: block; width: 400px; max-height: 300px; overflow: auto; float: left; margin-right: 10px; border: 3px solid #000000; padding: 10px;">
    <span style="display: center center;  margin: 05px;  "></span>
    <b>PSEUDO</b> :
    <b>AGE RÉEL</b> :
    <b>DÉCOUVERTE DU FORUM</b> :
    <b>FRÉQUENCE D'ACTIVITÉ</b> :
    <b>CODE DE RÈGLEMENTS</b> :
    <b>MOT À DIRE</b>
    </span>

    <div style="clear: both;"></div>

    <a style="display: block; text-align: center; color: #762e2e; font-size: 10px; font-family: arial narrow; letter-spacing: 2px;" href="http://www.never-utopia.com">© Never-Utopia</a>
    </div>

    Je n'avais pas donner le bon au début (gomen)
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Jeu 28 Juin 2012 - 22:27

    Ok, c'est plus simple si tu me dis ce qui a été corrigé plutôt que je refasse tout.

    EDIT: Sinon c'est pas grave je pourrais voir dans le détail demain Wink



    Personalisation d'une fiche de présentation 962239linknever
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Ven 29 Juin 2012 - 1:02

    En fait, comme sur l'image de la fiche de présentation (la première), on voit que «description physique» commence sous l'avatar en angle. Cela donne plus d'espace pour le texte de la fiche.

    J'ai résolu pour l'image qui dépassait de la fiche (le rond), mais je ne vois vraiment pas où il faut aller pour mettre le reste de la fiche sous la partie avatar afin d'utiliser un maximum d'espace.

    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Dim 1 Juil 2012 - 23:10

    Hello !

    Voilà le travail Wink J'ai réglé quelques petits détails que ne servait à rien (je veux dire qui ne changeaient rien) comme un "leftt" mais même en le mettant en "left" ça n'a rien changé puisque par défaut ça s'aligne à gauche. Un "padding" qui revient deux fois, je n'ai pas compris pourquoi et en plus tu avais oublié le ";" après donc il ne marchait pas et si j'avais corrigé ça aurait déséquilibré par rapport au reste de la fiche donc je l'ai supprimé. Je crois que c'est tout. Et aussi à un moment pour sauter des lignes tu met le code "< br/>" mais sur forumactif lorsque tu sautes simplement des ligne, au résultat du post la ligne est sauté donc tu n'as pas besoin (mais je te les ai laissé quand même).

    Bref, voici les codes et le résultat ressemble exactement aux dernier code que tu me donnes (j'ai comparé).

    Le html à mettre dans les post :


    Le CSS qui va avec :



    Personalisation d'une fiche de présentation 962239linknever
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Lun 2 Juil 2012 - 23:26

    Me revoilà après quelques jours en voyage. Merci pour tout c'est parfait XD
    Klash
    Klash
    MasculinAge : 44Messages : 20653

    Mar 3 Juil 2012 - 18:21

    Je déplace.



    Personalisation d'une fiche de présentation 376864signichigo
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 4:10