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.

Le deal à ne pas rater :
Pokémon EV06 : où acheter le Bundle Lot 6 Boosters Mascarade ...
Voir le deal
Le Deal du moment :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

    (NYO) Codage d'un tableau

    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Mar 22 Déc 2015 - 0:52

    Ma demande



       Bonsoir ! ne sachant guère si cette demande peut être jointe avec ma précédente, je crée tout de même un nouveau sujet. Il s'agirait donc d'un tableau

       Schéma(s) et Eléments
       Schémas :
    Spoiler:

    Chaque lettre devant se trouver en-dessous du chiffre correspondant. En somme, un tableau "couché", mais sans lignes de séparation
       Tailles des éléments : En un peu plus grand, je dirais
       Version de votre forum : PHPBB3, je dirais


       Ressources
       Je n'ai pas vraiment d'images, si ce n'est que pour les lettres, ce seraient les lettres de cotation (E,D,C,B,A,S). Soit des images, pour avoir un beau rendu (typiquement, S en couleur or)

       Autres précisions ?
       J'ai conscience que ma demande est atypique, aussi n'hésitez pas à me le dire si elle paraît trop farfelue.  Merci beaucoup d'avance Wink
       


    Dernière édition par Darkshowl le Dim 27 Déc 2015 - 23:22, édité 2 fois
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 23 Déc 2015 - 10:43

    Hello! ^^
    Pourrais-tu nous donner un schéma de ce que tu veux? Parce que je t'avouerais qu'avec tes explications, j'ai un peu de mal à visualiser ce que tu veux, et je pense que ce sera pareil pour les autres codeurs ^^



    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Jeu 24 Déc 2015 - 10:45

    Voilà, c'est édité Wink

    Chaque lettre aurait donc sa propre couleur :

    - S : doré (l'image est donnée déjà Wink )
    - A : rouge
    - B : bleu (un bleu tirant vers l'électrique, je dirais, pour qu'il soit assez clair sans trop l'être)
    - C : vert (un vert clair moyen)
    - D : orange
    - E : brun


    Pour le tableau en lui-même, il ressemblerait à celui du schéma (en version alignée xD), mais les lettres seraient en taille 16 ou, tout du moins, pas plus grosses que les noms de carac's que je mettrai Wink


    Merci d'avance Wink
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 24 Déc 2015 - 10:59

    Hum en gros, ceci?



    Carac 1Carac 2Carac 3Carac 4Carac 5
    ACBDE

    Si jamais c'est ça, on a une étape du cursus ici qui explique comment le faire. Je peux aussi te donner le code que je viens de faire là:

    Code:
    <style type="text/css">table.tableau_darkshowl { border: 0px solid; margin: auto; } table.tableau_darkshowl td {padding: 0px 10px; } .tableau_darkshowl .perso td { font-size: 12px; } .tableau_darkshowl .lettres td { font-size: 16px; text-align: center; vertical-align: top;}</style>

    <table class="tableau_darkshowl"><tbody><tr class="perso"><!--
    --><td>Carac 1</td><!--
    --><td>Carac 2</td><!--
    --><td>Carac 3</td><!--
    --><td>Carac 4</td><!--
    --><td>Carac 5</td><!--
    --></tr><tr class="lettres"><!--
    --><td>A</td><!--
    --><td>C</td><!--
    --><td>B</td><!--
    --><td>D</td><!--
    --><td>E</td><!--
    --></tr></tbody></table>


    Dernière édition par NyoTheNeko le Ven 25 Déc 2015 - 14:57, édité 1 fois



    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Jeu 24 Déc 2015 - 11:59

    Oui, c'est tout à fait cela ! Par contre, comment appliquer la couleur voulue aux différentes lettres (pour le gold S, surtout que le problème se pose, pour les autres c'est bon ^^)

    Merci pour le lien, je vais aller le lire :)


    Et merci également pour le code Wink
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 25 Déc 2015 - 14:59

    Eh bien dans les td, tu peux mettre ce que tu veux. Par exemple, si tu veux mettre une i,mage, eh bien tu remplaces ton:
    Code:
    --><td>D</td><!--
    par:
    Code:
    --><td><img src="URL_IMAGE" /></td><!--

    Si tu veux du texte stylisé plutôt qu'une image, tu peux ajouter une class autour de ta lettre, donc par exemple:
    Code:
    --><td><span class="lettre_D">D</span></td><!--
    Et dans le css rajouter quelque chose comme:
    Code:
     .tableau_darkshowl .lettre_D { /* ICI CE QUE TU VEUX */ }

    Mon soucis principal, c'est que je n e sais pas où tu veux mettre ton tableau, et la mise en forme EXACT que tu en veux. si au final tu ne va mettre que des images pour unifier le tout (même police, mêmes effet, etc) il ne sert à rien que j’ajoute des choses dans le CSS.
    Si tu veux tout styliser dans le CSS (ce qui fait un effet or, mis à part la couleur, assez difficile) je peux continuer à coder.

    Mais là je peux pas vraiment t'aider des masses xD

    Joyeux Nowel au passage!



    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Sam 26 Déc 2015 - 10:56

    Bonjour,

    Merci, je te souhaite aussi un Joyeux Noël (hélas, avec un peu de retard :/) !


    Quant au tableau à proprement dit, je souhaiterais l'intégrer dans l'un des blocs du code que j'ai commandé précédemment ( https://www.never-utopia.com/t56909p30-louchita-fiche-perso-contenu-rp#887478) en lieu et placé d'un"hauteur auto", donc.

    Pour la mise en forme exacte, c'est tout à fait le tableau que tu m'as montré en ébauche, la seule différence étant les couleurs données aux différentes lettres. Pour le S, j'ai peur qu'en image, il dénote avec les autres lettres, qui ne seront pas en images, et ne se fonde pas dans le décor. Aussi, saurais-tu alors tout styliser dans le CSS s'il te plaît ? :)


    Je te remercie par avance Wink
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Sam 26 Déc 2015 - 17:57

    merci



    (NYO) Codage d'un tableau 30xivrd
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Sam 26 Déc 2015 - 20:33

    Bon P'tit loup, ce serait bien d'éviter de remercier dans les demandes des autres!

    Darkshowl -> du coup, je vais effectivement reprendre la fiche de Louchita et te mettre le tableau directement dedans pour que tu puisses voir ce que ça va donner dans sa finalité ^^

    Au fait, tu voudrais mettre quoi à la place des Carac 1, Carac 2, etc ? Ce serait des noms de personnages?
    Si je demande c'est surtout pour prévoir la place disponible pour tout ça ^^

    Également, je suppose que si le tableau devient trop "long", plutôt que réduire les cellules tu commences un nouveau tableau?



    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Sam 26 Déc 2015 - 21:04

    D'accord Wink À la place des carac's, ce serait : vitesse, intelligence, force, endurance, dextérité

    Normalement, le tableau sera fixe. Il ne devrait y avoir que ces cinq caractéristiques-là, pas d'autres Wink
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 27 Déc 2015 - 11:28

    Génial!

    Du coup je t'ai fait ça: click. Vu que y'a pas assez de place pour mettre toutes les lettres, j'ai mit S et A dans la même case, mais il est clair qu'il n'y a qu'une seule lettre qui irait normalement dans cette case! ^^ J'ai essayé de faire un petit effet sur le S, pour qu'on voit que c'est un peu doré.

    Sinon, s'il y a le moindre changement, tu me fais signe ^^



    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Dim 27 Déc 2015 - 16:18

    C'est parfait, c'est tout à fait ça ! Le rendu est magnifique ! :) Merci beaucoup Wink
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 27 Déc 2015 - 16:58

    Alors je te redonne le code de ta fiche, avec le tableau dedans:



    si tout est bon, mets simplement l'icône terminée pour que je puisse archiver ^^



    Darkshowl
    Darkshowl
    MasculinAge : 28Messages : 32

    Dim 27 Déc 2015 - 23:23

    Merci beaucoup Wink


    Voilà, j'ai mis l'icône (normalement '-') Wink
    Contenu sponsorisé


      La date/heure actuelle est Mar 7 Mai 2024 - 19:49