Position normale en HTML (texte entre <b> et </b>)

Bloc de texte normal en HTML : J'ai choisi de vous conduire en premier vers la réalisation d'une série de pages simples utilisant le CSS, et de devenir de plus en plus technique et spécifique vers la fin. Je pense ainsi vous encourager à maîtriser ce langage et réaliser des documents efficaces et attractifs.

Position relative en CSS

Code 1 dans BODY

<DIV style="position: relative ; top: 30px ; left: 20px ; color: black ; " > ...... </DIV>

Résulat exemple 1 du texte en CSS (c'est pas l'idéal comme rendu !)

C'est pas très joli de laisser le texte coller au bord droit de la fenêtre, et pour y remédier nous allons ajouter une propriété WIDHT, qui spécifie la largeur du contenu des boîtes.

Code 2 dans BODY

<DIV style="position: relative ; top: 30px ; left: 20px ; color: black ; width: 80% ; " > ...... </DIV>

Résultat exemple 2 de texte en CSS (il y a du progrès !)

C'est pas très joli encore et pour parfaire la présentation , nous allons ajouter la propriété "text-align: justify", qui justifie la largeur du texte d'un paragraphe.

Code 3 dans BODY

<DIV style="position: relative ; top: 30px ; left: 20px ; color: black ; width: 80% ; text-align: justify ; " > ...... </DIV>

Résultat exemple 3 de texte en CSS (voilà qui va nettement mieux)

Et pour terminer provisoirement ce type de positionnement, voici la boîte en couleur (et sa propriété) qui représente le "strict minimum" sans le "border" ni "padding", mais avec l'environnement du "marging".

Code 4 dans BODY

<DIV style="position: relative ; top: 30px ; left: 20px ; color: black ; width: 80% ; text-align: justify ; background-color: yellow ;"> ...... </DIV>

Résultat exemple 4 de texte en CSS (voilà qui termine la démonstration)