Cet article décrit et illustre les différents positionnement qu'il est possible d'obtenir en utilisant  éditeur d'articles, pages etc.

1. Première partie : Description des commandes et du code créé.
   
2. Deuxième partie : Illustrations des résultats obtenus

L'image ci-dessous montre les actions possibles sans intervenir directement dans le code.
(le positionnement Gauche Centre Droit se fait en cliquant sur les 3 premiers boutons de l'emplacement n°12 sur l'image précédente)

.

- = - = -

 ..

Utilisation de l'éditeur

Préalable à connaitre (ou à découvrir) :

L'éditeur de contenu est un assistant qui crée à notre place le code source (html) qui sera interprété par les navigateurs pour en faire l'affichage. Nous pouvons également écrire directement dans le code source généré par cet éditeur, pour le modifier, le corriger, ou en ajouter.

Le code source correspondant est accessible en cliquant sur le bouton n°9 < >

- Dans le code source, la balise html  qui correspond à une image est  <img  src=".........."  alt="... "   /> 
qui peut être complétée par des attributs, par exemple   style=" ...."  ou  class=" ....."

par exemple :
<img  style=" ...." src=".........."  alt="... "   />
 

- Quand on utilise les boutons de positionnement, l'éditeur ajoute l'attribut style à l'élément qui est sélectionné.

par exemple :
<p style=" ..du paragraphe..."  > ......texte.......... <img  style=" ..de l'image..."  src="....adresse......"  alt="... "   />.......fin texte...</p>
 

- Le contenu de l'attribut style d'une image, apparait aussi dans la fenêtre d'édition de cette image (on peut donc modifier la case style sans agir directement dans le code source).

- Type de code html contenant 1 image dans 1 paragraphe :
<p>Debut du paragraphe ... <img src="http.... adresse image" alt="info image"  /> ...fin du paragraphe </p>

Comment ça fonctionne ?

⚪ Positionnement d'un paragraphe avec les boutons de l'éditeur (cas ou l'image éventuelle n'est pas sélectionnée). Un attribut style est alors placée dans la balise paragraphe  <p>

- choix gauche > style="text-align: left;"   aligne horizontalement l'ensemble Texte et Image sur la gauche
- choix centré > style="text-align: center;" centre l'ensemble Texte et Image
- choix droite > style="text-align: right;"   aligne horizontalement l'ensemble Texte et Image sur la gauche

⚪ Positionnement par défaut d'une image :  l'image se place dans le texte comme un caractère, mais elle occupe plus de place.
Dans la fenêtre d'édition  l'image est "posée" sur la ligne de texte, mais une fois le contenu "enregistré"  le style css du blog la placera par défaut centrée verticalement sur cette ligne.

⚪ Positionnement d'une image sélectionnée avec les boutons de l'éditeur (positionnement horizontal).

Dans le code source, un attribut style sera ajouté à la balise de l'image <img>

- choix gauche > le style inclura : float-left;  Le texte entoure l'image, il s’écoulera sur le coté droit de l'image, puis en pleine largeur.
- choix centré > l'attribut style inclura : display: block; margin-left: auto; margin-right: auto;  et les lignes de texte seront au-dessus et/ou au-dessous de l'image.
- choix droite >  le style inclura : float-right;  Le texte entoure l'image, il s’écoulera sur le coté gauche de l'image, puis en pleine largeur.

Avec ce type de positionnement, les images sont dites  "flottantes" . Les proriétés float-left; ou float-right; les placent  hors du texte. Celui-ci s'écoule latéralement sur la hauteur de l'image avant de pouvoir disposer à nouveau de la pleine largeur de l'article.

⚠ Pour que le texte qui va suivre débute sous l'image, on a tendance à placer le pointeur de la souris sous l'image, par des appuis successifs sur la touche entrée.  Cela ajoute des éléments de paragraphes vides, inutiles et gênant, car chacun d'eux va générer un espace (hauteur de ligne + marge basse) souvent non souhaité.

✋  Pour éviter cette situation il suffit d'ajouter un attribut style ="clear: both;" dans le paragraphe devant débuter sous l'image.  ex:  <p style="clear: both;" > ... </p>
Alternative : créer dans le css une classe de style avec un nom simple à mémoriser et l'utiliser à chaque fois comme attribut.
ex: <p class="nofloat" > ... </p>
➜ En ajoutant dans le thème-css la règle : .nofloat {clear: both;}

⚪ Positionnement vertical de l'image par rapport à la ligne du texte. Le contenu de l'attribut style=" ... " doit être écrit dans le champ style  de la fenêtre d'édition de l'image (onglet Avancé). On écrira:
 

vertical-align: top; pour que le haut de l'image soit sur la ligne du texte
vertical-align: middle;  pour que le milieu de l'image soit sur la ligne du texte
vertical-align: bottom; pour que le bas de l'image soit sur la ligne du texte

Voir illustrations sur cette page séparées CLIC