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 :

Espace une image et un texte


Sujet :

CSS

  1. #1
    Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Mai 2019
    Messages : 4
    Points : 4
    Points
    4
    Par défaut Espace une image et un texte
    Bonjour,
    J'ai un problème, j'ai mit une image sur mon site et à droite de cette image j'ai mit du texte mais il est coller à l'image et je ne sais pas comment l'espace
    Voici le code HTML :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <p class="flotte-left"><img width="350" border="1" style="border-color:#ff0000;" src="../photo.jpg"/></p>
    				<p style="line-height:20px;">
    				textetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetexte
    				</p>

    Voici le code CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .flotte-left {
    	float:left;
    	margin-bottom:5px;
    }
     
    .flotte-right {
    	float:right;
    	margin-bottom:5px;
    }
    Et voici sur la page :
    Nom : Capture2.JPG
Affichages : 182
Taille : 15,1 Ko

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

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

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 067
    Points : 17 155
    Points
    17 155
    Par défaut
    Salut

    dans la partieStyle ajoutes margin-left:5px (5 pixels ou plus ou moins).

    Autre chose, pour le code, faire un copier puis coller le code entre les balises [CODE] ici le code [/CODE] , cela permet à l'aidant de copier/coller aussi ton code pour faire des essais plutôt que de retaper le code que tu nous fais voire.
    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 ← ← 👈

  3. #3
    Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Mai 2019
    Messages : 4
    Points : 4
    Points
    4
    Par défaut
    j'ai modif le code mais par contre sa ne marche pas !

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    montre le code CSS associé (class="flotte-left" ?)

  5. #5
    Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Mai 2019
    Messages : 4
    Points : 4
    Points
    4
    Par défaut
    j'ai rajouté le code css

  6. #6
    Invité
    Invité(e)
    Par défaut
    On va mieux structurer tout ça :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="clearfix">
      <img class="img-left" src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201"/>
      <p>Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum.</p>
      <p>Quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos...</p>
    </div>
    <hr />
    <div class="clearfix">
      <img class="img-right" src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201"/>
      <p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
      <p> Statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.</p>
    </div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .clearfix::before, .clearfix::after { display:table; content:''; }
    .clearfix::after { clear:both; }
     
    .img-left {
    	float:left;
    	margin:0 10px 5px 0;
    }
    .img-right {
    	float:right;
    	margin:0 0 5px 10px;
    }
    p { margin:5px 0; }
    Remarque : .clearfix est une "astuce" TRÈS PRATIQUE (et très utilisée) qui permet de "remettre dans le flux" les élément en float (left/right).
    Essaie avec et sans, pour voir la différence.

  7. #7
    Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Mai 2019
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Mai 2019
    Messages : 4
    Points : 4
    Points
    4
    Par défaut
    Merci c nickel !

  8. #8
    Invité
    Invité(e)
    Par défaut
    Pour aller plus loin...

    On peut utiliser les balises <figure> et <figcaption (légende de l'image) :

    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
    16
    17
    18
    19
    <div class="clearfix">
      <figure class="img-left">
        <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201"/>
        <figcaption>légende de la photo</figcaption>
      </figure>
      <p>Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum.</p>
      <p>Quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos...</p>
    </div>
     
    <hr />
     
    <div class="clearfix">
      <figure class="img-right">
        <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201"/>
        <figcaption>légende de la photo</figcaption>
      </figure>
      <p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
      <p> Statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.</p>
    </div>
    Avec le même CSS.

    A NOTER : les classes "img-left" et "img-right" sont appliquées à <figure>
    Dernière modification par ProgElecT ; 19/05/2019 à 16h13.

  9. #9
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 739
    Points
    4 739
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 27/04/2006, 14h33
  2. inserer une image et du texte dans une Jlist
    Par cellestion dans le forum Composants
    Réponses: 4
    Dernier message: 04/03/2006, 00h47
  3. Centrer une image et un texte dans un div
    Par flexx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 17/01/2006, 21h11

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