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.


    Kit fiche de présentation pour forum

    Partagez
    avatar
    Illeanëlia
    FémininAge : 31Messages : 85

    le Mar 26 Sep 2017 - 12:41


    voilà je débute en codage et je voudrais pour mon forum créer mon propre kit contenant donc la fiche deprésentation, l'etête de message Staff, la fiche des liens, le suivis RP ce genre de chose. Quand il s'agit de récupérer un code en libre service et juste changer les images voir modifier les couleurs ça va encore mais là je ne sais pas par quel bout commencer; j'ai fait sur photofiltre dans un premier temps l'ébauche de ma fiche de présentation qui se retrouvera en deux postes.

    ici
    et là

    en sachant que les couleurs mises j'aimerais si ce n'est as trop compliqué qu'elles s'adaptent au couleur du forum. Donc il va me falloir faire le codage de la fiche en elle-même et un CSS à rajouter dans mon forum je pense mais je ne vois pas comment procéder pour le moment.
    avatar
    valtena_ethan
    MasculinAge : 26Messages : 414

    le Mer 27 Sep 2017 - 11:52

    Bonjour à toi,

    C'est très bien de commencer par une maquette, surtout en débutant.

    Tu peux utiliser les class CSS pour séparer le html et le CSS, ça rendra plus lisible le code pour les personnes qui vont utiliser ta fiche et ça te permettra de pouvoir changer les couleurs pour toutes les fiches dans le futur, quand tu changeras ton design.

    Par exemple, le code à utiliser pourrait être :

    Code:
     <div class="fiche-prez"><!--
    --><div class="partie-physique"></div><!--
    --><div class="partie-mental"></div><!--
    --><div class="partie-histoire"></div><!--
    --></div>

    Et le CSS tu le mettrait dans le CSS du forum (via le panneau d'admin). Il ressemblerai à quelque chose du genre :

    Code:

    .fiche-prez {
    [...]
    }

    .partie-physique {
    [...]
    }

    .partie-mental {
    [...]
    }

    .partie-histoire {
    [...]
    }


    J'espère que ça va t'aider à démarrer ton code. N'hésites pas à poser d'autres questions si besoin et montrer tes essais ; )



    avatar
    Illeanëlia
    FémininAge : 31Messages : 85

    le Mer 27 Sep 2017 - 14:30

    merci pour ses informations je vais tenter de débuter avec cela en espérant pouvoir suivre ma maquette ^^


    voilà mon test de code brut de la manière dont je le vois après c'est une question de la mise en forme sur le forum et d'appliquer le bon CSS qui me pose plus de problème :

    Code:
    <center><div class="ps">Prénom & Nom</div>
    <table><tr><td><div class="base1"><img src="ban500*200" class="gif1">
    <div class="citat">“ Citation ”</div>
    <div style="padding: 25px;"><span class="titre2">Psyche du personnage</span>
    <div class="psych">
    ici le caractère, sous forme rédigé. 5 lignes minimum
    </div>

    <span class="titre2"> Vos petites Anecdotes</span>
    <div class="anecd">
    <w>1 *</w> anecdote ici <w>2 *</w> anecdote ici <w>3 *</w> anecdote ici  <w>4 *</w> anecdote ici <w>5 *</w> anecdote ici <w>6 *</w> anecdote ici <w>7 *</w> anecdote ici <w>8 *</w> anecdote ici <w>9 *</w> anecdote ici <w>10 *</w> anecdote ici <w>11 *</w> anecdote ici <w>12 *</w> anecdote ici
    <div style="padding: 25px;"><span class="titre2">ce que je vois….</span>
    <div class="ceque">
    ici le physique du personnage, sous forme rédigé. 5 lignes minimum
    </div>

    </div></div>
    </div></td>

    <td><div class="base2"><div class="titre">Me…</div><div class="numero1">
    <span class="remplir">NOM :</span>... <span class="remplir">PRENOM(s) :</span>... <span class="remplir">AGE :</span>... <span class="remplir">DATE DE NAISSANCE :</span>... <span class="remplir">ORIENTATION SEXUELLE :</span>... <span class="remplir">GROUPE :</span>...  <span class="remplir">AVATAR :</span>...</div><center><img src="gif160*70.391" class="gif2"></center>

    <div class="numero2">
    |si vous êtes un demi-dieu.|
    <span class="remplir">ORIGINE :</span>... <span class="remplir">AGE D'ARRIVE à LA COLONIE :</span>... <span class="remplir">PARENT DIVIN :</span>... <span class="remplir">AMBITION :</span>... <span class="remplir">DEFAUT FATAL :</span>... <span class="remplir">POUVOIRS :</span> ... (maximum 3) <span class="remplir">OBJETS :</span> ... (1 animal et 1 arme en bronze céleste)

    </div>
    <div class="titre">Puis...</div><center><img src=gif160*70.391 " class="gif2"></center><div class="titre">De l’autre côté du Miroir…</div>

    <div class="numero1"><span class="remplir">PSEUDO & AGE :</span> ...
    <span class="remplir">COMMENT AS-TU CONNU LE FORUM ?</span> ...
    <span class="remplir">DOUBLE COMPTE :</span> ...
    <span class="remplir">UN DERNIER MOT ?</span> ... </div>
    <center>">© Illeanëa</a></div></center></div></td></tr></table></center>
    avatar
    valtena_ethan
    MasculinAge : 26Messages : 414

    le Lun 6 Nov 2017 - 15:44

    Salut,

    désolé, je suis passé à côté de ta réponse. Je me doute que ça arrive trop tard mais je réponds au cas où.

    Le temps de coder, ton css tu peux le mettre dans des balises dans le même sujet
    Code:
    <style> ton css sans retour la ligne </style>

    Mais par la suite, je te conseille de le mettre dans tes feuilles de style du forum. comme ça tu pourras changer le css de toutes les présentations utilisant ton kit très facilement par la suite.

    Concernant le HTML, les balises center sont à éviter au profit du css sur des blocs(margin: auto)
    pareil pour les tables, elle ne servent pas à faire du placement, pour ça tu as les display block, inline et surtout les display flex. Mais il y a aussi d'autres propriétés de positions.

    La raison d'éviter ces deux balises est simple : elles mélange forme (CSS) et structure (HTML). La position fait partie de la forme.

    Sinon c'est plutôt bien fait.



    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 7:52