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:

Le fond

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


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>

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 ?


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>

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.


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>

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.


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 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>

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 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.


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

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.



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.

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

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

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:

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;".

Salut
Merci pour ta réponse !

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:

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

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

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

J'ai repris une partie du tp, merci mais je ne sais pas pourquoi ma div est en style Background-position Center center et pourtant mon image est en décalage :/

Code:

<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<div style="margin:auto; width:500px; background-color:#F0FFFF ;border:1px solid; color:black;">
<span style="display:block;font-family:'Arima Madurai', cursive; font-size:30px; color:black; text-align:center;"> titre du rp</span>
<span style="display:block;font-family:'Arima Madurai', cursive; font-size:12px; color:black; text-align:right;"> Feat.</span>
<div style="border:2px solid black;width:450px;height:220px;border-radius:100px 100px 100px 100px;background-image: url(http://24.media.tumblr.com/tumblr_m8s2lnYgRM1qfhivao2_500.gif); background-repeat: repeat-x;background-position: center center;"></div>
<span style="display:block; text-align:justify;font-family: Arial; font-size:12px; color:black; padding:10px; width:450px; 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>

[center]<a style="color: #111111 !important; font-size: 10px; font-family: 'Arima Madurai',  cursive; letter-spacing: 2px;" href="http://graphicseditions.tumblr.com/">© Graphicseditions</a>
[/center]
</div>