Partie 1 - Etape 2 : Mise en forme de paragraphes

Les Différents blocs texte

Pour créer des blocs de texte nous allons utiliser des balises de type "block", qui sont donc le contraire des balises de type "inline" que nous avons vu précédemment.

Le Paragraphe "p"

Il existe plusieurs façon d'afficher un paragraphe. La plus courante se fait avec la balise de paragraphe simple :

Code:

<p>Votre paragraphe</p>

Ainsi donc, si vous mettez en forme le contenu d'un de vos messages (un RP par exemple, dans lequel il y aura donc des paragraphes histoire d'aérer un long texte) avec des paragraphes, vous n'aurez pas besoin de sauter des lignes, cette balise le fera pour vous. Il est bien sûr possible d'ajouter un "style" à un paragraphe mis en forme de cette façon là, de la même façon que pour un "span", un lien ou une image, nous allons y venir plus bas.
Néanmoins, cette balise est pratique dans un site web, car comme vous le savez sans doute il est nécessaire de placer une balise à chaque retour à la ligne dans une page de codage "pur"... mais pas sous ForumActif ! En effet, même si vous saisissez votre message en BBcode, chaque fois que vous pressez la touche "Entrée", c'est un retour à la ligne. Du coup, il devient facile d'en faire, c'est même un réflexe, du coup cette balise "paragraphe" est peu utilisée dans les messages. Sachez néanmoins qu'elle existe.

La zone-bloc "div"

La seconde manière est de créer une zone "block", au départ sans mise en forme, à laquelle nous appliquerons ensuite du css. Cette méthode sera plus utilisée dans vos mises en forme de message, elle est importante, c'est même d'une des balises les plus utilisées dans les structures de page. Elle est très malléable et permet une multitude de personnalisation.
La balise pour créer une zone est la suivante :

Code:

<div>Votre texte.</div>

Que remarquez-vous lorsque vous prévisualisez un message avec uniquement ce contenu ? Et bien il n'y a rien de plus que le texte "Votre texte" dans votre message !
En effet, tout comme la balise "span" vue dans l'étape précédente, la balise "div" n'impose rien d'elle-même, c'est à nous de lui donner un style pour l'afficher comme l'on veut.

Leur Possibilités de mise en forme

Afin de donner du "style" à notre cadre "div", nous allons procéder de la même façon qu'avec le "span", c'est à dire en intégrant le CSS directement dans notre balise :

Code:

<div style="placez ici le css">Votre texte</div>

Il vous est bien sûr possible de placer les mêmes propriétés que celles affiché dans le tableau de l'étape précédente, à savoir une couleur de fond, une bordure, une taille et couleur de texte...



Je ne vais pas remettre le même tableau, consultez-le si besoin à l'étape précédente. Voici par contre ce que vous pouvez mettre en plus, spécifiquement dans les balises de type "block", comme propriétés CSS.

ELEMENT MODIFIE	NOM DE LA PROPRIETE	VALEURS POSSIBLES	EXEMPLES
Largeur	width	un chiffre en pixel ou un pourcentage	40px - 80%
Hauteur	height	un chiffre en pixel	30px - 50px
Alignement du texte	text-align	center; right; left; justify	center - right - left - "Justify" : Ce texte est justifié, chaque lettre s'arrête au même endroit précisément de chaque côté.
Marges	margin margin-top margin-left margin-bottom margin-right	un nombre en pixel	margin-top: 10px - margin-left: 40px
Image de fond	background ou background-image	l'adresse d'une image sous la forme : url(adresse.jpg);

Voici ci-dessous quelques exemples de ce que cela peut donner.

Code:

<div style="width: 400px; background-color: #272727; border: 3px solid #101010; color: #d0d0d0; text-shadow: none; padding: 4px; font-family: trebuchet; letter-spacing: 1px; text-align: justify;">
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.</div>

... et si on l'associe à un titre :

Votre titre

Code:

<span style="font-family: arial black; font-size: 24px; color: #535353;">Votre titre</span>

<div style="width: 400px; background-color: #272727; border: 3px solid #101010; color: #d0d0d0; text-shadow: none; padding: 4px; font-family: trebuchet; letter-spacing: 1px; text-align: justify; margin-top: -10px;">Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.</div>

Plutôt pas mal pour un début non ? Vous pouvez bien évidemment changer les couleurs, les polices, les bordures et leur style, mais aussi les marges ! Pour faire passer le bloc de texte en partie sous le titre j'ai simplement utilisé un "margin-top: -10px", mais vous pouvez ainsi bouger les éléments comme il vous plaira, et comme vous pouvez le constater les nombres négatifs peuvent être très utiles !

Le "Lorem Ipsum"

No panic :). Pas de version latine à l'horizon, d'ailleurs quand bien même vous essaierez de traduire vous ne pourrez pas puisque ces types de texte là ne sont pas du "vrai" Latin, certains mots sont justes, mais d'autres non et ils sont placés aléatoirement.

A quoi ça sert alors ?
Et bien simplement à simuler la présence d'un vrai texte dans votre encadré. Cela permet de voir précisément comment rendra votre code une fois rempli, sans vous embêter à le remplir en racontant votre vie ou en mettant des "blablabla" qui ne représenteront jamais ce que donnerait un texte. C'est exactement ce que j'ai utilisé juste au dessus pour l'exemple.

Voici où trouver un bon générateur de "Lorem Ipsum" (nom de ces fameux textes aléatoires) : Générateur de faux textes.

Remplir provisoirement avec ces textes vous permet d'avoir un aperçu de votre code proche de ce qu'il donnera avec votre propre texte par la suite.



Souvenez-vous donc que ces fameux petits textes existent pour vous faciliter la vie, personnellement je les utilise souvent, que ce soit pour mettre en place un code de message, que pour faire le codage d'une description de catégorie ou encore pour élaborer le codage d'une page web comme celle que vous lisez actuellement... Evidemment, cela parait logique, mais il faut enlever ce faux texte ensuite pour le remplacer par votre propre texte, le vrai. Cela peut paraitre idiot mais il est déjà arrivé que de grands graphistes rendent leur travaux d'affiche par exemple avec en texte "Lorem Ipsum" à la place du nom du produit... Ca l'fait pas hein ? XD

Centrer automatiquement un bloc

Le "center"

Vous allez peut-être me dire que l'exemple illustrant la mise en forme du bloc texte ci-dessus est bonne mais qu'il serait mieux de tout centrer sur la page ou dans le message... Et vous avez raison. Comment procéder alors ? Et bien il y a la méthode "simple" mais globale, qui ne permet pas de faire de détails, et que nous avons vu dans l'étape précédente.

Code:

<center>[VOTRE CODE]</center>

Ce qui nous donne pour l'exemple :
Votre titre

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Code:

<center><span style="font-family: arial black; font-size: 24px; color: #535353;">Votre titre</span>

<div style="width: 400px; background-color: #272727; border: 3px solid #101010; color: #d0d0d0; text-shadow: none; padding: 4px; font-family: trebuchet; letter-spacing: 1px; text-align: justify; margin-top: -10px;">Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.</div></center>

Mieux non ?^^ Cependant, cela centre tout sans nous laisser trop libre ensuite... Par conséquent, même si c'est tout à fait utilisable, j'ai une préférence pour la méthode qui suit. Libre à vous d'user du code qui vous conviendra le mieux !

Le "margin: auto"

La seconde méthode consiste à utiliser quelque chose de très pratique : le "margin: auto;". Qu'est-ce que c'est cette bestiole encore ? Vous aviez vu le "margin" dans le tableau qui permet de mettre des marges extérieures à un bloc, et bien la valeur "auto" va mettre des marges "automatiques". Concrètement, mettre un "margin: auto" permet de centrer un bloc par rapport aux bords d'un autre.
Ca parait abstrait vu comme ça, mais je vous assure que c'est très simple et ce schéma devrait vous aider :

J'espère que vous visualisez mieux. Par contre, pour utiliser le "margin: auto", vous avez besoin de certaines conditions :
- afin que le navigateur puisse centrer votre bloc, il doit connaitre sa largeur, du coup vous devez indiquer une largeur, qu'elle soit en pixels ou en pourcentage (j'aborderais la différence entre les deux un peu plus bas).
- si vous appliquez un "margin: auto;" simple vous ne pouvez pas en plus de ça mettre un "margin-top: 10px (par exemple), si vous voulez pouvoir influer sur les marges hautes et basses de votre bloc, au lieu d'indiquer un "margin: auto;" qui correspond à toutes les marges, indiquez deux margins, droite et gauche, en les mettant en auto, comme ceci :

Code:

<div style="width: 400px; background-color: #272727; border: 3px solid #101010; color: #d0d0d0; text-shadow: none; padding: 4px; font-family: trebuchet; letter-spacing: 1px; text-align: justify; margin-top: -10px; margin-left: auto; margin-right: auto;">Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.</div>

Ce qui donne :





Vous remarquerez que je n'ai pas mis le titre, j'aurais pu l'ajouter mais j'aurais dû le centrer avec les balise "center" car je ne peux pas appliquer de "margin" à une balise de type "inline". En fait, si, il y a un moyen, que je vous explique dès à présent.

Transformer un "inline" en "block"

Comme vous l'indique le titre, il est possible de transformer une balise de type "inline" en balise de type "bloc", en l'occurrence le "span" utilisé pour le titre.

Pourquoi le faire ? Et bien pour lui appliquer des marges, centrer le texte ou l'aligner à droite par exemple... Cela permet aussi davantage d'effets sur les bordures qui prendront alors toute la largeur de la page.

Transformer un inline en bloc par son css

C'est très simple, il suffit d'ajouter ceci dans le css de votre "span" :

Code:

display: block;

Un exemple concret avec un titre :

Votre titre

Code:

<span style="display: block; font-family: arial black; font-size: 24px; color: #535353; border-top: 2px solid #000000; padding: 4px; text-align: center;">Votre titre</span>

Votre titre

Code:

<span style="display: block; width: 400px; font-family: arial black; font-size: 24px; color: #535353; border-top: 2px solid #000000; padding: 4px; text-align: right;">Votre titre</span>

Centrer un texte (contenu dans la bloc) et le bloc lui-même c'est deux choses différentes. Centrer un texte se fait avec un "text-align: center", alors que centrer un bloc se fait avec un "margin: auto".

Une alternative à connaitre : le inline-block

Il y a un inconvénient à transformer un "span" de catégorie "inline" à un "span" en "block", c'est qu'il prend automatiquement toute la largeur, à moins que vous ne le réduisiez par sa taille (width). Du coup, pour un titre c'est bon, mais si vous voulez faire des onglets par exemple, comme ça pourra être le cas plus tard, ou bien simplement des liens sur l'horizontale pour une navigation rapide... ou autre chose dans ce goût là, chacun de vos liens prendra la largeur de la page et renverra les autres à la ligne.

Vous n'allez peut-être pas utiliser cette propriété tout de suite, mais sachez qu'elle existe et peut vous servir, il s'agit d'une sorte de mélange entre les deux états "inline" et "block" qui s'écris du coup très logiquement comme ceci :

Code:

display: inline-block;

Qu'est-ce que cela permet ? Cela permet d'imposer tailles, marges et alignement de texte à un bloc sans qu'il prenne toute la largeur de façon automatique. En clair votre lien ou votre texte reste sur la même ligne que d'autres éléments, mais vous pouvez lui appliquer une marge et d'autres propriétés propres aux éléments "blocs".

Retenez simplement que cela existe, nous y reviendrons plus tard si nécessaire.

Les largeurs en pixel et en pourcentage

J'ai abordé plus haut les deux façons d'indiquer une taille : les pixels ou les pourcentages. Quelle est la différence ?

Les pixels : servent à donner une largeur stricte, il s'agira de 10 pixels ou de 100 pixels, et cette taille ne bougera pas quelle que soit la largeur du contenant (les blocs dans lesquels vous êtes).
Les pourcentages: il s'agit là du pourcentage de quelque chose, vous êtes d'accord, mais de quoi ? Et bien simplement du bloc dans lequel vous êtes. Il peut s'agir de la page entière comme pour la largeur de votre forum, par exemple, mais aussi de la largeur d'un message affiché si vous mettez en forme l'intérieur de ce message. Un bloc qui aura pour largeur 50% aura donc une taille qui correspond à la moitié du bloc dans lequel il se trouve.



Pour vous donner un exemple de situation concrète dans laquelle les pourcentages sont nécessaires je vais prendre l'affichage d'une fiche RPG ou publicité (ou autre chose de mis en forme avec du css) dans le message d'un forum.
Si vous souhaitez faire votre publicité avec une fiche préétablie trouvée sur un forum ou un site qui propose ce genre de codes, vous allez poster cette fiche sur divers forum de pubs, normal. Mais ces forums de pub', ils n'ont pas tous le même design et très certainement que la largeur de leur messages est aussi très différente.
Prenez Never-Utopia par exemple : chaque fois que le design change, la largeur des messages change... et c'est souvent comme ça ailleurs.
Du coup, si votre fiche est faite en pixel, avec par exemple une largeur de 700px, elle rentrera dans des forums qui ont une zone de message de cette largeur là ou supérieure, mais si le message n'a que 600px de largeur, votre fiche dépassera sur le fond, à l'extérieur du message, ce qui n'est guère esthétique !

C'est là qu'interviennent les pourcentages et qu'ils sont nécessaires, même si encore peu utilisés dans ce type de fiche pré-codées... hélas. En effet, mettre une largeur de 90% au lieu d'une largeur de 700px va permettre de modeler la fiche selon la largeur que vous avez dans le message : votre fiche prendra à chaque fois 90% de la largeur totale, c'est à dire un peu moins (histoire de laisser de jolies marges de chaque côté^^) que l'espace total du message.

J'espère que cet exemple est clair pour vous et vous permettra de comprendre quand et pourquoi utiliser ces pourcentages.

Etape précédenteEtape suivante

Merci beaucoup :)

C'était vraiment utile, comme tutoriel. Par contre, parfois, mon image ne marche pas alors que pourtant j'utilise la bonne balise. Est-ce qu'il y à une limitation au niveau de la longueur ? L'image doit-elle avoir un format/extension particulier/particulière ? Est-ce que je n'avais pas bien compris ? Car il marche avec d'autres images.

Est-ce qu'on peut voir ton code, Nuagia ?
Et il faudrait plutôt que tu le postes là : https://www.never-utopia.com/f177-avec-votre-code :)

Merci beaucoup ! Jusqu'à ce que je lise ce cursus je ne comprenais pas la différence entre span et div !

Merci pour ce tuto, il est bien pratique. J'aurais une question : Si je veux faire un fiche de lien, par exemple, le mieux et de la coder en pourcentage ? Et si, je veux faire une signature, je peut utiliser les pixels ? Vu la taille des signatures, ça rentrera, non ?

Hé bien ! Merci beaucoup pour ce tutoriel, grâce à ce dernier, j'ai pu mieux comprendre le centrage et,surtout, l'utilisation des balises : «Margin». C'était un peu flou au début, mais maintenant, je comprends tout à fait !

En plus de ça, j'ai pu créer mon tout premier codage entier pour les rp's ! Titre + Texte.

Je vous remercie énormément !

Un grand merci!!!

Merci !!

C'est super intéressant. ^^

voici un code que j'ai créer :

Code:

<div style="font-family: time new roman; font-size: 14 px; color: #00ff00">
<strong>Nom, prénom : [color=#ff0000]ici[/color]</strong>
<strong>Age : [color=#ff0000]ici[/color]</strong>
<strong>Niveau ( mage, apprentit, sorcier, chevalier ... ) : [color=#ff0000]ici[/color]</strong>
<strong>Raison de participation : [color=#ff0000]ici[/color]</strong>
<strong>Pouvoir principal : [color=#ff0000]ici[/color]</strong>
<strong>Trait de caractère principal ( 1 positif, 1 négatif ) : [color=#ff0000]ici[/color]</strong></div>

et lorsque j'enlève le , il me met les bonnes couleurs et tout.

Pour que ce soit un formulaire que les autres doivent remplirent, je doit mettre le ? Ou je doit l'enlever pour qu'il voient a quoi sa correspond ?

Merci pour ce... tuto ? Fin bref x)
Il y a pas mal de choses que je comprend beaucoup mieux xD

Merci pour cette partie 1.2 !

merci :)

Toujours aussi clair et intéressant !

Un grand merci pour ce partage !

Merci.

Merci pour la suite
J'ai vraiment du mal avec margin et padding... dès que je le vois expliqué, je comprends très bien, mais dès que je dois le coder sans avoir l'explication, je confonds les deux (alors que je connais la différence), ça veut pas rentrer dans ma tête haha !