TP : Création d'une mise en forme de contexte

Vous avez désormais appris à bien manipuler les langages HTML et CSS, vous savez créer des éléments, les positionner et y appliquer de nombreux styles. Je vous propose maintenant de créer une mise en forme de contexte pour vos forums RPG.

Aperçu du résultat du TP :

Réaliser un schéma

Il est important de ne pas plonger tête baissée dans la création d'un code, surtout lorsque l'on débute. Apprenez à organiser votre travail pour gagner du temps et être plus efficace. Ainsi, il vaut mieux commencer par faire un schéma qui peut être très approximatif. L'important est d'avoir une base sur laquelle s'appuyer : une idée de structure.

Dans ce TP, afin de réaliser une mise en forme de contexte, nous allons suivre un schéma que j'ai grossièrement dessiné sur papier :

Création du squelette

Chaque codeur a sa préférence, certains aiment coder chaque élément un par un et lui attribuer directement son style CSS. C'est notamment ce que vous avez appris à faire avec A-Lice lors du TP de mise en forme d'un règlement. Cette fois-ci, nous allons profiter du fait que nous avons un schéma pour explorer une autre méthode : celle qui consiste à poser toute la structure en HTML avant de mettre en forme avec le CSS.

Gardez le schéma à portée de vue. Vous remarquerez que toute la mise en forme de contexte est contenue dans un seul et même bloc. Commençons par créer celui-ci.

Code:

<div>
</div>

Ensuite, le premier élément se situant dans ce bloc est le titre. Il s'agit d'un texte contenu dans un bloc afin que nous puissions le centrer et y ajouter une bordure par la suite. Nous rajoutons donc ce fameux bloc titre en entourant par une balise span la première lettre afin de la modifier indépendamment après.

Code:

<div>

  <div><span>C</span>ontexte</div>

</div>

Sous le titre, nous pouvons placer une image, qui serra en rapport avec l'atmosphère du forum et qui attirera l'attention du lecteur :

Code:

<div>

  <div><span>C</span>ontexte</div>

  <img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" />

</div>

Enfin arrive le vif du codage, le contexte en question. Mais nous ne voulons pas un simple texte, non, nous voulons un texte décoré. Commençons par le premier paragraphe, où nous avons prévu de mettre la première lettre plus grande (dans le style d'une lettrine). N'oublions pas de mettre cette première lettre dans un span afin de pouvoir la modifier ultérieurement.

Code:

<div>

  <div><span>C</span>ontexte</div>

  <img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" />

  <div>
      <span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

</div>

Puis le second paragraphe, en remplaçant la lettrine par une image qui flottera à droite, cette fois-ci.

Code:

<div>

  <div><span>C</span>ontexte</div>

  <img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" />

  <div>
      <span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" alt="Image flottante droite" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

</div>

Comme chaque contexte devrait se finir par une phrase cinglante, nous pouvons isoler un court passage de texte, à la fin, que nous démarquerons davantage via le CSS.

Code:

<div>

  <div><span>C</span>ontexte</div>

  <img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" />

  <div>
      <span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" alt="Image flottante droite" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div>« Texte spécial. »</div>
  </div>

</div>

On finit notre squelette de mise en forme par le crédit, qui va se trouver dans un bloc afin de lui mettre un fond différent du reste :

Code:

<div>

  <div><span>C</span>ontexte</div>

  <img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" />

  <div>
      <span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" alt="Image flottante droite" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div>« Texte spécial. »</div>
  </div>

  <div>contexte écrit par Mamadou de La Fontaine</div>

</div>

Mise en forme avec le CSS

1) Bloc global
Nous allons tout d'abord définir la largeur totale de notre fiche de contexte, la centrer, et choisir la police qui sera utilisée. Prenons une largeur de 500px, très répandue pour les fiches sur les forums, puis appliquons le célèbre "margin: auto" pour le centrage. Quant à la police, vous avez une liberté totale, nous opterons pour Times New Roman dans ce TP :

Code:

<div style="width: 500px; margin: auto; font-family: 'Times New Roman', serif;">
  <!-- contenu -->
</div>

Ce sont les balises vous permettant d'écrire des commentaires dans votre code HTML. Il s'agit de textes, qui peuvent vous servir à commenter votre code, à y expliquer certaines choses, à noter des informations dont vous voudrez vous rappeler, etc. Le texte contenu entre ces deux balises ne sera pas pris en compte lors de l'interprétation du code par le navigateur. Pratique !

2) Le bloc du titre
Pour le bloc contenant le titre, il nous faut une bordure du bas de 10px de largeur, solide et noire. Nous voulons également centrer le texte, le mettre à une taille légèrement plus grande, disons 25px, qu'il soit écrit en blanc, et lui appliquer une ombre noire. C'est tout ? Eh bien on peut aussi le forcer à être en majuscules !

Code:

<div style="border-bottom: 10px solid black; text-align: center; font-size: 25px; color: white; text-shadow: 0 0 3px black; text-transform: uppercase;"><span>C</span>ontexte</div>

3) Le "C" du titre
Mais que fait-on de ce C, retranché dans ces balises span ? Pourquoi pas le mettre plus grand, en rouge et en italique celui-ci ?

Code:

<span style="font-size: 35px; color: darkred; font-style: italic;">C</span>

Pour l'instant nous avons quelquechose comme ça :


5) L'image
Notre bloc général faisant 500px, on peut avoir une image de 450px qui sera automatiquement centrée avec une bordure de 25px ! En effet : 25+450+25=500.

Code:

<img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" style="width: 450px; border: 25px solid darkred;" />

L'image dans la fiche ressemblera donc à cela :


6) Le bloc du texte
Pour ce bloc-ci, nous souhaitons avoir une image de fond, une marge intérieure de 25px pour créer la symétrie avec le bloc de l'image du dessus, que le texte soit en "justify", écrit en gris clair et de taille assez petite, aux alentours de 14px.

Code:

<div style="background-image: url('http://nsm08.casimages.com/img/2015/03/31//15033107153819468513126699.png'); padding: 25px; text-align: justify; color: #dddddd; font-size: 14px;">
  <!-- contenu -->
</div>

7) La lettrine
Nous avons séparé la première lettre du premier paragraphe tout à l'heure, il est temps de la transformer en élément inline-block (pour lui appliquer des marges), de la faire flotter à gauche, de lui appliquer des marges (10px en haut, 5px à droite, aucune en bas et 5px à gauche) afin de mieux la disposer, puis de l'agrandir (30px), naturellement.

Code:

<span style="display: inline-block; float: left; padding: 10px 5px 0 5px; font-size: 30px;">L</span>

Lorsque l'on veut mettre une marge interne (ou même externe) différente pour chaque côté, au lieu d'écrire "padding-top: 3px; padding-right: 1px; padding-bottom: 7px; padding-left: 78px;", on peut directement écrire toutes les valeurs à la suite après "padding:". Cependant il y a un certain ordre à respecter, la première valeur correspond à la marge du haut, la seconde à celle de droite, la troisième à celle du bas et la dernière à celle de gauche. Au final, pensez au sens des aiguilles d'une montre en partant de 12h. Notez que l'on n'a pas besoin de préciser l'unité pour le 0 (que ce soit en pourcentages ou en pixels, cela fera toujours une marge nulle).


8) L'image flottante à droite
Il n'y a rien à rajouter pour le paragraphe, à la suite on saute une ligne et on peut s'attaquer à l'image flottante à droite du second paragraphe ! Cette fois-ci, c'est encore plus simple, on la fait seulement flotter à droite avec une marge de 10px à gauche pour que le texte ne soit pas collé. Cela dit, il faut aussi que l'on précise la largeur de l'image...

Code:

<img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" style="float: right; padding-left: 10px; width: 100px;" />

Sur Forumactif, lorsque l'option de redimensionnement des images est activée sur le forum par l'administrateur, un script est généré afin de transformer les images qui sont aux bonnes dimensions en éléments de type inline. Ce script annule tous les effets de style que nous voulions leur appliquer. Une parade que nous avons trouvée ? Définir la largeur de l'image dans son attribut style en HTML, même si nous indiquons la même largeur que celle d'origine. On peut également leur donner une "class" ou un "id", mais vous verrez tout ça dans une prochaine étape du cursus !


9) Le texte spécial
Ce texte sera comme la phrase de fin du contexte, celle qui doit sonner comme "tu n'as pas le droit de ne pas t'inscrire". Il faut donc qu'elle soit centrée, d'une taille supérieure au texte normal (16px), en rouge, avec une ombre noire, en gras et en italique ! Comme ça on la verra bien.

Code:

<div style="text-align: center; font-size: 16px; color: darkred; text-shadow: 0 0 3px black; font-weight: bold; font-style: italic;">« Texte spécial. »</div>

Votre texte devra donc se rapprocher de ceci :


10) Le crédit
Ce crédit est dans un bloc à part si nous suivons le schéma. Afin d'étalir une autre symétrie, cette fois avec la bordure noire inférieure du titre, nous allons mettre le fond du crédit en noir. Ensuite, nous pouvons mettre une petite marge interne (5px), centrer le texte, le rendre plus petit (12px) et en gris.

Code:

<div style="background-color: black; padding: 5px; text-align: center; font-size: 12px; color: grey;">contexte écrit par Mamadou de La Fontaine</div>

Le crédit sera donc aussi simple que cela :


Et voilà ! Au final, nous obtenons ce code :

Code:

<div style="width: 500px; margin: auto; font-family: 'Times New Roman', serif;">

  <div style="border-bottom: 10px solid black; text-align: center; font-size: 25px; color: white; text-shadow: 0 0 3px black; text-transform: uppercase;"><span style="font-size: 35px; color: darkred; font-style: italic;">C</span>ontexte</div>

  <img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" style="width: 450px; border: 25px solid darkred;" />

  <div style="background-image: url('http://nsm08.casimages.com/img/2015/03/31//15033107153819468513126699.png'); padding: 25px; text-align: justify; color: #dddddd; font-size: 14px;">
      <div style="float: left; padding: 10px 5px 0 5px; font-size: 30px;">L</div>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" style="float: right; padding-left: 10px; width: 100px;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div style="text-align: center; font-size: 16px; color: darkred; text-shadow: 0 0 3px black; font-weight: bold; font-style: italic;">« Texte spécial. »</div>
  </div>

  <div style="background-color: black; padding: 5px; text-align: center; font-size: 12px; color: grey;">contexte écrit par Mamadou de La Fontaine</div>

</div>

Intégration dans Forumactif

Nous avons fini notre codage ! Youpi ! Champagne ! NON. Ne vous réjouissez pas si vite. En effet, le moment est venu de tester notre code en direct.

Essayons tout de suite sur Never Utopia :

Suspens... :

Bienvenue dans les joies de FA mes enfants. En effet, l'éditeur de Forumactif, même en mode "code source", prend en compte les sauts de lignes entre les balises... Cela peu-être utile dans un texte, mais pas dans un code. Cela dit, ne vous inquiétez pas, nous n'avons pas à tout retaper. Des sites web permettent de "compacter" automatiquement un code HTML afin de supprimer tous les sauts de lignes. Rendons-nous donc sur le site > HTML Minifier <. Collons notre code dans le champ de saisie et cliquons sur le bouton "Minify".


Récupérons notre code en le copiant et collons-le ici pour le re-tester.

Roulements de tambour... :

C'est mieux ! Mais il nous a même supprimé les sauts de lignes que nous voulions garder, ceux entre les paragraphes et ceux avec les texte spécial ! Que devons-nous faire ? Tout simplement les rétablir à la main.

Notre code définitif est donc :

Code:

<div style="width: 500px; margin: auto; font-family: 'Times New Roman', serif;"> <div style="border-bottom: 10px solid black; text-align: center; font-size: 25px; color: white; text-shadow: 0 0 3px black; text-transform: uppercase;"><span style="font-size: 35px; color: darkred; font-style: italic;">C</span>ontexte</div><img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" style="width: 450px; border: 25px solid darkred;" /><div style="background-image: url('http://nsm08.casimages.com/img/2015/03/31//15033107153819468513126699.png'); padding: 25px; text-align: justify; color: #dddddd; font-size: 14px;"> <div style="float: left; padding: 10px 5px 0 5px; font-size: 30px;">L</div>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" style="float: right; padding-left: 10px; width: 100px;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="text-align: center; font-size: 16px; color: darkred; text-shadow: 0 0 3px black; font-weight: bold; font-style: italic;">« Texte spécial. »</div></div><div style="background-color: black; padding: 5px; text-align: center; font-size: 12px; color: grey;">contexte écrit par Mamadou de La Fontaine</div></div>

Qui nous donne :

Tadaaaam ! :

Une alternative aux sauts de lignes : utilisation des commentaires HTML
Nous avons vu plus haut qu'est-ce qu'étaient les commentaires HTML et comment en créer. Je vous ai dit que tout ce que vous mettrez dedans ne serait pas pris en compte lors de l'interprétation du code par le navigateur... et cela est valable avec Forumactif aussi ! Nous pouvons donc se servir de cela pour sauter des lignes impunément !

Exemple :

Code:

<span style="display: inline-block; background: pink; padding: 5px;"><!--

-->Blabla<!--

--></span>

Donne :
Blabla
Sans aucun saut de lignes visible puisqu'ils sont dans des commentaires HTML !

Grâce à cette technique, nous pouvons sauter des lignes afin d'aérer notre code, sans oublier de mettre ces sauts de lignes en commentaires :

Code:

<div style="width: 500px; margin: auto; font-family: 'Times New Roman', serif;"><!--

--><div style="border-bottom: 10px solid black; text-align: center; font-size: 25px; color: white; text-shadow: 0 0 3px black; text-transform: uppercase;"><span style="font-size: 35px; color: darkred; font-style: italic;">C</span>ontexte</div><!--

--><img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" style="width: 450px; border: 25px solid darkred;" /><!--

--><div style="background-image: url('http://nsm08.casimages.com/img/2015/03/31//15033107153819468513126699.png'); padding: 25px; text-align: justify; color: #dddddd; font-size: 14px;"><!--
--><div style="float: left; padding: 10px 5px 0 5px; font-size: 30px;">L</div>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" style="float: right; padding-left: 10px; width: 100px;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="text-align: center; font-size: 16px; color: darkred; text-shadow: 0 0 3px black; font-weight: bold; font-style: italic;">« Texte spécial. »</div><!--
--></div><!--

--><div style="background-color: black; padding: 5px; text-align: center; font-size: 12px; color: grey;">contexte écrit par Mamadou de La Fontaine</div><!--

--></div>

Hello Elysia!
Tout d'abord, merci pour ce TP! ^^ Cependant, j'aurai quelques remarques:

• Les images, je ne les mettrais pas entre div, étant donné que tu peux leur donner elles aussi un style. Plutôt, utiliser dans le style de l'image pour la centrer un display: block; ou un display: inline-block; avec une largeur et un margin: auto; . Idem pour ta lettrine du premier paragraphe: plutôt utiliser un span autour de la lettre, et lui donner un display: inline-block; me semble plus judicieux. Cela permet d'avoir moins de balises, un code plus clair, et aussi d'éviter (par le fait que tu aies moins de balise) d'avoir pas assez de fermetures ou trop de fermetures de ces dites balises.
  
• Je préciserais peut-être dans ta première utilisation du margin: auto; que ce dernier ne marche que sur les blocs ayant une largeur définie et uniquement sur les éléments block ou inline-block. C'est toujours bon de le rappeler dans les TP pour que ça entre dans les têtes ^^
  
• Pour l'image, si tu prends en compte mon 1er point, alors du coup tu mettrais une bordure plutôt qu'une couleur de fond au div entourant l'image.
  
• Pour les aiguilles d'une montre pour le padding... Oui! sauf que tu as écrit haut - gauche - bas - droite, mais qu'en vérité c'est haut - droite - bas - gauche. Ce que tu dis est le sens inverse des aiguilles... Tu t'es trompée les deux fois, une fois dans la description du padding, et une fois dans ton résumé. À corriger donc, pour éviter les erreurs ^^
  
• Dernière remarque: je mettrais encore une "alternative" pour ceux qui, par lisibilité du code, voudraient garder les retours à la ligne. Vu que tu parles de commentaires, tu peux très bien mettre entre commentaires les saut de lignes. Comme ça, tu les gardes sans tout compresser, mais ils n'apparaissent pas

Merci encore pour ta contribution, et bonne chance pour les modifications!

Hello Nyo !

1) Je suis tout à fait d'accord avec toi pour directement appliquer le float sur la lettrine (avec un span) et sur l'image (même sans display: inline-block; puisqu'il me semble qu'une image en est un par défaut), le problème c'est qu'il doit y avoir un code sur NU m'empêchant de le faire, un ligne du genre "img { display: inline !important; }" parce qu'à l'origine je voulais faire comme ça et ça marchait parfaitement sur mon forum test. En revanche sur NU, ça ne fonctionne pas.

Démo :

La lettrine fonctionne bien avec un span et un display: inline-block; mais par souci de parallélisme, j'avais décidé d'englober tout dans une div, du coup.

Donc je suppose que c'est dû au CSS de Never Utopia, je te laisse tester toi-même le code sur ton forum test :

Code:

<div style="width: 500px; margin: auto; font-family: 'Times New Roman', serif;"> <div style="border-bottom: 10px solid black; text-align: center; font-size: 25px; color: white; text-shadow: 0 0 3px black; text-transform: uppercase;"><span style="font-size: 35px; color: darkred; font-style: italic;">C</span>ontexte</div><div style="background-color: darkred; text-align: center; padding: 25px;"><img src="http://nsm08.casimages.com/img/2015/03/31//15033106484019468513126538.png" alt="Image contexte" style="max-width: 450px;"/></div><div style="background-image: url('http://nsm08.casimages.com/img/2015/03/31//15033107153819468513126699.png'); padding: 25px; text-align: justify; color: #dddddd; font-size: 14px;"> <span style="display: inline-block; float: left; padding: 10px 5px 0 5px; font-size: 30px;">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img src="http://nsm08.casimages.com/img/2015/04/30//15043003525519468513219566.jpg" style="float: right; padding-left: 10px;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="text-align: center; font-size: 16px; color: darkred; text-shadow: 0 0 3px black; font-weight: bold; font-style: italic;">« Texte spécial. »</div></div><div style="background-color: black; padding: 5px; text-align: center; font-size: 12px; color: grey;">contexte écrit par Mamadou de La Fontaine</div></div>

2) Ensuite, je vais donc bien retirer l'image principale de sa div si tu préfères, mais ça voudrait-il dire que je dois mettre un width: 450px au lieu d'un max-width: 450px ? Parce que sinon ça ne va pas remplir les 500px de largeur (en prenant des bordures de 25px). Corrigé

3) Je suis une patate xD ! Je corrigerai donc mon erreur avec le sens des marges, c'est bien celui des aiguilles d'une montre mais je me suis trompée au niveau de la droite et de la gauche (étourderie certainement sinon ça me fait peur). Corrigé

4) Très bonne alternative pour les commentaires ! Je n'y avais moi-même pas pensé. Je vais procéder à toutes ces modifs le plus rapidement possible. ^^ Ajouté

Ok wow pour l'image c'est hyper bizarre effectivement O__O Je vais rapidement en parler à Okh, parce que le truc c'est qu'il ne prend pas en compte ce que tu mets dans le style, et il devrait normalement. Il fait comme si dans le style tu avais mit un inline O__O (je sais pas si tu as firebug ou un truc similaire, mais là il me met element.style { display: inline; } et rien d'autre de ce que je peux mettre sur NU. Ce qui est hyper bizarre >< Par exemple, si tu essaies de mettre un border ça marche pas non plus O__O Ton max-width sur la première image est pas non plus pris en compte d'ailleurs O__O)

Par contre, après un peu plus de test, si je replace par un autre image la seconde, ça marche très bien, mais si je change pour la première, ça ne marche toujours pas, comme ceci:

Spoiler:

du coup, ouais, y'a un bug O______O
Mais modifie tout de même, parce que là c'est un bug lié à NU et pas du code, normalement.

Le max-width marche aussi sur un margin: auto;. Cependant, oui, si tu veux que ça prenne exactement la taille avec la bordure, il faudrait un width. Sinon, on peut aussi garder ta solution, mais dans ce cas, j'expliciterais plus pourquoi tu le fais comme ça plutôt que de mettre une bordure à l'image (tu veux que le fond prenne toute la place, et que l'image, si plus petite, reste centrée, mais ne dépasse pas telle largeur).

Parfait si tu corriges, préviens-moi quand c'est tout bon! ^^

Je me tape l’incrustation, pour le style des images, cela vient de l'option de forumactif pour redimensionner les images dans les messages
Général > Messages et Emails > Configuration > Redimensionnement des images

Le javascript qui s'en charge va automatiquement remplacer la valeur de l'attribut style de l'image par display: inline; si c'est une image "aux bonnes dimensions".

Un moyen de passer à travers est de définir une bonne largeur dans l'attribut style.
Par exemple :

Avec largeur (ou une hauteur), le style est conservé

Code:

<img style="width: 400px; border: 2px solid red;" src="http://lorempixel.com/400/200/cats/">

Sans largeur, le style est remplacé

Code:

<img style="border: 2px solid red;" src="http://lorempixel.com/400/200/cats/">

C'est pour ça que cela fonctionne bien pour la seconde image (^-^), elle a une largeur de 100px définie.

Pour les petits curieux, c'est cette partie là du javascript de fa :

Code:

img_style = img_el.style && (img_el.style.width || img_el.style.height) ? {
    width: parseInt(img_el.style.width) || false,
    height: parseInt(img_el.style.height) || false
} : false;
if (!img_style) {
    img.attr('style', 'display:inline')
}

Arf je vois, c'est un peu embêtant... Merci Nihil en tout cas pour le mystère résolu, je me disais bien qu'il y avait du JS quelque part vu qu'on voyait pendant une demi-seconde avant que la page soit totalement chargée la mise en page des images, mais je trouvais pas lequel ^^"

Du coup Elysia, je te propose d'attendre de faire les modifications concernant les images, le temps qu'on voie côté staff comment/quoi faire, mais je pense que de toute façon, il faudra prévenir dans le TP ce qui se passe dans le cas où on active ce redimensionnement d'images (je suppose qu'un class règle le problème, mais dans le cadre du TP ça va pas x) ).

Merci Nihil, cette option n'est pas activée dans mon forum test, c'est pour cela que ça marchait. Je me doutais que c'était un inline forcé mais ne connaissant pas bien le js, je ne savais pas que c'était à cause d'un script.

Je pense aussi qu'il faut attendre, puis ça commence à faire beaucoup d'infos dans un même TP... ^^

Je pourrais expliquer dans le TP, peut-être en spoil pour faire une parenthèse ou peut-être après une question du genre "pourquoi tu précises la taille de cette image ?" : « Sur Forumactif, lorsque l'option de redimensionnement des images est activée sur le forum par l'administrateur, un script est généré afin de transformer les images qui sont aux bonnes dimensions en éléments de type inline. Ce script annule tous les effets de style que nous voulions leur appliquer. Une parade que nous avons trouvée ? Définir la largeur de l'image dans son attribut style en HTML, même si nous indiquons la même largeur que celle d'origine. »

Oui je rajouterais cette petite phrase, ce serait une bonne idée! ^^ Par contre, je préciserais aussi que mettre une classe résout aussi le problème, mais que les classes et id seront vues plus tard dans le cursus. Comme ça ils connaissent toutes les solutions ^^

Voilà, tout a été ajouté & corrigé ! *fiou* (Je pensais pas avoir autant de soucis, au moins ça m'a appris des choses ! xD)

Je vous laisse vérifier tout ça, je pense ne rien avoir oublié. ^^

C'est tout bon, je classe donc! Merci pour tout Elysia! ^w^

Merci pour ce tuto' !

Erci pour le TP ! voilà ce que ça donne pour moi :

Contexte:

Une question : ce n'est pas que sur NU le problème qui enlève le CSS des images ? car j'avais imposé la taille avec l’attribut width=450px sur mon forum et ça marchait bien ... j'ai du mettre le width dans le style pour que le bug n'ai pas lieu sur NU ... voilà ^_^

Effectivement, le bug des images existe sur NU à cause du redimensionnement automatique des images sur le forum ^w^

Ok ... Je ferai attention pour mes prochains codes alors ... merci Nyo

Voici mon essai, mais par contre j'ai des petits défauts mais je ne sais pas d'où ils sortent ou comment les corriger...
1) Le titre et le sous-titre ne sont pas alignés avec le côté droit du cadre en dessous..
3) Certains padding ne semble pas bien marcher, le "contexte par Lorem" est plus collé vers le haut que vers le bas et je ne comprends pas pourquoi T_T, si quelqu'un passe par ici et a le temps de jeter un oeil sur mon code (donné en dessous)

Code:

<div style="background-color: #493E33; width: 600px; margin: auto; padding:20px; font-family: sans-serif;"> <span style="font-size:12px; text-align:center; display:block; width:80px; background-color: #b18E6C; color: #000000; float: right; padding: 3px;">Une date</span> <div style="width:150px; float: left; margin-right: 10px;""> <img src="http://i.imgur.com/hLzXmeB.png"/> </div><div style="font-size: 40px; font-variant: small-caps; color: #cc4a15; margin-left:auto; margin-right: auto; border-bottom: 1px solid #6f563D; padding-top: 50px; padding-bottom:10px; width: 500px; text-align: right;">Premier titre</div><div style="margin: auto; font-size:20px; color: #edb454; font-variant: small-caps; text-align: right; width: 500px; padding-top: 5px;">sous-titre</div><div style="background-color: #b18E6C; width: 500px; margin-right: auto; margin-left:auto; margin-top: 15px; padding: 15px; color: #412D18;">Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.</div><div style="background-color: #6f563D; padding: 5px; width:200px; margin-left:355px; text-align: right; color: #000000; opacity: 0.5;">Contexte par Lorem</div><div style="text-align: center; font-size: 11px; color: #FFFFFF; opacity: 0.2;">code ©Renard</div></div>

Tutoriel très complet et parfait ! Merci beaucoup ~