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 du moment : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

    Fiche RP simple avec image de fond

    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Sam 28 Mar 2020 - 10:54



    Fiche RP simple avec image de fond



    Voilà je propose une petite fiche rp assez simple

    rendu:

    Alors c'est un ls avec juste un corps HTML tout est modifiable bien sur ^^

    Code:
    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet"><div style="background-image: url('https://i.servimg.com/u/f94/19/77/99/78/8x6s9j11.jpg'); width: 550px; background-size: cover; border: solid 2px #e5e5e5; box-shadow: 2px 2px 10px #a0a0a0; border-top-left-radius: 10px; border-bottom-right-radius: 20px; margin: auto;">

    <div style="width: 400px; text-align: center; font-family: 'Cinzel Decorative',cursive; font-size: 30px; font-weight: bold; letter-spacing: -1px; color: #55551F; padding: 15px 0px 3px 0px; text-shadow: 3px 3px 2px #57525F; margin: auto;">Titre de votre Rp</div><div style="width: 350px; color: white; font-size: 9px; text-transform: uppercase; text-align: center; font-family: helvetica, sans serif; margin: auto;">Petit mot doux qui est dit à l'oreille, de peu de chose fait merveille !</div><div style="padding: 0px; width: 450px; height: 200px; border: solid 3px #e5e5e5; box-shadow: 2px 2px 10px #a0a0a0; border-radius: 0px ; background-image: url('https://i.pinimg.com/originals/00/0b/68/000b68a9cf1c3616b3ba1648767ebd2b.gif'); -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); margin: auto;"></div>

    <div style="width: 400px; font-family: ARIAL, sans serif; font-size: 11px; line-height: 12px; text-align: justify; background-color: transparent; padding: 10px 10px 10px 10px; color: #55551F; box-shadow: 2px 2px 10px #55551F; margin: auto; overflow: auto; font-weight: bold;">Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vica;rium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.

    Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

    Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.</div>

    <p style="text-align: center; font-weight: bold;"> n.1 | 434 mots
    code (c) Luinilinëalia</p></div>


    Dernière édition par Illeanëlia le Mer 1 Avr 2020 - 16:04, édité 10 fois
    Shaneliae
    Shaneliae
    FémininAge : 27Messages : 313

    Sam 28 Mar 2020 - 13:17

    Hello Illeanëlia !

    Merci pour ce LS, mais avant de le valider il faut d'abord faire quelques petites corrections.
    • La balise center est dépréciée, cela signifie que dans un avenir proche les navigateurs ne la comprendront plus et elle ne fonctionnera plus dans les codes. A la place, tu peux mettre un
      Code:
      margin:auto;
      dans le style de ta première div.
    • La balise b est à utiliser pour mettre du texte en gras de façon ponctuelle. Si tu veux mettre tout un bloc de texte en gras, tu peux utiliser
      Code:
      font-weight: bold;
      dans la div entourant ton texte.
    • Est-ce normal que ton image de fond n'aille pas jusqu'à la fin de ton cadre ?
    • Il est conseillé d'utiliser un titre présentant un peu mieux ton LS, on a déjà pas mal de "fiche rp simple". Si tu n'as pas d'idée, on peut se charger de remplacer le titre à la validation du LS.


    Et enfin un petit commentaire personnel : j'adore ton gif :love:

    Voilà ! Corrige les quelques points plus haut et on pourra valider ton LS 😄



    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Sam 28 Mar 2020 - 14:01

    Bonjour et merci ,

    j'ai fait les quelques rectification demandée. Pour l'image non ce n'est pas normal mais je n'ai pas trouver le système d'ajustage de tatillonne un peu encore niveau codage. J'essaie de m'améliorer donc je prends toute les correction sont bonne à prendre. Pour le titre non je n'ai pas vraiment d'idée mais je suis preneuse si vous en trouvez une ^^

    merci pour ton commentaire, j'aime beaucoup cette gif aussi je l'utilise souvent dans mes images de fond pour mes fiches que je code ^^
    Shaneliae
    Shaneliae
    FémininAge : 27Messages : 313

    Dim 29 Mar 2020 - 18:16

    Hello !

    Alors pour ton image de fond tu peux utiliser :
    Code:
    background-size: cover;
    Cela étirera automatiquement ton image de fond pour couvrir le fond. Mais attention, cela étire l'image et la rend donc floue si elle n'est pas assez grande. Si tu ne veux pas cela, tu peux aussi utiliser
    Code:
    background-repeat: repeat;
    Cela fera répéter ton image sans la déformer. Seulement, si ton image n'est pas faite pour être répétée, cela fera des traits pas très beau. Un peu comme un papier peint mal aligné si tu veux.

    J'ai vu d'autres petites erreurs que je n'ai pas vu au premier regard. Il faut faire attention aux doubles espaces dans ton code. J'en ai par exemple vu dans le style de ta première div. Les doubles espaces peuvent désactiver les styles que tu as écrit. Par exemple dans ta première div ton box-shadow ne fonctionne pas à cause d'un double espace.

    J'ai aussi vu que tu fais des erreurs avec les polices. Tu appelles des polices que les utilisateurs n'ont pas forcément sur leur poste. Chez toi le rendu fonctionnera parfaitement parce que tu as les polices installées sur ton ordinateur, mais cela ne fonctionnera pas pour tout le monde. Tu dois toujours demander à ton code "d'importer" tes polices au tout début. Si tu veux comprendre, je te conseille de suivre ce tuto sur les typo venant de Google font et celui sur les autres polices (Dafont par exemple).



    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Dim 29 Mar 2020 - 18:30

    merci pour ses éclaircissement je vais voir ça ^^

    j'ai ajuster avec les éléments donner pour l'image de fond et les petites erreurs trouver. Je vais voir le tuto pour les écritures ^^

    du coup faudrait que je mettes le css de la police en question pour aller avec la fiche si j'ai bien compris ?
    Shaneliae
    Shaneliae
    FémininAge : 27Messages : 313

    Mar 31 Mar 2020 - 18:49

    C'est cela !

    Par exemple pour la police Cinzel Decorative que tu utilises pour le titre, tu dois avoir au début de ton code quelque chose qui ressemble à ça :
    Code:
    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet">

    Si tu ne le mets pas, tu as un risque que ceux n'ayant pas la police installée ne le voit pas. Heureusement moi je l'ai installé, je n'avais donc pas vu ton erreur au début.
    D'ailleurs, Arial et Helvetica ne sont pas des polices à utiliser sur le web. Elles sont spécifiques à certains modèles d'ordinateur et sont plus utilisées en imprimerie. Arial est majoritairement utilisée sur Windows et Helvetica sur Mac. Même s'il est possible d'avoir l'une ou l'autre installée sur sa machine, il n'est pas impossible que l'un ou l'autre manque. Tu as plusieurs solutions : tu choisis une police Google Fonts proche (comme Open Sans), tu utilises la méthode de ce deuxième tuto que je t'ai donné juste avant, ou alors tu ajoutes juste une petite chose dans ton code.

    Pour ces polices tu peux écrire :
    Code:
    font-family: "Arial", sans-serif;
    ou
    Code:
    font-family: "Helvetica", sans-serif;
    Le fait d'ajouter à la fin de la font-family sans-serif, serif, monospace ou cursive permet de dire "si la personne n'a cette police installée, prend la première de cette famille. Sans-serif représente les polices "bâtons" ou linéales comme Arial ou serif pour les polices comme Times. Si tu veux en savoir un peu plus, je te conseille MDN Web Docs de Mozilla (en français).

    Est-ce que mes explications sont assez claires ? 😄



    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Mer 1 Avr 2020 - 10:05

    C'est tout compris merci pour ses informations je vais pouvoir me faire des petites fiches de rappel pour mes futurs code. J'ai tout modifier ce que tu m'as demander je pense que c'est bon. Un grand merci à toi ^^
    Shaneliae
    Shaneliae
    FémininAge : 27Messages : 313

    Mer 1 Avr 2020 - 14:20

    Bon il reste 3 mini-trucs et on sera bon.
    • Le "link" de Google Fonts doit être au tout début du code avant même l'ouverture de ta première "div". Même si cela fonctionne, cela évite les possibles problèmes.

    • Il y a encore une balise "center" à la fin de ton code pour les crédits. Comme dit plus haut, il ne faut plus du tout utiliser cette balise. Il faut remplacer par :
      Code:
      <p style="text-align: center;">Ton texte</p>

    • Enfin, plus haut je t'ai dit qu'il ne faut PAS utiliser la balise b pour une grande quantité de texte, ici ton le corps de ton RP est entouré d'une balise "b" et c'est le parfait mauvais exemple de son utilisation. Si tu veux mettre toute cette partie en gras, il te suffit d'ajouter dans le style de la div juste avant :
      Code:
      font-weight: bold;


    Corrige ces derniers points et je valide ton LS 😄



    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Mer 1 Avr 2020 - 16:05

    voilà je crois avoir tous corriger cette fois ^^
    Shaneliae
    Shaneliae
    FémininAge : 27Messages : 313

    Jeu 2 Avr 2020 - 16:12

    Le code est bon, je déplace 👌



    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Jeu 2 Avr 2020 - 16:17


    Merci pour ses précieuses corrections pour finaliser ma fiche ^^
    Anonymous
    Invité

    Jeu 2 Avr 2020 - 21:30

    Très joli ! Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 5:27