Habillage de texte et image

salut
float et margin çà devrait t'aider.
Modifié par drphilgood (26 Apr 2025 - 18:59)

Bonsoir,
Pour le coup, float ça sert vraiment à ça ; et pas au positionnement pour lequel il était question dans votre sujet précédent.

Bonjour,
donner un bout de code pourrait aider.

<p><img src="Images/Mon_image" width="384" height="394" alt="Son_nom" loading="lazy" class="img align-left"></p>

img.align-left {
	float:left;
	//C'est presque terminé, il vous reste juste à savoir comment mettre ici des marges entre le texte et l'image. Un peu de travail...
	shape-outside: circle(50%);}

shape-outside n'est pas reconnu par le validateur en html5, mais je l'utilise quand même. Il permet au texte de suivre les contours d'une image qui est ronde ou ovale. Sinon, on l'enlève tout simplement et le texte longera verticalement l'image.
Penser à mettre un paragraphe assez long, par rapport à la taille de l'image, et de la mettre à peu près au milieu du texte. Sinon, on risque d'avoir des lignes veuves ou orphelines sous l'image ou au début. Et float:right; mettra l'image à droite.
Il parait que l'on peut le faire avec grid, mais je ne connais pas.

Bongota a écrit :
Il parait que l'on peut le faire avec grid, mais je ne connais pas.

Je suis catégorique : on ne peut pas imiter ce comportement avec grid layout, ni même avec flexbox.
Grid va placer les éléments cible dans une cellule, quand à flex, chaque élément reste un bloc entier. Pour l'un comme pour l'autre on ne pourra pas faire que le texte "s'écoule" autour d'un élément.

Olivier C a écrit :

Je suis catégorique : on ne peut pas imiter ce comportement avec grid layout, ni même avec flexbox.
Grid va placer les éléments cible dans une cellule, quand à flex, chaque élément reste un bloc entier. Pour l'un comme pour l'autre on ne pourra pas faire que le texte "s'écoule" autour d'un élément.

Bonjour,

Je pense qu'il évoque la possibilité d'appliquer un height:XX% à un élément enfant direct d'une "cellule de grille" (ou pseudo)Ce qui dans le cas d'un flottant et shape-outside, permet de caler une forme sur toute la hauteur sans avoir à définir height sur le parent dans la feuille de style.

Démonstration de height:XX% sur un enfant d'une "cellule" https://codepen.io/gc-nomade/pen/xbbLYMb sans définir de height sur le parent.
puis un exemple utilisant cette particularité pour posé une(deux) forme flottante sur toute la hauteur de la "ligne" ,afin de repoussé du texte. https://codepen.io/gc-nomade/pen/JjbwvBe Je pense que c'est ce genre de chose qu'évoque @Bongota .
Du coup on à un exemple de grille en grid sans float mais un usage de flottant pertinent

cdt
Modifié par gcyrillus (27 Apr 2025 - 12:05)

Voilà, c'est ce que je recherchais dans mes fichiers ce matin. Tu as juste été plus rapide que moi gcyrillus
Évidemment, c'est plus lourd qu'un simple float:left, mais c'est aussi plus "moderne" et plus souple quant aux possibilités offertes.
Merci pour le lien.
Pour notre ami AM250, float:left fera bien l'affaire, je pense.

Bonjour,

Je remercie des amis qui se sont donné la peine de s'occuper de ce sujet.

Bien cordialement,

salut
et si tu veux bloquer le float s'il ne s'arrete pas tout seul

tu met un

clear: both;

la ou il faut.