[CSS\HTML] aligner un texte a gauche plus long que mon image
txiki Messages postés 6819 Statut Contributeur -
Bonsoir je souhaiterai savoir comment comment faire pour que le texte a gauche de mon image continue à être à gauche de mon image alors que mon texte dépassent la longueur de l'image.
Voici le code merci de votre aide
<!DOCTYPE html>
<html>
<head>
<style>
.h1 {
margin: 2px 1em 0 auto;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<p> <img src="http://www.irts-pc.net/kcvhfysign/sgnature_mail.png"
name="Logo IRTS" align="left" height="173" width="202" border="0"> </p>
<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>
</body>
</html>
- [CSS\HTML] aligner un texte a gauche plus long que mon image
- Windows 11 barre des taches a gauche - Guide
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Pc long a demarrer - Guide
- Extraire texte d'une image - Guide
- Image iso - Guide
4 réponses
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
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 !
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 !
