[Résolu] Alignement d'une image à droite ou gauche

Bonjour
je reprends un code qui fonctionne sur un autre site mais le html est différent.
Le résultat est que l'image se trouve bien réduite à 50% mais toujours en dessous du texte
Il me semble que le code css est correct? autre problème ?

.article-details p img {
   float: left;
    margin-right: 1em;
    max-width: 50%;
}

<div class="article-details " itemscope="" itemtype="https://schema.org/Article">
	<meta itemprop="inLanguage" content="fr-FR">
	<div class="article-header-wrap">	
		<div class="article-header">
			<h1 itemprop="headline">Droit</h1>
		</div>
	</div>		
		
	<div class="article-can-edit d-flex flex-wrap justify-content-between"></div>			

	<div itemprop="articleBody">
<p>loremp ipsum mon texte loremp ipsum</p>
<p><img src="/images/xxx" loading="lazy" width="1024" height="682" data-path="local-images:/yyy" style="display: block; margin-left: auto; margin-right: auto;"></p> 	</div>

				</div>

Modifié par HDcms (16 Sep 2025 - 15:19)

Tu as des styles aussi dans le HTML, dans la balise <img>. Ils contredisent ceux de la feuille de styles. Essaies déjà de les supprimer.

Bonjour, il est dans quelle balise le texte?
Comme tu utilises float pour ton image, place le texte dans le même paragraphe que ton image, ainsi l'image flottera à gauche du texte.
Si le texte est dans une autre balise, il faut utiliser une autre technique de positionnement.

Bonjour
@Alainpre
J'ai supprimé tout le style dans la balise , l'image est toujours en bas

@casper2
Effectivement mais comme le html est généré par le cms. Je ne peux pas mettre l'image dans le paragraphe.
Je veux bien l'autre techniquement de positionnement où l'image est dans un autre paragraphe que le texte

HDcms a écrit :
mais toujours en dessous du texte

De quel texte parles-tu ? Peux-tu donner un peu plus de contexte ?
Si le texte se trouve dans le paragraphe qui contient l'image, ce texte est-il avant ou après l'image dans le code ?

C'est bien d'utiliser schema.org mais l'utilisation de balise sémantique est un premier réflexe à avoir. Utilise <header>, <article>,<figure> et l'attribut alt pour les images obligatoire.
Le problème n'est il pas la largeur de ton image à 1024px? Tu ne dis pas ou est le texte en question.
Cela ressemble à des class Bootstrap? Est-ce bien le cas? Si oui le code ci après pourrait convenir :

<article class="article-details " itemscope="" itemtype="https://schema.org/Article">
        <meta itemprop="inLanguage" content="fr-FR">
        <div class="article-header-wrap">
            <header class="article-header">
                <h1 itemprop="headline">Titre de l'article</h1>
            </header>
        </div>

        <div class="article-can-edit d-flex flex-wrap justify-content-between"></div>

        <div class="d-flex flex-wrap" itemprop="articleBody">

            <figure>
                <img src="https://picsum.photos/200/300" loading="lazy" data-path="local-images:/yyy"
                    alt="Description de l'image">
            </figure>
            <div class="p-2">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet, officiis?</p>
                <p>Molestiae quibusdam incidunt dignissimos illo cum ab hic corrupti suscipit!</p>
            </div>
        </div>

    </article>

Modifié par casper2 (16 Sep 2025 - 14:54)

Bonjour

Raphael a écrit :
De quel texte parles-tu ? Peux-tu donner un peu plus de contexte ?
Si le texte se trouve dans le paragraphe qui contient l'image, ce texte est-il avant ou après l'image dans le code ?

Je copie/colle du contenu texte qui met les paragraphes dans des balises P (éditeur tinyMCE) puis j'insère une image d'une bibliothèque toujours dans le cms
L'image est insérée après le balise et reçoit automatiquement une balise P

[quote=casper2]C'est bien d'utiliser schema.org mais l'utilisation de balise sémantique est un premier réflexe à avoir. Utilise &lt;header&gt;, &lt;article&gt;,&lt;figure&gt; et l'attribut alt pour les images obligatoire.
Le problème n'est il pas la largeur de ton image à 1024px? Tu ne dis pas ou est le texte en question.
J'ai remis un peu de texte dans mon code HTML founi

L'image est bien réduite de 50% et à gauche mais ... sous le texte !

Après comme cela fait longtemps que je ne fais plus l'HTML, c'est le cms qui le génère et je n'ai pas beaucoup de marge de manœuvre surtout qu'àprès ce n'est plus moi qui mettra le contenu sur le site
Modifié par HDcms (16 Sep 2025 - 15:20)

Bonjour,

Lors de l'édition de l'article dans le cms, clique sur le bouton "Activer/désactiver l'éditeur" en bas à droite pour afficher le code source html de l'article : tu pourras ainsi corriger le code (supprimer les éventuelles balises p inutiles par exemple).

Lorsque tu ajoutes ton media image via l'éditeur, place le curseur avant le texte dans l'éditeur pour que l'image soit située avant le texte dans le code html (comme dans le précédent message de Raphael) et ou modifie directement le code html en désactivant l'éditeur.

Une solution plus pratique, surtout si ce n'est pas toi qui fera la saisie des articles, serait de créer un champ personnalisée de type media (administrator > Contenus > Champs) afin que l'utilisateur puisse ajouter l'image via ce champ sans ce soucier du code html de l'article.
Il faudra ensuite créer une surcharge de la vue article du composant com_content (administrator > Système > Template du site > Ton template > Créer des substitutions) afin de modifier une fois pour toute le code html affichant l'image.

Bonjour
Effectivement insérer l'image en premier résout mon problème; merci
je comprends les autres solutions mais cela m'amène à trop de complexité alors que le projet dérive depuis un an avec le manque de temps et difficulté de compréhension de l'architecture d'un site par le demandeur

Reste un dernier soucis.
A droite de l'image, j'ai du contenu que je veux déplacer à la ligne suivante un nouveau paragraphe qui comporte une liste par exemple (pour ne pas l’interrompre)

<img ...>
<p>..</p>
<p class="txt-sous-image">Nos domaines d'intervention :</p>
<ul>
<li>..</li>
</ul>

J'essaie de trouver qq chose d'aussi simple en mettant l'image à droite ou gauche

/* alignement img d'un article */
.article-details p img {
   float: left;
    margin-right: 1em;
    max-width: 50%;  
}
.txt-sous-image ul{
flex-wrap: wrap;
}

J'ai essayé plusieurs propriétés mais je n'ai pas bien compris la doc certainement
https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap

Tu dois utiliser la propriété clear pour forcer un élément à s'afficher sous un flottant.

Merci c'est bon