[CSS\HTML] aligner un texte a gauche plus long que mon image
Fermétxiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 31 mars 2023 à 10:29
- [CSS\HTML] aligner un texte a gauche plus long que mon image
- Windows 11 barre des taches a gauche - Guide
- Pc long a demarrer - Guide
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Excel cellule couleur si condition texte - Guide
4 réponses
30 mars 2023 à 23:04
Bonjour,
Pour résoudre ce problème, vous pouvez utiliser la propriété CSS float pour positionner l'image à gauche et laisser le texte s'enrouler autour de l'image. Voici la solution basée sur votre code :
<!DOCTYPE html> <html> <head> <style> .image-container { float: left; margin-right: 1em; } .h1 { margin: 2px 1em 0 auto; } </style> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <div class="image-container"> <img src="http://www.irts-pc.net/kcvhfysign/sgnature_mail.png" name="Logo IRTS" height="173" width="202" border="0"> </div> <div class="h1"> <p><span style="color: #008ec6;">Prénom Nom</span> <br> <span style="color: #070707;">Intitulé du poste</span> <br> <span style="color: #070707;"> Pôle </span> <br> <span style="color: #008ec6;">Tél :</span><br> <span style="color: #008ec6;"> Tél Pro :</span><br> <span style="color: #008ec6;"> Numéro de Poste :</span><br> <span style="color: #c5d55e;"> _________________________</span><br> <span style="color: #070707;"> Institut Régional du Travail Social Poitou-Charentes </span><br> <span style="color: #070707;"> 1 Rue Guynemer – 86000 Poitiers </span><br></p> </div> <div style="clear: both;"></div> </body> </html>
Dans cette solution, j'ai ajouté la classe image-container avec un style float: left pour positionner l'image à gauche. Ensuite, j'ai ajouté une marge à droite de l'image avec margin-right: 1em pour donner un peu d'espace entre l'image et le texte. Enfin, j'ai ajouté une <div> avec style="clear: both;" à la fin pour éviter tout problème de chevauchement avec le contenu suivant.
Cordialement
31 mars 2023 à 09:01
Salut à tous,
"continue à être à gauche de mon image alors que mon texte dépassent la longueur de l'image" :
Tu veux dire que le texte reste à gauche en laissant la place de l'image vierge à droite ?
Enfin si j'ai bien compris ce que tu veux faire.
Quel est l’intérêt ?
Le float permet de contourner l'image autrement dit il continuera en dessous de l'image.
Cdlt !
Bonjour mettant mal exprimer je veut en faite que mon texte reste a droite de mon image est ne l'enrobe pas !
31 mars 2023 à 10:29
Salut Axel,
Alors tu aligne ton image à gauche et applique le float=right à ton texte et non à l'image et encore je ne suis pas sur que ça fonctionne.
Sinon c'est l'utilisation de 2 div, un aligné à gauche et l'autre flottant à droite pour le texte.
Rappel: les div sont de type "bloc" dont se positionnent l'un en dessous de l'autre, comme une image, paragraphe etc.... d’où l'importance d'en faire "floater" au moins un.
Cdlt !