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.


    Partie 1 - Etape 1 : TP - création d'une entête de RP simple

    Partagez
    Ehawee
    FémininAge : 24Messages : 4513

    le Sam 1 Mar 2014 - 21:08

    Rappel du premier message :

    TP - création d'une entête de RP simple.



    Vous voici au premier TP du cursus codage, c'est donc que vous avez brillamment (j'insiste) survécu à la première étape. Vous pourriez vous demander "ouais, c'est bien beau tous ces "span", là, mais bon... concrètement, je ne vois pas trop ce que je peux faire UNIQUEMENT avec ces "span", parce que les fiches que je vois sur Never Utopia ou ailleurs, bah, y'a pas que du "span", y'a même l'air d'avoir beaucoup de balises "div". Eh bien voyons donc ce qu'on peut faire avec cette étape de cursus....

    Commençons par le commencement "que faire?" Eh bien comme le titre nous l'indique nous allons faire quelques variations sur une entête de RP. Plutôt que de vous proposer une seule entête de RP, je vais plutôt vous proposer des structures que vous serez en mesure de customiser vous-même une fois que vous aurez saisi le principe.

    sommaire:

    C'est parti donc pour la première!

    Simple entête "titre du rp"



    Nous allons apprendre à faire ceci :
    Votre magnifique titre

    le texte, police, couleur et effets.


    Commençons peu, commençons bien, commençons par le début, à savoir les balises et le texte. C'est un titre, il est donc normal de le vouloir centré, et mis en forme, après tout, c'est bien pour cela que vous consultez le site, pas vrai? Du coup, on va commencer par encadrer un texte de "center" de façon à centrer le texte, et de "span" qui nous permettra une mise en forme.

    Votre magnifique titre

    Code:
    <center><span style="">Votre magnifique titre</span></center>

    Cela étant posé, que nous reste-t-il à faire? eh bien remplir l'emplacement du style, bien entendu! Commençons par le commencement, police et couleur, afin de donner un peu de cachet à tout ceci. Quand aux couleurs, on ne conseillera jamais assez le site code couleur ou bien la bonne vieille technique qui consiste à faire une capture d'écran de votre fenêtre internet, et d'aller chercher une couleur avec la pipette sur votre avatar, sur la bannière du forum pour harmoniser au maximum votre texte. Tiens, décidons arbitrairement d'une couleur et d'une police pour notre texte...

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; ">Votre magnifique titre</span></center>

    Mais quelle police puis-je utiliser?
    C'es une bonne question, quelle police utiliser pour ce "font-family", si vous vous hasardez à utiliser une jellyka castle queen par exemple, trouvable sur dafont, vous vous rendrez vite compte que... ça marche pas! Pourquoi? Tout simplement parce que, même si elles sont installées sur votre ordinateur, elles ne font pas partie des polices de base des autres ordinateurs. C'est un peu comme lorsque vous filez un ficher word écrit dans une police téléchargée sur le net à quelqu'un qui n'a pas cette police sur son ordinateur : la police est automatiquement remplacée par une autre, gérée cette fois par l'ordinateur. Alors comment faire pour avoir un titre un peu évolué, me demanderez-vous, quelles polices marchent?

    Les polices sont classées par familles. il y a les sans-serif les polices normal sans évasement, arial, helvetica, verdana, en sont les exemples les plus connus. Il y a ensuite les serifs polices standard toujours, avec évasement cette fois-ci. Citons les times new roman, palatino, et autre bookman. Bon, et c'est tout? Bien sur que non, il y a aussi les polices monospace où chaque caractère a la même largeur. L'exemple le plus frappant est sans doute courrier, ou courrier new. Quoi d'autre? Les polices cursive qui donnent l'impression d'une écriture manuscrite, le honni comic sans ms, florence, coronetscript ou même mistral, monotype corsiva et vivaldi en font partie. Et enfin les polices fantasy comme le impact, ou oldtown.

    Notez que les titres des catégories "sans-serif", "serif", "monospace", "cursive" et "fantasy" peuvent être utilisés comme police, précisément, si vous utilisez ces familles, elles afficheront la police par défaut de chaque catégorie, par exemple le courrier pour les "monospace".


    Voici donc que nous sommes OK pour la couleur et pour la police, mais on ne va pas laisser ça comme ça, pas vrai? Nous allons donc augmenter la taille de la police au moyen d'un "font-size" et d'une taille en pixels.

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px">Votre magnifique titre</span></center>

    ça, c'est fait, mais c'est toujours un peu simple, non? tiens, et si on faisait une petite ombre sur le texte?

    Réaliser une ombre sur un texte nécessite la propriété "text-shadow" qui signifie littéralement "ombre du texte", et qui se présente de la façon qui suit "text-shadow: décalageXpx décalageYpx Rayonpx #couleur" le décalage X définit le décalage horizontal de l'ombre mettez un nombre POSITIF pour un décalage vers la droite, et un nombre négatif pour un décalage vers la gauche. Le décalage Y définit ledécalage vertical de l'ombre, mettez un nombre positif pour un décalage vers le bas, et un nombre négatif pour un décalage vers le haut. Le rayon définit le degré de "flou" de l'ombre, 0 pixels pour une ombre nette, et un nombre supérieur pour une ombre floutée. La couleur... ma foi, c'est la couleur, je ne vais pas répéter le cursus sur ce point.

    Quelques exemples tout de même... j'utilise deux couleurs, un bleu #4B35CA, et du gris #808080.

    color: #4B35CA; text-shadow: 0px 0px 0px #808080

    color: #4B35CA; text-shadow: 1px 1px 0px #4B35CA

    color: #4B35CA; text-shadow: 0px 0px 2px #4B35CA

    color: #4B35CA; text-shadow: 100px 0px 0px #808080

    color: #4B35CA; text-shadow: -100px 0px 0px #808080


    Ainsi qu'on le remarque, tout est possible (comme toujours en codage) attention cependant à la lisibilité!

    Revenons-en donc à notre texte, et à la petite cuisine qu'on lui réserve...

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;">Votre magnifique titre</span></center>

    Tout cela est bien beau, mais peut-être voudriez-vous quelque chose d'un peu plus classouille? Tiens, et si on mettait la première lettre du titre dans un bleu-vert plus foncé? Comment faire? Bon, je vous laisse chercher, et je ne vous répond pas... comment? vous voulez savoir? Vous êtes surs? Vous voulez que je vous gâche la surprise de la découverte? Bon, allez, mais c'est bien parce que c'est vous! Nous allons tout simplement mettre un "span" dans le "span"... illustration!

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;"><span style="color: #338E75">V</span>otre magnifique titre</span></center>

    ainsi que vous le voyez, je n'ai modifié dans le deuxième "span" que la propriété de la couleur. Pourquoi? Tout simplement parce que la taille et l'ombre portée sont gérées par la première "span" et s'applique par défaut à son contenu. Inutile de tout modifier... Et tiens, pour la peine, je vais faire d'autres modifications sur cette initiale... Si je changeais la police et la taille aussi?


    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;"><span style="color: #338E75; font-family: monotype corsiva; font-size: 50px; font-style: italic">V</span>otre magnifique titre</span></center>

    Notez que la propriété "font-style" permet d'appliquer divers effets, notamment le "italic", c'est toujours bon à savoir!


    Soulignement du titre


    Et pour souligner l'effet dramatique de notre titre (sisi, l'effet dramatique, on y croit... vous là, au deuxième rang, je vois bien que vous n'y croyez pas!) on va... souligner notre titre! Le cap'taine vous a expliqué la méthode, appliquer une border-bottom pour faire l'effet de soulignement et un padding-bottom pour que le soulignement soit bien au dessous du texte, et non à cheval, c'est parti!
    HEP! attendez avant de vous précipiter, sur quel span allez vous appliquer cet effet? Sur le premier bien sur! sinon il n'y aurait que la première lettre qui serait soulignée! C'est bien, vous avez bien répondu, vous pouvez vous lancer!

    Votre magnifique titre

    Code:
    <center><span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;border-bottom: 1px dotted #338E75; padding-bottom: 1px"><span style="color: #338E75; font-family: monotype corsiva; font-size: 50px; font-style: italic">V</span>otre magnifique titre</span></center>

    Moui, vous ne semblez pas convaincu... Comment? ce serait bien que le soulignement fasse toute la longueur de la page plutôt que cette seule ligne, et qu'il passe sous le texte? Aucun problème, regardez:

    Votre magnifique titre
    Code:
    <span style="font-family: impact; color: #58A9A4; font-size: 30px; text-shadow: 1px 1px 0px #89D5E8;border-bottom: 1px dotted #338E75; padding-bottom: -6px; display: block; text-align: center; "><span style="color: #338E75; font-family: monotype corsiva; font-size: 50px; font-style: italic">V</span>otre magnifique titre</span>

    Comment ai-je réussi ce tour de passe-passe, me demanderez-vous. Commençons par le plus simple à comprendre, le "padding-bottom" auquel j'ai mis une valeur négative pour faire "remonter" la bordure vers le texte.

    Non mais ça on avait compris, la vraie question, c'est comment as-tu fait pour que toute la largeur de page soit prise en compte? La réponse est simple, j'ai utilisé ce display: block. Cette magie du codage (sisi, on a dit magie) est rendue possible grâce à une catégorisation des balises. le "span" que l'on utilise traite les données par lignes, c'est à dire que si on met des span de différentes couleurs les uns à côté des autres, ils se suivront, tenez, voici un exemple de succession de "span" en somme on peut dire que les balises "span" s'utilisent comme des balises de bbcode, vous les glissez dans votre texte, paf, ça fait la mise en forme, la largeur de votre "balise" s'adapte donc automatiquement au contenu. MAIS si je vous dit que ces balises traitent les données en ligne c'est qu'il en existe des qui traitent les données en bloc...
    Ce qui veut dire qu'à chaque nouvelle balise
    Vous revenez automatiquement à la ligne
    Parce que les informations sont traitées en bloc qui se positionnent les uns en dessous des autres!

    Cependant, la propriété "display" permet de modifier cela. ainsi "display: inline" vous permet de transformer une balise de type "bloc" en type "ligne", alors qu'à l'inverse, le "display: block" vous permet de transformer une balise de type "ligne" (comme le span) en balise de type bloc... Et comme notre balise est devenue un bloc, eh bien elle fait toute la largeur de page, et comme elle fait toute la largeur de page, eh bien la "border-bottom" fait AUSSI toute la largeur de page, ce qui explique qu'on ait cet effet!


    En bref? display: block vous permet de faire une bordure de la largeur de votre page/zone de texte pour votre titre! (ouais, tout ça pour ça)


    Vous noterez dans le code précédent également que j'ai, à volonté, supprimé les balises "center" pour les remplacer par une propriété du premier span à savoir le "text-align: center". Cela est du au fait que le display que l'on a appliqué a transformé la balise span en bloc. Du coup, il n'y a plus besoin d'utiliser une balise extérieure pour centrer le bloc, il suffit d'utiliser une propriété pour centrer son contenu. Et afin d'être certaine que vous avez bien compris la subtilité...

    contenu

    Code:
    <center><span style="color: black; background-color: grey; font-weight: bold;">contenu</span></center>
    Le "center" centre la balise, et non son contenu, c'est donc l'ensemble de la balise span qui s'en retrouve modifiée.

    contenu
    Code:
    <span style="color: black; background-color: grey; font-weight: bold; display: block; text-align: center">contenu</span>
    ici, il n'y a que le contenu qui se retrouve modifié. le display: block permettant de transformer la balise ligne en balise bloc.

    Et voici donc qui clôt cette première partie. Vous êtes toujours motivés? Très bien, passons à la suite!

    Entête en titre + citation



    Et nous voici repartis dans le monde merveilleux des entêtes de RP, comme vous avez beaucoup révisés dans l'exercice ci-avant, nous allons désormais passer un peu plus rapidement sur la technique (les codes) et parler un peu plus d'esthétique, de couleurs, d'harmonies, bref, de trucs beaux! Et pour parler de trucs beaux, nous allons agencer un titre et un sous-titre. Si, comme ça, paf, à blanc, direct. Nous allons faire... ceci :

    Ceci est un titre
    et même pas peur, j'mets un sous-titre!


    le titre


    Nous voici donc partis pour de nouvelles aventures codesques, nous voulons faire un titre ET un sous-titre, pour cela, nous allons commencer par le commencement, à savoir le titre. Comme précédemment, nous allons commencer doucement la mise en forme par la couleur, la police et la taille...

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 40px">Ceci est un titre</span></center>

    Bon, ça prend forme, mais c'est pas encore tout à fait ça... Personnellement, je trouve que de l'italic, ça serait plus classe, et puis les lettres sont assez espacées, et puis un petit gras, ça ferait bien aussi... Alors? on teste?

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 40px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 0px #A86D53">Ceci est un titre</span></center>

    On a déjà vu le text-shadow je ne reviens donc pas dessus. Le font-weight correspond à l'épaisseur de la police, allant du très fin au très gras. Le font-style vous permet de faire l'italic bien que les balises
    Code:
    <i></i>
    vous le permettent également. Ces dernières s'emploient comme les balises correspondantes en BBcode.


    Ceci étant posé, nous pouvons donc passer à la suite. Comme vous aimez bien faire des initiales, vous allez à nouveau en mettre une. Alors? Heureux?

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 40px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B">C</span>eci est un titre</span></center>

    Bon, là, vous me dites "mouais, l'inversion des couleurs entre le texte et l'ombre, c'est pas mal, mais par contre, l'italic, c'est pas top sur l'initiale, et surtout, elle est trop petite par rapport au titre... Allez, zou, je vais vous expliquer comment contrer l'italique sur l'initiale!

    Ceci est un titre

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span></center></textarea>

    Eeeeh oui, il suffisait de supprimer le font-style: italic du premier span pour mettre des balises italique autour du reste du texte, ne prenant donc pas en compte le "C" que nous voulions exclure de l'italique.

    Passons à la suite, maintenant que nous avons cela, un sous titre!

    Le sous-titre!

    Vous l'attendiez, hein? (dites-moi "oui", ça me fera plaisir xD) Eh bien le voici, ce sous-titre. Nous allons donc l'ajouter à la suite, tout simplement, faire une nouvelle balise "span" juste avant la balise "center", Et là, c'est le drame!

    Ceci est un titreet même pas peur, j'mets un sous-titre!

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span><span style="">et même pas peur, j'mets un sous-titre!</span></center>

    Eeeeh oui, le "span" est une balise de type "ligne", il est donc normal que les deux textes se mettent à la suite. Comment faire pour faire un retour à la ligne? (non, pas la peine d'utiliser le retour à la ligne de votre clavier, ça sera pris en compte par un forum, mais pas par un site internet, alors autant apprendre directement à coder proprement, non? OUI! là, le p'tit gars au troisième rang a la réponse, on va utiliser une balise de retour à la ligne!

    Ceci est un titre
    et même pas peur, j'mets un sous-titre!

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span><br /><span style="">et même pas peur, j'mets un sous-titre!</span></center>

    Il suffit simplement d'intercaler une balise
    Code:
    <br />
    entre la clôture du "span" de titre, et l'ouverture de celui du sous-titre. Facile non?

    Eh bien, qu'attendons-nous? Une petite mise en forme s'impose pour le sous-titre. Gardons en tête qu'il vaut mieux qu'il soit discret, pas trop surchargé, et assorti au titre. Le tout est qu'il ne lui fasse pas d'ombre.

    Ceci est un titre
    et même pas peur, j'mets un sous-titre!

    Code:
    <center><span style="color: #773B3B; font-family: arial narrow; font-size: 30px; font-weight: bold;  text-shadow: 1px 1px 0px #A86D53"><span style="color: #A86D53; font-family: mistral; text-shadow: 1px 1px 0px #773B3B; font-size: 50px;">C</span><i>eci est un titre</i></span><br /><span style="color: grey; font-variant: small-caps; font-size: 10px; ">et même pas peur, j'mets un sous-titre!</span></center>

    Et... voici. Quoi? Vous vous attendiez à autre chose?

    Bah ouais, moi j'aimerai bien mettre des icônes pour les différents protagonistes, et puis des liens, et puis une mise en forme spéciale, et puis...
    tut, tut tut! une chose à la fois, petit panda!

    Entête avec sous-titre et images



    Nous voici à la dernière partie de ce TP (oui, déjà!) Il se fera lien entre la première et la seconde partie du cursus, un peu d'attention, donc. Nous allons réaliser ce qui suit :

     
    Titreun petit sous-titre?

    Les images


    Commençons directement par choisir deux icônes de taille 100*100 pixels. J'ai créé la mise en forme à partir de la même image, une texture de cette taille là, cependant, vous pouvez bien sur prendre n'importe quelle icône de votre choix. Nous allons donc les utiliser comme base de création. Pour cela, il suffit simplement d'utiliser la balise d'image:

     

    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center>

    On remarquera que j'ai appliqué trois espaces entre les deux images pour éviter qu'elles ne soient trop collées l'une avec l'autre. C'est un peu barbare, et une fois la prochaine leçon du cursus, vous ne ferez plus cela, mais en attendant, soyons barbare! La balise "center" permet de centrer tout ça joliment, en somme rien de très complexe sur cette partie là! Passons à la suite!

    Le titre



    A présent nous allons mettre en forme le titre. On va commencer par créer un nouveau span.

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="">Titre</span>

    Et le mettre en forme, police de caractère, couleur, taille, ombre sur le texte...

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036;">Titre</span>

    Je ne reviens pas sur le détail de la mise en forme, c'est une étape qui vous est connue si vous avez lu et appliqué les deux mises en formes précédentes.

    De la même façon, on va faire une lettrine, et créer donc un "span" encadrant notre première lettre.

     
    Titre

    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036;"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Ceci étant posé, on va créer, comme dans notre première mise en forme, un soulignement en pointillés, et centrer notre titre. les "text-align: center" et "display: block" sont vos amis!

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Mais, ça ne suffit pas, n'est-ce pas? Moi je voudrais bien que mes pointillés ne fassent pas toute la largeur de page, qu'ils soient plus hauts, et que le texte aussi soit plus haut. On va donc apprendre quelques petites choses. Votre "span" est désormais un bloc grâce au "display: block" on peut donc lui assigner une largeur et une hauteur. En guise de largeur, je vais lui mettre un pourcentage qui s'adaptera à la largeur de page. Je vais donc lui mettre un "width: 50%". C'est une propriété qui définit la largeur d'un bloc, celle-ci sera donc de 50% de la largeur totale de son contenant, ici, la zone de texte du forum.

    On obtient ceci :

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Petit problème, le bloc "titre" est positionné n'importe comment, il faudrait qu'il soit centré, sous les images, et aussi, comme nous le disions plus haut, un peu plus haut aussi, pour qu'il "empiète" sur les images. Pas de problème, nous allons utiliser d'autres marges.

    Vous avez vu dans ce TP le padding, qui sont des marges à l'intérieur du bloc, voici le temps des margin, qui sont des marges à l'extérieur du bloc (elles ne s'appliquent donc QUE sur les balises de type bloc! Pas la peine de les essayer sur un simple "span" sans "display: block" ça ne marchera pas) .

    Ces "margin" on va donc les appliquer à notre "span" de titre qui est devenu un bloc grâce au "display: block". (oui, il faut faire du codage pour lire des phrases surréalistes comme celle là!)

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px"><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Tout comme pour le padding, on peut influer soit sur les quatre marges extérieures (en utilisant "margin") soit sur une seule d'entre elles (margin-top, margin-bottom, margin-left, margin-right). Ici on a utilisé "margin-right: auto" et "margin-left: auto" pour centrer le bloc, et "margin-top: -15px" pour remonter le bloc vers les images.

    Et pour remonter le trait en pointillés? Eh bien on fait comme dans l'entête simple, on utilise le padding!

     
    Titre
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span>

    Et voila qui clôt le gros morceau de notre entête de RP. Quoi faire à présent? Mais le sous-titre, bien sur ^^

    Le sous-titre



    Pas souci de lisibilité, restons simple en terme de police et d'effets. On va créer un nouveau "span" pour le sous-titre.

     
    Titreun petit sous-titre?
    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span><span style=" ">un petit sous-titre?</span>

    A ce sous-titre, on va ajouter une mise en forme, couleur, décoration du texte...

     
    Titreun petit sous-titre?

    Code:
    <center><img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" />   <img src="http://nsa31.casimages.com/img/2014/03/01/140301050318981582.jpg" /></center><span style="font-family: times new roman; font-size: 40px; font-weight: bolder; text-shadow: 0px 0px 1px #790036; color: #790036; display: block; text-align: center; border-bottom: 1px dotted #E73564; width: 50%; margin-right: auto; margin-left: auto; margin-top: -15px; padding-bottom: -25px; "><span style="color: #ED693A; text-shadow: 0px 0px 1px #ED693A; font-family: vivaldi; font-size: 50px">T</span>itre</span><span style="display: block; text-align: center; font-size: 11px; color: #E44573; font-family: times new roman; font-style: italic; ">un petit sous-titre?</span>

    le "display: block" couplé au "text-align: center" permet d'aligner le sous-titre avec le reste de l'entête, tandis que le reste des propriétés permet de mettre en forme le sous-titre de façon harmonieuse.

    Et voici qui clôt ce premier TP. J'espère m'être montrée suffisamment exhaustive et claire sans vous paumer en cours de route. N'hésitez pas à demander de l'aide si vous en ressentez le besoin, et à la revoyure, peut-être, au détour d'un autre TP ou d'une étape de cursus, qui sait! N'hésitez pas à vous entraîner, et à créer vos propres entêtes, c'est en forgeant qu'on devient forgeron!





    gif1gif2
    Nihil Scar Winspeare
    Messages : 3942

    le Mer 20 Avr 2016 - 1:26

    Wuw je vois tous les résultats, GG à vous tous *-*




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Encrine
    FémininAge : 18Messages : 42

    le Mer 20 Avr 2016 - 1:41

    J'avoue qu'il y en a de vraiment beaux !

    En tout cas, merci énormément, Ehawee, pour l'écriture de ce TP, vraiment bien expliqué et bien pratique pour faire de jolies entêtes ! >w<
    Renard
    MasculinAge : 23Messages : 15

    le Mar 7 Juin 2016 - 9:50

    Wala ma participation 8]. Je voulais rajouter une bande grise en-dessous du sous-titre mais au-dessus de l'image, mais je n'ai pas réussis, elle se retrouvais toujours sous l'image. Peut-être trouverais-je la réponse dans les prochains TP !



    Titre du RP
    Citation pour faire classe

    Linaewen
    FémininAge : 24Messages : 190

    le Lun 11 Juil 2016 - 6:22

    Merci pour ce TP :) J'ai enfin réussie à coder quelque chose qui fonctionne XD Voici pour moi :

      Linaëwenteam des animaux mignons
     
    Nippon Syndrom
    FémininAge : 23Messages : 38

    le Mer 19 Oct 2016 - 18:59

    Merci beaucoup pour ce tuto :)
    Par contre, dans la partie 3, le padding-bottom ne fonctionne pas chez moi en négatif... Du coup j'ai rusé avec un line-height...
    Voilà mon résultat Very Happy (bon qui ne donne pas forcément terrible sur un fond foncé, mais passons :3) :

    Entête avec sous titreEt images



    Nihil Scar Winspeare
    Messages : 3942

    le Mer 19 Oct 2016 - 19:04

    Oups, il y a une coquille dans le cursus, le padding bottom ne fonctionne pas en négatif, cela prend seulement des valeurs positives, voilà pourquoi cela ne marchait pas :)




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NBK
    FémininAge : 27Messages : 11

    le Mer 30 Nov 2016 - 20:46

    Extra ce tuto !

    Merci beaucoup pour ce travail d'orfèvre ! Very Happy

    J'ai vraiment hâte de lire la suite du cursus !
    Et voilà ma petite composition Very Happy :

    ( 500 ) Days of SummerBoy meets girl. Boy falls in love. Girl doesn’t.


    Par contre j'ai essayé d'ajouter une bordure sur le code des images et je ne sais pas pourquoi ça ne marche pas ici alors que ça marchait sur mon forum ?
    Yza
    MasculinAge : 18Messages : 1

    le Sam 3 Déc 2016 - 10:07

    Bonjour, merci pour ce tutoriel fort instructif.
    J'ai un soucis, je débute dans le codage et j'ai un soucis...

    Code:
    <center><div style="width: 500px; height: 800px; border-right: 3px solid #F9FBFB; border-left: 3px solid #F9FBFB; background-color: #C6C8C8">

    <span style="font-family: times new roman; letter-spacing: -1px; font-style: italic; font-size: 32px; display: block; text-align: center; border-bottom: 2px dotted #000000; width: 75%; margin-right: auto; margin-left: auto; margin-top: 2px; padding-bottom: -15px">Test</span></div>

    Dans ce code, j'ai essayé de mettre le trait souligné sur le texte (en gros, j'ai essayé de le remonter afin que le trait soit sur le texte) mais bizarrement, le trait souligné ne monte et reste comme "bloquer" sous le texte, impossible de le mettre sur le texte...

    Pour résumer, je veux que mon trait soit comme ceci :
    Image voulue:
    Contenu sponsorisé

    Aujourd'hui à 11:42


      La date/heure actuelle est Sam 10 Déc 2016 - 11:42