Sujet Précédent Sujet Suivant

[CSS\HTML] aligner un texte a gauche plus long que mon image

Fermé
Alex_86124 Messages postés 1 Date d'inscription jeudi 30 mars 2023 Statut Membre Dernière intervention 30 mars 2023 - 30 mars 2023 à 21:21
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

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

Réponse 1 / 4
Niamorii Messages postés 44 Date d'inscription samedi 23 mai 2020 Statut Membre Dernière intervention 1 avril 2023
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
0
Réponse 2 / 4
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 521
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 !
0
Réponse 3 / 4
Axel_124
31 mars 2023 à 10:15

Bonjour mettant mal exprimer je veut en faite que mon texte reste a droite de mon image est ne l'enrobe pas !
0
Réponse 4 / 4
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 521
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 !
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse