TP – Création d'un cadre de message de validation de personnage préétabli

Suite à l'étape 4 de la première partie de ce cursus, nous allons travailler sur un nouveau TP. Vous avez probablement tous déjà croisé ce genre de cadre, après tout l'étape 4 en est remplie ! Dans ce TP, nous allons nous mettre dans la peau d'un membre du staff d'un forum de même type que Harry Potter. Il est de coutume dans ce genre de forum de faire une belle fiche de présentation sur un personnage inventé ou non et de choisir dans quel groupe on souhaite être, ou alors c'est le staff qui choisit le groupe aléatoirement ou en fonction du caractère etc. Qui a pensé Choixpeau ? Nous allons donc matérialiser une forme de message de validation pour chaque groupe, dans notre cas il y en aura trois.

Le fond

On commencera par faire une base qui sera commune à nos trois cadres de messages. Disons que nous voulons un cadre pas très large qui soit centré. On veut également que notre cadre ait des bordures un peu épaisses et qui soient visibles autant sur Chrome que sur Firefox (on ne va pas ajouter les autres pour ne pas alourdir le TP mais il est conseillé de toujours prendre en compte tous les préfixes). Ensuite on ajoutera une couleur de fond et une marge intérieure.

Pour l'instant ça nous donne donc ceci :

Code:

<div style="width:450px; margin:auto; border-top:solid 3px; border-bottom:solid 3px;  border-left:dashed 3px; border-right:dashed 3px; background-color:; padding:10px;"></div>

Gardez ce code au chaud il va nous servir à plusieurs reprises. Je vous conseille d'en faire une copie sur laquelle on va travailler tout de suite.

On a donc notre code de base vierge. Nous allons le personnaliser pour le premier groupe avec des couleurs. Pour cela il suffit d'ajouter une couleur aux bordures et une autre pour le fond. Pourquoi pas dans les tons rouges ?

Code:

<div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;">
</div>

Pour ma part j'ai pris du rouge/rose. Jusque là tout est normal.

L'image

Nous allons accompagner notre cadre d'une image. Il ne faut pas qu'elle soit trop grande pour rentrer dans le cadre. On va dire que le format le plus grand sera 150*150.

Code:

<div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><img src="Lien de votre image" alt="groupe1" />
</div>

Pour l'instant ça nous donne ceci. Mais moi, j'ajouterais bien une bordure à notre image, aussi je voudrais être sûre qu'elle soit bien l'élément le plus à gauche possible et que je puisse mettre mon texte à côté de mon image.

Code:

<div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><div style="float:left; border:solid 2px deeppink; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/154793Cupcakesrose.png" alt="Groupe Cupcake" /></div>
</div>

En parlant du texte tien, on ne sait pas encore ce que l'on va mettre alors on va placer un lorem ipsum. On s'habitue vite à sa présence à celui-là ! Pour notre texte, il faut lui choisir une couleur, une taille, le justifier, le mettre en italique si vous le voulez. Et vu qu'on utilisera un span, il ne faut pas oublier de lui demander de passer de "en ligne" à un "bloc".

Code:

<div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><div style="float:left; border:solid 2px deeppink; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/154793Cupcakesrose.png" alt="Groupe Cupcake" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.</span></div>

On obtient donc ceci. C'est chouette tout ça !

La modification du code

Et bien maintenant on va faire la même chose pour le deuxième et troisième groupe.



Le codage ce n'est pas pour les feignants ;)Mais rassurez-vous, plus haut je vous ai demandé de garder notre modèle au chaud et de travailler sur une copie, et bien nous allons faire la même chose travailler sur une copie.

Pour le deuxième groupe, on va choisir des couleurs différentes du premier groupe, une image différente et personnellement j'ai bien envie d'aligner notre image à droite. On reprendra le même extrait du lorem ipsum et les mêmes caractéristiques pour le texte.

Je ne vous détaille pas la démarche mais si vous avez besoin, n'hésitez pas à remonter au début de ce TP !

Ce qui nous donnera ceci :

Code:

<div style="width:450px; margin:auto; border-top:solid 3px DodgerBlue; border-bottom:solid 3px DodgerBlue; border-left:dashed 3px DodgerBlue; border-right:dashed 3px DodgerBlue; background-color:LightBlue; padding:10px;"><div style="float:right; border:solid 2px dodgerblue; margin-left:10px;"><img src="http://img15.hostingpics.net/pics/772694Chatbleu.png" alt="Groupe Chaton" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.</span></div>

Et pour le troisième groupe c'est pareil, on prend des couleurs différentes et une image différente.

Code:

<div style="width:450px; margin:auto; border-top:solid 3px ForestGreen; border-bottom:solid 3px ForestGreen; border-left:dashed 3px ForestGreen; border-right:dashed 3px ForestGreen;  background-color:YellowGreen; padding:10px;"><div style="float:left; border:solid 2px forestgreen; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/981298greenlantern.png" alt="Groupe Green Lantern" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.

</span>
</div>

De cette manière nous avons nos trois cadres pour les trois groupes de faits.

Le texte

Maintenant, on va les mettre de côté et se pencher sur ce qui remplacera le lorem ipsum. Rassurez-vous, ce n'est pas le but de l'exercice que de trouver ce qui va remplacer le lorem ipsum, alors je vous fournis ça.

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe "XXX". Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à "YYY" responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Maintenant qu'on part tous du même point, on va commencer par en faire trois exemplaires, un pour chaque groupe.
Ensuite, on remplacera les XXX par le nom du groupe, et les YYY par le nom du responsable du groupe. Pour ma part j'ai pris des gens de N-U et je vous conseille d'en faire autant ou du moins de lier quelque chose, c'est plus concret de cette manière et votre lien ne sera pas vide.

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Chaton. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Gravity responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Green Lantern. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Halloween responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Une fois que nous avons complété tout ça, on va styliser le nom des groupes. Pourquoi ne pas le mettre en gras ?

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Code:

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Cupcake</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

On va également ajouter des liens à notre message. Ces derniers permettent de mieux guider les nouveaux, par exemple on va mettre un lien pour le responsable du groupe qui mènera directement à son profil et on mettra un autre lien sur "section appropriée". Soyons fous, aimons les liens, on va en mettre un autre pour la chatbox !
Et on va styliser nos liens également, par exemple changer la couleur, mettre en italique, souligner etc.

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Code:

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Cupcake</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Dakota</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Maintenant il vous reste à faire la même chose pour les deux autres groupes. Je ne redétaille pas la démarche mais si vous en avez besoin vous pouvez remonter jusqu'au titre "le texte".

Donc ça nous donne ceci :

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Chaton. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Gravity responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Code:

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Chaton</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Gravity</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Green Lantern. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Halloween responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

Code:

Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Green Lantern</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Halloween</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

L'assemblage

Maintenant que nous avons nos cadres d'un côté et nos message de l'autre, on va assembler le tout. Rien de bien compliqué, il suffit de prendre le cadre avec le lorem ipsum, d'effacer ce dernier pour le remplacer par notre texte, simple comme bonjour.

Et voilà le résultat :

Code:

<div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><div style="float:left; border:solid 2px deeppink; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/154793Cupcakesrose.png" alt="Groupe Cupcake" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Bienvenue parmi nous !

J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Cupcake</span>.

Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>.
Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Dakota</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs.

Amuses-toi bien !</span></div>

Code:

<div style="width:450px; margin:auto; border-top:solid 3px DodgerBlue; border-bottom:solid 3px DodgerBlue; border-left:dashed 3px DodgerBlue; border-right:dashed 3px DodgerBlue; background-color:LightBlue; padding:10px;"><div style="float:right; border:solid 2px dodgerblue; margin-left:10px;"><img src="http://img15.hostingpics.net/pics/772694Chatbleu.png" alt="Groupe Chaton" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Bienvenue parmi nous !

J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Chaton</span>.

Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>.
Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Gravity</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs.

Amuses-toi bien !</span></div>

Code:

<div style="width:450px; margin:auto; border-top:solid 3px ForestGreen; border-bottom:solid 3px ForestGreen; border-left:dashed 3px ForestGreen; border-right:dashed 3px ForestGreen; background-color:YellowGreen; padding:10px;"><div style="float:left; border:solid 2px forestgreen; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/981298greenlantern.png" alt="Groupe Green Lantern" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Bienvenue parmi nous !

J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Green Lantern</span>.

Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>.
Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Halloween</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs.

Amuses-toi bien !</span></div>

Un cadre de validation peut avoir plusieurs formes. Nous avons travaillé sur l'une d'entre elles, je vais vous donner un exemple de ce qu'on peut faire d'autre !

The title is important !


Je vous laisse même analyser le code

Code:

<span style="display:block; font-size:20px; margin-left:390px; color:orange; text-shadow:1px 1px 1px darkred;">The title is important !</span>
<div style="margin-left:auto; margin-right:auto; margin-top:-20px; width:400px; height:110px; border:solid 1px #d48a33; background-image:url(http://img15.hostingpics.net/pics/866040icon120120.png), url(http://www.simondor.com/wp-content/uploads/Page-blanche-241x300.png); background-repeat: no-repeat, repeat; overflow:auto; text-align:justify; padding-bottom:5px; padding-top:5px; padding-right:5px; padding-left:125px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.</div>

Comme Sparrow le dit si bien, on ne m'arrête plus \o/
J'aimerais remercier Dakota, Gravity et Halloween pour m'avoir autorisé à les utiliser comme modèle pour ce TP. Parce que c'est toujours plus parlant que Machin, Truc et Chose.
Si vous avez un quelconque soucis n'hésitez pas à demander. D'ailleurs si vous souhaitez poster vos exercices à la suite, je vous y encourage !

Je suis pas tout à fait d'accord avec les préfixes, vu que pour tout navigateur mis à part Opera et Chrome (qui sont à présent tous deux sous webkit au passage ), il n'y a en général plus besoin de mettre de préfixe. D'ailleurs, il est rare qu'il faille le mettre tout court, même pour Opera et Chrome, si ce n'est pour les animations CSS3 (keyframes & transform, entre autre) mais surtout pas pour le border qui, depuis des années, n'a plus besoin de préfixe! C'est alourdir plus ou moins inutilement le code dans ce cas-ci!
Donc normalement, si le navigateur n'est pas obsolète (ce qu'il ne devrait pas être) les préfixes ne sont plus nécessaires =)

Edit: Si ça ne te gêne pas A-lice, je vais d'ailleurs faire un tuto sur ça!

Bien sur que non ça ne me gène pas. Mais je sais que pour les border si je mets pas -moz- mozilla ne le capte pas et n'ayant pas les autres j'avais supposé que c'était la même chose.

Hum si, sans moz, Mozilla le capte pour les border O_O

ça dépend des versions du navigateur, pour les préfixes, Mozilla me gère les bordures de "div" sans problème, par exemple, mais il ne m'affiche pas une fois sur deux des bordures appliquées à un "img"

genre ça:

Code:

<img src="" style="border: 1px dotted black" />

Une fois sur deux, il ne me l'affiche pas .><"

Normalement c'est pas censé. J'ai fait des test sur NU, et effectivement, chez moi ça le met, puis l'image ce reload et le border ce retire. Cependant, même en rajoutant le préfixe -moz- ça ne change rien du tout, donc ça ne vient pas de là.
C'est n'est pas Mozilla qui retire systématiquement les border, même, elles s'affichent très bien, ici, par exemple: http://www.handsonweb.com/css/inline.html (il y a presque tout ne bas un livre avec un contours "dashed". Ce contour s'affiche très bien sur FF, et si tu regardes le code, il est bel et bien codé et non pas mit dans l'image!)

Bon bon bon, petite mise à jour de ce TP j'ai enlevé les préfixes vu qu'effectivement c'était mon mozilla qui avait un soucis (j'l'ai jamais aimé de toute façon u_u).
Cette fois il est tout propre tout beau !

Je crois qu'il y a aussi un problème de forum sur les bordures d'images... mais il me semble que ce n'est plus le cas maintenant

En tout cas merci une fois de plus de ce TP, bien expliqué et tout x) Bravo

Je déplace dans le Cursus (qui se remplit bien^^)

Hum... personne n'a posté avant moi, j'espère que je ne gène pas en postant mon exercice. Bon par contre c'est bizarre, mon texte normal est collé au titre, mais ça ne me fait pas ça sur mon forum test D: ... Un soucis dans mon code ?

Voilà pour moi :)

Code:

<div style="width: 450px; margin:auto; border-left: solid 6px #000; background-color: #949191; padding:10px;"><div style="float:left; margin-right:10px;"><img src="http://nsa37.casimages.com/img/2016/07/11/160711111525284657.png"  alt="Serpentard" /></div><span style="display:block; color:black; text-align:justify; font-size:15px;">Bienvenue parmi nous !
J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Ingénieurs.</span> Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://milas-arya.forumgratuit.org/f7-communaute" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://milas-arya.forumgratuit.org/u1" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">L'Oracle</a> responsable du groupe. N'oublies pas que la <a href="http://milas-arya.forumgratuit.org/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !</span>
</div>

Très bon tuto
J'ai fait ça à ma sauce :3

Voilà mon test pour ce tuto ! Merci du temps consacré à nous instruire avec des explications au top !

Participation validée !


J'ai pas mis les liens pour le moment, mais j'ai retenu comment faire !

Bonjouur !

Alors j'ai un souci avec mon code :

Code:

<div style= "width:450px; margin:auto; border-top: solid 4px #E96929; border-bottom: solid 4px #E96929; border-left: solid 2px #E96929; border-right: solid 2px #E96929; background-color: #F4BA8D; padding:10px"><div style= "float: left; border : solid 1px #E96929; margin-right: 10px"><img src="https://zupimages.net/up/19/43/c4qw.jpg" alt="Groupe LOL" /></div><span style= "display: block, text-align: justify; font-size13; color: #D73200;"><span style= "text-align: center; font-size: 22px;"> Félicitation !</span> <br /><br />Tu est validé ! Tout d'abord bienvenue parmi nous ! <br />Message personnel de l'admin<br />Nous allons te donner quelques tâches que tu vas devoir effectuer avant de pouvoir RP et de rejoindre les autres membres du forum. Nous allons te demander de lire attentivement les sujets</span> <span style= "font-style: italic; text-shadow:0px 0px 5px black; color:white; "> Règlement</span> et <span style= "font-style: italic; text-shadow:0px 0px 5px black; color:white ">.....</span> et n'oublie pas de venir te recenser dans ces différents sujets :<span style= "font-style: italic; text-shadow:0px 0px 5px black; color:white"> Les Métiers</span>, <span style= "font-style: italic; text-shadow:0px 0px 5px black; color:white"> Les Pouvoirs </span>et <span style= "font-style: italic; text-shadow:0px 0px 5px black; color:white">Les Iles </span><br /><br /> Si tu as le moindre problème, n'hésites pas à venir poser tes questions dans le sujet <span style= "font-style: italic; text-shadow:0px 0px 5px black; color:white"> Questions</span> ou venir t'adresser directement à l'un des membres du staff, que ce soit sur le forum ou sur notre Discord ! <br /><br /> Encore une dernière petite chose et c'est la plus importante, amuses toi, c'est le plus important (n'oublie quand même pas tout ce que je viens de te dire xD)  </span>
</div>

Je n'ai pas utilisé les liens ici. Mais je voulais quand même mettre en valeur certains éléments. le problème étant, après avoir modifié le premier mot "Règlement", il ne veut plus me rafficher la mise en forme de mon texte (ici la couleur orange), comme pour tout ce qu'il y a avant. Et je ne comprend pas pourquoi. C'est peut-être une faute bête (et comme je suis fatiguée ça n'aide pas pour la trouver lol) ou peut être pas.... Aussi si j'ai rendu le code plus compliqué que j'aurais pu, je voudrais bien savoir comment le simplifier si c'est possible. Merci d'avance !
MAYDAY MAYDAY !