[CSS\HTML] aligner un texte a gauche plus long que mon image
txiki Messages postés 6514 Date d'inscription Statut Contributeur Dernière intervention -
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>
4 réponses
-
Bonjour,
Pour résoudre ce problème, vous pouvez utiliser la propriété CSS
floatpour 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-containeravec un stylefloat: leftpour positionner l'image à gauche. Ensuite, j'ai ajouté une marge à droite de l'image avecmargin-right: 1empour donner un peu d'espace entre l'image et le texte. Enfin, j'ai ajouté une<div>avecstyle="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 !
