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.


    Fiche de réponse rp bleue-verte

    Partagez
    avatar
    Lazulijune
    FémininAge : 19Messages : 11

    le Mar 6 Déc 2016 - 18:52



    Bonjour à tous. Ceci est mon premier codage en libre-service ; c'est une réponse de rp aux couleurs bleues et vertes, qui n'est rien qu'en html. Les couleurs sont bien entendu modifiables !



    Titre du rp
    Nom des participants


    Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

    Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



    Code:
    <link href="https://fonts.googleapis.com/css?family=Advent+Pro|Yesteryear" rel="stylesheet" />
    <div style="width:500px; margin:auto; background-color:#C0D9D6; border-left: 2px solid #017162; border-right: 2px solid #017162;"><br /><div style="font-family:Yesteryear; font-size:35px; color:#017162; text-align:center;">Titre du rp</div><div style="font-family:Advent Pro; font-size: 12px; color:steelgrey; text-align: center; letter-spacing: 2px;">Nom des participants</div><div style="width:450px; margin: auto; border: 2px dashed #4B8E85;"></div>

    <div style="width: 450px; height: 400px; margin: auto; padding: 5px; background-color: #A6C8C4; overflow:auto; font-size:12px; text-align: justify; color: black; border: 1px solid #4B8E85;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

    Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
    <div style="text-align: right; font-size: 9px; color: black; font-style: italic; padding: 5px;"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a>
    </div></div>

    Le crédit est bien entendu ineffaçable ! En espérant que cela vous plaise.

    Edit : Encore une fois, j'ai appliqué les conseils de Shoki ! Et pour répondre à ceci :
    @Shoki a écrit:Si tu le souhaites, tu peux les réunir en une seule. Dans ce cas, tu copie-colle les valeurs de la seconde balise (en gros, ce qu'il y a dans style=""), tu les met dans la première en veillant à transformer le border en border-bottom, et tu joue ensuite avec les marges intérieures (padding-bottom ici) pour éloigner ou rapprocher le trait o/
    A vrai dire je savais déjà cela, et j'aurai sans doute pu le faire avant (ça ne m'avait pas trop traversé l'esprit sur le coup) mais je préfère le rendu tel qu'il est, la bordure ayant un effet meilleur avec le "border" qu'avec le "border-bottom". Merci de tes conseils en tout cas, c'est très gentil de ta part de pointer mes erreurs !


    Dernière édition par Lazulijune le Dim 11 Déc 2016 - 21:44, édité 3 fois
    avatar
    Shoki
    FémininAge : 16Messages : 1310

    le Dim 11 Déc 2016 - 9:17

    Coucou et merci pour le partage !
    Ton code est très joli, mais comme rien n'est parfait, je viens vérifier que tout va bien :toto:

    Les p'tites erreurs


    Première chose qui m'a frappé aux yeux :
    Code:
    <br>
    Sur FA, tu n'as pas besoin de cette balise, car le saut de ligne est automatique :) De plus, pour espacer deux blocs, il est préférable de jouer avec les marges o/ Et la syntaxe correcte est
    Code:
    <br />
    car tout comme img, cette balise est "orpheline" et se referme toute seule o/

    Un p'tit truc


    Ces deux lignes :
    Code:
    <div style="font-family:Advent Pro; font-size: 12px; color:steelgrey; text-align: center; letter-spacing: 2px;">Nom des participants</div>
    <div style="width:450px; margin: auto; border: 2px dashed #4B8E85;"></div>
    Si tu le souhaites, tu peux les réunir en une seule. Dans ce cas, tu copie-colle les valeurs de la seconde balise (en gros, ce qu'il y a dans style=""), tu les met dans la première en veillant à transformer le border en border-bottom, et tu joue ensuite avec les marges intérieures (padding-bottom ici) pour éloigner ou rapprocher le trait o/

    Et il y a aussi l'astuce des class que je t'ai déjà donné ici ~

    Mis à part cela, ton code fonctionne bien, je te laisse donc modifier o/





    avatar
    Onyx
    FémininAge : 24Messages : 3050

    le Mer 21 Déc 2016 - 4:33

    Salut!

    Tout me semble maintenant parfait alors je valide ce LS ! Il sera bientôt déplacé dans la zone appropriée Wink

    Merci du partage!



    Contenu sponsorisé


      La date/heure actuelle est Jeu 14 Déc 2017 - 14:08