Espace une image et un texte

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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 :
Pièce jointe 476089

18/05/2019, 17h27
ProgElecT

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.
18/05/2019, 17h32
LoanF

j'ai modif le code mais par contre sa ne marche pas !
19/05/2019, 09h54
Invité

Bonjour,

montre le code CSS associé (class="flotte-left" ?)
19/05/2019, 10h40
LoanF

j'ai rajouté le code css

On va mieux structurer tout ça :

Code:

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:

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.

19/05/2019, 13h27
LoanF

Merci c nickel !

Pour aller plus loin...

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

Code:

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>

19/05/2019, 14h40
psychadelic

https://developer.mozilla.org/fr/docs/Web/CSS/padding