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 9: TP – Création d'une mise en forme de RP

    Partagez
    A-Lice
    FémininAge : 22Message(s) : 4939

    le Jeu 14 Aoû 2014 - 18:09


    TP – création d'une mise en forme de RP



    Pour terminer sur cette partie 1 du cursus voici un nouveau TP. Ce dernier a pour objectif de vous permettre de vous débrouiller seul pour faire vos mises en forme de RP et que ces dernières soient jolies comme tout. Qui a pensé impossible ?

    Alors voici ce à quoi nous allons arriver :
    Spoiler:
    TITRE

    FEATURING
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.


    Le fond


    On va donc commencer par le fond, choisissez une largeur ainsi qu'une couleur.

    Et la hauteur elle passe à la trappe ?

    Oui et elle se noie même. Non je plaisante, définir une hauteur pose plus de contrainte à mon humble avis et n'apporte rien de "plus" dans ce genre de code. Elle serait utile dans une page d'accueil par exemple. Et puis avec une hauteur précise il ne faut pas oublier de mettre un overflow:auto. Alors personnellement je préfère que la hauteur de notre fiche s'adapte au contenu et non l'inverse.

    Donc une fois les deux premiers critères choisis on obtient ceci :



    Code:
    <div style="width:600px; background-color:grey;"></div>

    Euh rien ?

    Bah oui, je vous rappelle que la hauteur est passée à la trappe. Petite astuce toute conne, j'insère des sauts de ligne entre l'ouverture et la fermeture de la balise que je supprimerai plus tard. Donc cette fois ça nous donne ceci :






    Code:
    <div style="width:600px; background-color:grey;">


    </div>

    N'est-il pas magnifique notre fond ainsi ?

    Un peu trop à gauche si tu veux mon avis...

    Forcément qu'il est à gauche puisqu'il n'est pas centré. Mais tout le monde ne centre pas ses éléments. Même s'il est vrai que le décalage peut apporter un certain style et permettre de se démarquer je ne trouve pas ça approprié pour ce genre de fiche droite et carré. Pour centrer notre fond rien de plus facile donc, il suffit d'ajouter un margin:auto; dans la div.






    Code:
    <div style="margin:auto; width:600px; background-color:grey;">


    </div>

    Bien, maintenant que notre premier fond est bon, on va s'attaquer au 'deuxième" fond. Pour ce dernier, c'est plus simple, vous n'avez qu'une couleur à choisir. Et on obtient ça :






    Code:
    <div style="margin:auto; width:600px; background-color:grey;"><div style="background-color:RosyBrown;">


    </div></div>

    Bah voilà, je pensais bien qu'il fallait choisir une largeur ici aussi ! Pourquoi on ne l'a pas fait ?

    Très bonne question ! En fait, on pourrait très bien définir une largeur et appliquer à nouveau un margin:auto, mais je trouve que cette façon de faire est moins pratique et qu'elle est plus restrictive. Mais encore une fois c'est à titre personnel donc rien ne vous empêche de le faire.

    Donc, pour que le fond gris soit visible et que le fond rose soit plus petit je vais appliquer un padding au fond gris. En réalité ce n'est pas le rose qui va rapetisser mais le gris qui va s'agrandir. Mais qu'importe, le résultat sera tout de même très satisfaisant.






    Code:
    <div style="margin:auto; width:600px; background-color:grey; padding:10px;"><div style="background-color:RosyBrown;">


    </div></div>

    Pour ma part j'ai appliqué un padding de 10 pixels.

    Je viens d'y penser, mais pourquoi on a pas fait de bordure plutôt que d'avoir deux fonds ?

    Haha ! Il y a une raison particulière pour justifier ce choix. Pour l'instant on ne travaille qu'avec des couleurs, mais si vous voulez utiliser des images, ce n'est pas sur un bord que se sera possible.

    Pour les fonds nous avons fini.

    Le titre


    Maintenant on va s'attaquer au titre.

    Si vous n'êtes pas à votre premier TP alors il n'y a rien de plus simple pour vous qu'un titre. On applique une couleur, une taille, une police éventuellement (ce site vous donne la démarche à suivre pour intégrer des polices), un alignement etc.

    Quelque chose comme ça donc :

    TITRE

    Code:
    <span style="display:block; font-size:30px; color:red; text-align:center;">TITRE</span>

    (Mon titre est blanc à la base, je modifierai ça à la fin.)
    À ce titre j'aimerais ajouter une séparation en pointillée. Parce que c'est cowl et que c'est plus lisible de cette manière. Imaginez que vous avez un titre de trois kilomètres de long. Pour la séparation en pointillée on va utiliser la propriété "border" et on va également définir une largeur pour que notre bordure soit prise en compte. Le tout sera bien évidemment centré. On ajoute donc ces propriétés dans le span du titre.

    TITRE

    Code:
    <span style="display:block; width:450px; font-size:30px; color:red; border-bottom:dashed 2px red; text-align:center; margin:auto;">TITRE</span>

    C'est moche collé...

    Tout à fait. C'est pour cette raison qu'il faut ajouté un padding !

    TITRE

    Code:
    <span style="display:block; width:450px; font-size:30px; color:red; border-bottom:dashed 2px red; text-align:center; margin:auto; padding:10px;">TITRE</span>

    Notre titre est donc parfait ainsi.

    Les images


    Passons aux images ensuite.

    La première chose qu'il faut faire c'est de savoir combien d'images vous voulez mettre. Parce que toutes les valeurs choisies dépendront de ce choix-ci. Ici, nous en prendrons trois, histoire d'être raccord.

    Alors, tout d'abord on va utiliser la balise span, histoire de ne pas mettre de div dans les spans mais ça c'est juste une petite crise de FA. Donc, on va définir une hauteur et une largeur, cohérentes avec ce que nous avons déjà fait ! N'allez donc pas me sortir une largeur d'image de 300px.

    Ça nous donne ceci :

    Code:
    <span style="width:150px; height:150px;"></span>

    À notre contenant, nous allons ajouter un bord. Nous allons également en faire un cercle.

    T'as fumé meuf ? Comment veux-tu qu'on fasse un truc comme ça nous les débutants ?

    Avec l'aide de border-radius bien sur. Pour obtenir un magnifique cercle, le mieux c'est de lui appliquer 100 pixels.

    Cette fois ça ressemble à quelque chose de concret.



    Code:
    <span style="border-radius: 100px; width:150px; height:150px; border:dashed 2px black;"></span>

    Il est où ton concret ? Moi j'vois rien.

    Il suffit de transformer le span en bloc pour voir quelque chose.

    De cette manière :



    Code:
    <span style="display:block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black;"></span>

    Maintenant il ne reste plus qu'à mettre l'image et ce sera parfait ! Mais pour simplifier grandement le code, on va mettre l'image en fond du cercle. Ainsi, on aura pas de problème d'image qui dépasse du cercle etc.



    Code:
    <span style="display:block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span>

    Dernière étape concernant nos images, dupliquer le code pour pouvoir en mettre trois. Bien sur dupliquer en changeant les images pour le deuxième et troisième span.
    Cette fois nous obtenons ceci :



    Code:
    <span style="display:block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span><span style="display:block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/772694Chatbleu.png);"></span><span style="display:block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/981298greenlantern.png);"></span>

    J'comprends pas... J'ai fait tout ce que tu as dit pourtant... Et je n'obtiens pas ce que tu nous as montré en aperçu...

    Pas de panique, c'est normal. C'est pour montrer l'utilité du display:inline-block. Ce dernier conjugue les propriétés du span et de la div, ce qui est franchement pratique dans notre situation ! Pour aligner des éléments sur la même ligne, que ce soient des images où non, le display:inline-block est une bonne méthode.



    Code:
    <span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/772694Chatbleu.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; background-image:url(http://img15.hostingpics.net/pics/981298greenlantern.png);"></span>

    On a toujours un problème, cette fois les images sont bien en ligne, mais elles sont toujours collées les unes aux autres. Une idée pour pallier à ce soucis ? Il faut appliquer un margin. Cependant, il ne faut pas donner n'importe quelle taille à votre margin, sinon la dernière image passera à la ligne suivante puisque la somme de toutes les largeurs sera supérieur à celle de notre fond. Hé oui parfois il faut faire un peu de maths. Donc ici la "bonne" taille pour le margin est de 10 pixels. Et on obtient enfin le résultat voulu !



    Code:
    <span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/772694Chatbleu.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/981298greenlantern.png);"></span>

    Avec ça les images, c'est fini !

    La citation/le featuring


    On s'attaque à la petite phrase sous les images. Et comme elle a quasiment la même structure que le titre on va reprendre le code de ce dernier.

    Code:
    <span style="display:block; width:450px; font-size:30px; color:red; border-bottom:dashed 2px red; text-align:center; margin:auto; padding:10px;">TITRE</span>

    Donc, en toute logique cette phrase que nous avons est discrète et passe-partout (combien avons-nous de cléfs ?). Elle doit donc avoir une taille sensiblement plus petite et pourquoi ne pas l'aligner à droite ?

    FEATURING

    Code:
    <span style="display:block; width:450px; font-size:10px; color:red; border-bottom:dashed 2px red; text-align:right; margin:auto; padding:10px;">FEATURING</span>

    En théorie c'est tout, on a fini. Néanmoins, l'espace entre cette phrase et les poitillés me dérange u_u Je suis perfectionniste je n'y peux rien x) Pour l'enlever il suffit de retirer le padding du code.

    FEATURING

    Code:
    <span style="display:block; width:450px; font-size:10px; color:red; border-bottom:dashed 2px red; text-align:right; margin:auto;">FEATURING</span>

    Okay, mais cette fois, vous ne le voyez peut-être pas car vous n'avez pas le code du titre et celui de la phrase à la suite, mais la largeur des pointillés sous la phrase est devenue plus petite. C'est l'effet du padding qui aggrandit le code comme pour le fond, vous vous souvenez ? Pour régler ce léger détail, il nous faut juste ajouter deux fois la valeur du padding à notre largeur. Et on obtient ceci :

    FEATURING

    Code:
    <span style="display:block; width:470px; font-size:10px; color:red; border-bottom:dashed 2px red; text-align:right; margin:auto;">FEATURING</span>

    Le texte


    Il ne nous reste plus que le texte avant l'assemblage !

    Pour le texte, je dirais, que c'est le plus simple. On prend un span, on lui dit de se tranformer en bloc pour pouvoir justifier le texte, on lui donne une couleur d'écriture, une largeur, on le centre (le span et non pas le texte) et enfin on ajoute un padding. Comme une recette de cuisine, il faut juste bien doser Wink Encore une fois j'ai choisi une couleur pas très visible sur le blanc donc j'vais la modifier.

    Un texte

    Code:
    <span style="display:block; text-align:justify; color:blue; padding:10px; width:500px; margin:auto;">Un texte</span>

    Bon, ça ne nous aide pas à voir grand chose de mettre "un texte". On va donc mettre un lorem ipsum pour remplacer le futur texte qui sera présent. Cette fois ça ressemble plus à quelque chose !

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.


    Code:
    <span style="display:block; text-align:justify; color:blue; padding:10px; width:500px; margin:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.
    </span>

    On pourrait s'arrêter là. Mais comme c'est un code de contenu RP, il faut bien envisager de faire parler les différents interlocuteurs. On va donc ajouter un petit code pour différencier les paroles du personnage qui parle. On prend donc un autre span, on lui donne une autre couleur, pourquoi ne pas le mettre en gras et/ou italique, et transformer le span en bloc en ligne (inline-block) pour pouvoir appliquer un décalage à la première ligne.

    Oula temps mort tu vas trop vite j'comprends rien.

    Et bien, en fait ce que j'appelle décalage à la première ligne c'est la propriété "text-indent:XX px;" cette dernière peut être utilisée dans un span si ce dernier est transformé en bloc. Seulement ça ajoute un saut de ligne si on transforme en bloc, pour ça que je préfère mettre un "inline-block" à la place. Mais encore une fois c'est un choix personnel et puis, il y a bien d'autres façons de faire des contenus RP. Il suffit de jeter un coup d'œil aux LS pour s'en apercevoir (:

    Donc ça nous donne quelque chose comme ça :

    Un texte

    Code:
    <span style="display:inline-block; color:Brown; font-style:italic; text-indent:25px;">Un texte</span>

    Maintenant il suffit d'encadrer une partie du lorem ipsum utilisé, pourquoi pas tout le 2° paragraphe ?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.


    Code:
    <span style="display:block; text-align:justify; color:blue; padding:10px; width:500px; margin:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    <span style="display:inline-block; color:Brown; font-style:italic; text-indent:25px;">Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.
    </span>

    L'assemblage


    On passe enfin à la dernière étape ! Pour celà il suffit juste de mettre tous les codes faits jusqu'à présent les uns à la suite des autres. Ou pas tout à fait Wink

    Donc, en premier en place les deux fonds :
    Code:
    <div style="margin:auto; width:600px; background-color:grey; padding:10px;"><div style="background-color:RosyBrown; text-align:center;">


    </div></div>

    Ensuite, à l'intérieur de ces balises, on pose le titre.
    Code:
    <div style="margin:auto; width:600px; background-color:grey; padding:10px;"><div style="background-color:RosyBrown; text-align:center;"><span style="display:block; width:450px; font-size:30px; color:white; border-bottom:dashed 2px white; text-align:center; margin:auto; padding:10px;">TITRE</span>


    </div></div>

    Puis, les images.
    Code:
    <div style="margin:auto; width:600px; background-color:grey; padding:10px;"><div style="background-color:RosyBrown; text-align:center;"><span style="display:block; width:450px; font-size:30px; color:white; border-bottom:dashed 2px white; text-align:center; margin:auto; padding:10px;">TITRE</span>
    <span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/772694Chatbleu.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/981298greenlantern.png);"></span>


    </div></div>

    La phrase "discrète".
    Code:
    <div style="margin:auto; width:600px; background-color:grey; padding:10px;"><div style="background-color:RosyBrown; text-align:center;"><span style="display:block; width:450px; font-size:30px; color:white; border-bottom:dashed 2px white; text-align:center; margin:auto; padding:10px;">TITRE</span>
    <span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/772694Chatbleu.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/981298greenlantern.png);"></span>
    <span style="display:block; width:470px; font-size:10px; color:white; border-bottom:dashed 2px white; text-align:right; margin:auto;">FEATURING</span>


    </div></div>

    Et enfin le texte.
    Code:
    <div style="margin:auto; width:600px; background-color:grey; padding:10px;"><div style="background-color:RosyBrown; text-align:center;"><span style="display:block; width:450px; font-size:30px; color:white; border-bottom:dashed 2px white; text-align:center; margin:auto; padding:10px;">TITRE</span>
    <span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/154793Cupcakesrose.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/772694Chatbleu.png);"></span><span style="display:inline-block; border-radius: 100px; width:150px; height:150px; border:dashed 2px black; margin:10px; background-image:url(http://img15.hostingpics.net/pics/981298greenlantern.png);"></span>
    <span style="display:block; width:470px; font-size:10px; color:white; border-bottom:dashed 2px white; text-align:right; margin:auto;">FEATURING</span>
    <span style="display:block; text-align:justify; color:MistyRose; padding:10px; width:500px; margin:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    <span style="display:inline-block; color:Brown; font-style:italic; text-indent:25px;">Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.
    </span></div></div>

    On obtient finalement notre contenu RP.

    TITRE

    FEATURING
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.


    Ce TP est donc terminé. Néanmoins, n'hésitez pas à faire vos propres essais et si le besoin d'un avis se fait sentir, vous pouvez tout à fait poster vos rendus ici ! Je reste disponible pour toutes questions éventuelles ou un point qui ne serait pas suffisamment clair pour vous.

    Okhmhaka
    MasculinAge : 31Message(s) : 31700

    le Mer 10 Sep 2014 - 12:36

    Le TP est nickel A-lice, je te remercie ! Je ne vois pas quoi ajouter, alors je le déplace dans le Cursus^^



    Merwyn Arehdel
    FémininAge : 17Message(s) : 298

    le Mer 22 Oct 2014 - 17:11

    Anh merci pour les images rondes je cherchais comment faire ! *-*



    Just want to be yours.
    Kuroo
    FémininAge : 19Message(s) : 44

    le Sam 28 Mar 2015 - 19:13

    Merci pour ce tutoriel très complet, donc j'ai essayé de faire ma propre mise en forme et je suis assez satisfaite du résultat mais j'ai beau chercher je ne trouve pas comment centrer mes images...
    Mise en forme Rp:

    TitrePARTICIPANT ♥Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.
    Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
    - Dialogue
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.
    Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.


    Okhmhaka
    MasculinAge : 31Message(s) : 31700

    le Dim 29 Mar 2015 - 0:18

    Salut !
    Tu as mis tes trois images en trois span différents, et pour les centrer tu peux par exemple les encadrer d'une "div" qui aurait pour "style" un "text-align: center;".



    Kuroo
    FémininAge : 19Message(s) : 44

    le Dim 29 Mar 2015 - 20:05

    Salut
    Merci pour ta réponse !
    Yukimura Esuki
    MasculinAge : 20Message(s) : 106

    le Sam 20 Juin 2015 - 20:43

    Je te remercie beaucoup pour ce petit tuto' ! Je viens de retenir un truc essentiel, c'est faire des codages des légos ! Je faisais tout d'une traite et je m'y perdais pas mal... Donc maintenant, je fais les pièces une par une et j'assemble ! o/

    Voici ce que j'ai fait ! J'essayerais d'en créer de nouveaux ! o/

    Spoiler:

    Votre Titre

    Citation

    Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.

    « Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus. »

    Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.


    A-Lice
    FémininAge : 22Message(s) : 4939

    le Sam 20 Juin 2015 - 21:18

    Haha x) Lego est un synonyme d'organisation Razz
    En tout cas très sympa comme rendu (:

    Renard
    MasculinAge : 23Message(s) : 15

    le Jeu 9 Juin 2016 - 18:09

    Ahah... je me sens mal de remonter à chaque fois un sujet de cursus mais bon, voilà ma fiche de rp o/

    Titre du rp feat chose truc
    Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?

    Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.

    « Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma. »

    Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.

    Code © Renard
    Nihil Scar Winspeare
    Message(s) : 3924

    le Jeu 9 Juin 2016 - 18:57

    Mais c'est super de remonter les sujets du cursus ♥︎
    Sympa ta petite fiche :p

    Faudra que quelqu'un repasse sur l'étape du cursus pour vérifier les codes, par ce qu'utiliser des span alors qu'on peut utiliser des div, c'est bizarre :hum:




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Contenu sponsorisé

    Aujourd'hui à 13:12


      La date/heure actuelle est Dim 4 Déc 2016 - 13:12