IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Habillage de texte autour d'une image


Sujet :

CSS

  1. #1
    Membre actif
    Femme Profil pro
    Étudiant
    Inscrit en
    mai 2013
    Messages
    459
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mai 2013
    Messages : 459
    Points : 203
    Points
    203
    Par défaut Habillage de texte autour d'une image
    Bonjour,
    Je voudrais faire habillage de texte autour d'une image, en utilisant html et css.
    J'arrive à le faire dans une quelconque partir de ma page, comme suit:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div style="float:left;"><img src="images/zozor_classe.png" alt="" /></div><div>Mon texte qui est evidement long</div>

    Mais malheureusement j'ai besoin de faire l'habillage dans une flexbox (qui dans mon cas une grille 2x2), mon code html:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="grid2x2">
      <div class="box box1"> <div> <div style="float:left;"><img src="images/zozor_classe.png" alt="" /></div> Texte1 long  </div> </div>
      <div class="box box2"><div>TEXTE2</div></div>
      <div class="box box3"><div>TEXTE3</div></div>
      <div class="box box4"><div>TEXTE4</div></div>
    </div>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    .grid2x2 {
      min-height: 100%;
      display: flex;
      /*flex-wrap: wrap;*/
      flex-flow: row wrap;
      flex-direction: row;
      background-color: rgba(190, 158, 75, 0.05);
     
     
    }
    .grid2x2 > div {
      display: flex; 
      flex-basis: calc(50% - 0px);  
      justify-content: center;
      flex-direction: column;
     text-align: justify;
     
     
     
    }
    .grid2x2 > div > div {
      display: flex;
      justify-content: center;
      flex-direction: row;
      border-style: solid;
       padding: 25px;
     
    }
     
    .box { margin: auto; 
    }

    pour le moment j'essaye de faire l'habillage que dans box 1.


    Je vous laisse une image pour voir le résultat à l’extérieur de felxbox et à l’intérieur. (1 ce que je veux, 2 ce que j’obtiens à l’intérieur de flexbox 😢 )

    Nom : 196757966_760605001286549_3313713837160904331_n.jpg
Affichages : 68
Taille : 79,1 Ko

    merci d'avance.

    Si vous avez des pistes, svp orientez moi.
    Bonne journée.

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 356
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 356
    Points : 38 268
    Points
    38 268
    Par défaut
    Bonjour,
    on a toujours tendance à faire compliqué, et c'est ton cas la structure peut être allégé :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="grid2x2">
      <div class="box">
        <img src="images/zozor_classe.png" alt="" />
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <div class="box">
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <div class="box">
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
      <div class="box">
        <p>Lorem ipsum dolor sit amet, ...</p>
      </div>
    </div>
    le CSS en devient plus simple à appliquer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .grid2x2 {
      display: flex;
      flex-wrap: wrap;
      min-height: 100%;
      background-color: rgba(190, 158, 75, 0.05);
    }
    .grid2x2 img {
      float: left;
    }
    .grid2x2 .box {
      flex-basis: calc(50% - 1em);
      box-sizing: border-box;
      margin: .5em;
      padding: .5em;
      border: 1px solid #888;
      text-align: justify;
    }
    par exemple !

  3. #3
    Membre actif
    Femme Profil pro
    Étudiant
    Inscrit en
    mai 2013
    Messages
    459
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mai 2013
    Messages : 459
    Points : 203
    Points
    203
    Par défaut
    Merci pour la simplicité de ton code, et son efficacité par rapport à la relativité des tailles (des case d'une même ligne). Malheureusement, l'habillage n'est toujours pas fait, même si j’insère ma photo comme suit:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="images/zozor_classe.png" alt="" style=float:left"; width="100" height="100"/>

    aurais tu une autre piste?
    Merci d'avance

  4. #4
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    5 555
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 5 555
    Points : 13 791
    Points
    13 791
    Par défaut
    Salut
    <img src="images/zozor_classe.png" alt="" style=float:left"; width="100" height="100"/>
    <img src="images/zozor_classe.png" alt="" style="float:left"; width="100" height="100"/>
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

Discussions similaires

  1. texte autour d'une image avec ul .
    Par SpaceFrog dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 20/01/2011, 15h41
  2. Mise en page texte autour d'une image
    Par lisa.a dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/01/2010, 22h55
  3. HTML: texte autour d'une image
    Par midiweb dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 07/02/2006, 09h35
  4. [HTML]Texte autour d'une image
    Par JiJiJaco dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 23/02/2005, 14h35
  5. Texte autour d'une image
    Par C.M dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 08/12/2004, 10h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo