[HTML] espace entre text et image

Version imprimable

24/03/2008, 10h08
{F-I}

[HTML] espace entre text et image
Salut à tous,

J'ai essayé pas mal choses sans vraiment réussir donc je viens à vous...

Pour commencer, avant tout je vous montre l'aperçu initial

http://images.hack.free.fr/images/74wnxd8f.jpg

cette rendu a pour les codes suivants :
Code:

1 2 3 <h2>bienvenue</h2> <img src="images/img5.jpg" alt="" width="102" height="102" class="image" /> <p class="indent">Fusce in turpis vitaeblablablablablablablabla</p>
Code:

1 2 3 4 5 6 7 8 9 10 .indent { margin-top: 0; margin-left: 130px; } .image { float: left; margin: 0; border: solid 2px #663300; }
Je souhaite y arriver à réduire un peu l'espace vide qui se trouve entre image (fond bas) et début du texte qui se trouve au dessus (tracé en rouge)

http://images.hack.free.fr/images/cr6puqor.jpg

Je veux par exemple réduire d'un ligne de texte.

Je vous remercie beaucoup d'avance ;)
24/03/2008, 12h07
Thes32
dans la classe de l'image essai de définir une marge négative vers le bas :
Code:

1 2 margin-bottom:-XXpx;
24/03/2008, 12h30
{F-I}

Merci de t'avoir intéressé de mon cas, alors j'ai remplacé de margin: 0px; par margin-bottom: -50px; et je ne vois aucun changement.
24/03/2008, 22h29
Erwan31

Bonsoir,
le code simplifié que tu fournis ne peux pas correspondre à l'exemple donnée en image.
Pour que le texte passe dessous l'image doit être imbriquée dans le
<p> hors ici ce n'est pas le cas.

Et la solution de thes32 est pourtant à ma connaissance la seule envisageable si tu souhaites conserver le même interlignage de texte.

Pourrais tu fournir donc le bon code?
25/03/2008, 08h55
Thes32

Citation:

Envoyé par {F-I}

j'ai remplacé de margin: 0px; par margin-bottom: -50px; et je ne vois aucun changement

tu a remplacer où? dans la classe image ou tu l'as défini dans img?

Citation:

Envoyé par thes32

tu a remplacer où? dans la classe image ou tu l'as défini dans img?

Dans la classe image.

Citation:

Envoyé par Erwan31

Bonsoir,
le code simplifié que tu fournis ne peux pas correspondre à l'exemple donnée en image.
Pour que le texte passe dessous l'image doit être imbriquée dans le
<p> hors ici ce n'est pas le cas.

Et la solution de thes32 est pourtant à ma connaissance la seule envisageable si tu souhaites conserver le même interlignage de texte.

Pourrais tu fournir donc le bon code?

Si tu veux, voici le code complet (concerné seulement)
Code:

1 2 3 4 <div id="colOne"> <h2>bienvenue</h2> <img src="images/img5.jpg" alt="" width="102" height="102" class="image" /> <p class="indent">Fusce in turpis vitae nulla rutrum adipiscing. <strong>Ut urna. Maecenas at tellus.</strong> Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p></div>
Code:

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 32 33 34 35 36 37 38 #colOne { float: right; width: 500px; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: Georgia, "Times New Roman", Times, serif; color: #E8D6B4; } h2, h3 { margin: 0 0 20px 0; padding: 0 0 10px 0; background: url(images/hr_corp_a.gif) repeat-x left bottom; text-transform: lowercase; letter-spacing: -1px; } h2 { font-size: 25px; } p, ol, ul { line-height: 160%; } .indent { margin-top: 0; margin-left: 130px; } .image { float: left; margin: 0; border: solid 2px #663300; }
Je vous remercie de vos futurs réponses ;)

25/03/2008, 18h19
Erwan31

Toujours le même code html, tu dois fournir la totalité du code XHTML ou mieux mettre à disposition une page en ligne.

Concernant la mise en ligne, je vais m'occuper (pas tout de suite je ne peux pas)

Voici le code HTML version COMPLETE

Code:

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
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License, avec mes grosses modifications apportés en particulière au niveau de l'optimisation du codage
 -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Prog Créatif</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link href="design.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
<div id="wrapper">
	<div id="header">
    	<?php include('includes/zone_idef.php'); ?>
		<h1>Prog</h1>
		<h2>Cr&eacute;atif</h2>
		<?php include('includes/menus_header.php'); ?>
	</div>
</div>
<div id="content">
	<div id="colOne">
		<h2>bienvenue</h2>
		<img src="images/img5.jpg" alt="" width="102" height="102" class="image" />
		<p class="indent">Fusce in turpis vitae nulla rutrum adipiscing. <strong>Ut urna. Maecenas at tellus.</strong> Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
		<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. <strong>Praesent</strong> a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
		<h3>Lorem Ipsum Dolor</h3>
		<p>Fusce in turpis vitae nulla rutrum adipiscing. Ut urna. Maecenas at tellus. Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
		<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. Praesent a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
	</div>
	<?php include('includes/col_accueil.php'); ?>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>

25/03/2008, 19h48
Erwan31

Non ce n'est pas le code interprété (sans includes php)

salut, je crois que ça t'iras
une petite modification du style

Code:

1
2
3
4
5
6
 
       .indent {
	margin-top: 0;
	margin-bottom: -10px;
	margin-left: 130px;
}

puis dans la page html

Code:

1
2
3
4
5
6
7
8
9
10
<div id="content">
	<div id="colOne">
		<h2>bienvenue</h2>
		<img src="IMG/rubon88.jpg" alt="" width="102" height="102" class="image" />
		<p class="indent">Fusce in turpis vitae nulla rutrum adipiscing. <strong>Ut urna. Maecenas at tellus.</strong> Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est,</p><p> consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
		<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. <strong>Praesent</strong> a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
		<h3>Lorem Ipsum Dolor</h3>
		<p>Fusce in turpis vitae nulla rutrum adipiscing. Ut urna. Maecenas at tellus. Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
		<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. Praesent a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
	</div>

ton paragraphe était très long d'où l'impossibilité de réaliser ce que tu cherchais. regarde la partie soulignée

ça va j'attends ta réaction!

26/03/2008, 09h36
Candygirl
Ton espace est dû à ta séparation manuelle de ton texte en 2 paragraphes, qui n'a d'ailleurs censément pas à être faite, me semble-t-il vu le rendu avec les 2 textes collés comme un paragraphe:
Code:

1 2 <p class="indent">Fusce [...]</p> <p>Sed [...]</p>
D'ailleurs il suffit que la taille de la police soit modifiée pour que ta "marge" augmente ou diminue puisque ton premier paragraphe occupera alors un nombre de lignes différent.

Donc tu devrais avoir tout dans un seul paragraphe:
Code:

1 2 <p>Fusce in [...] Aenean quis lacus. </p>
et jouer avec les marges sur ton images:
Code:

1 2 3 4 5 .image { float: left; margin-right:28px; border: solid 2px #663300; }
Edit: le code que tu donnes ne correspond pas exactement au rendu que tu as mis en screen :koi: bref, suivant comment laisse ta séparation entre les 2 paragraphes, mais joue avec la marge sur l'image et non pas ta class indent sur le paragraphe de manière à ce que ton texte entoure correctement l'image.

Pour commencer, je poste le code complète (avec php incluse)

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Prog Créatif</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link href="design.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
<div id="wrapper">
	<div id="header">
<div id="zone_idef">
	S'inscrire | Se connecter
</div>
<h1>Blabla</h1>
		<h2>TataTitiToto</h2>
<ul>
	<li class="first"><a href="xx.php" accesskey="1" title="">xx</a></li>
	<li><a href="xx.php" accesskey="2" title="">xx</a></li>
    <li><a href="xx.php" accesskey="3" title="">xx</a></li>
	<li><a href="xx.php" accesskey="4" title="">xx</a></li>
	<li><a href="xx.php" accesskey="5" title="">xx</a></li>
	<li><a href="xx.php" accesskey="6" title="">xx</a></li>
	<li><a href="xx.php" accesskey="7" title="">xx</a></li>
</ul></div>
</div>
<div id="content">
	<div id="colOne">
		<h2>bienvenue</h2>
		<img src="images/img5.jpg" alt="" width="102" height="102" class="image" />
		<p class="indent">Fusce in turpis vitae nulla rutrum adipiscing. <strong>Ut urna. Maecenas at tellus.</strong> Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
		<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. <strong>Praesent</strong> a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
		<h3>Lorem Ipsum Dolor</h3>
		<p>Fusce in turpis vitae nulla rutrum adipiscing. Ut urna. Maecenas at tellus. Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
		<p>Sed tempor pede nec est. Aenean accumsan vestibulum nibh. Aliquam erat volutpat. Praesent a odio. Proin at libero in tellus scelerisque aliquam. Morbi at nisi. Ut at erat vel massa vulputate ultrices. Aliquam suscipit. Proin consequat, felis eu pulvinar adipiscing, augue lorem vestibulum turpis, a ornare diam lectus et neque. Aenean quis lacus. </p>
	</div>
 id="col_gauche">
	<h3>Accessibilit&eacute;</h3>
	<ul>
		<li class="first"><a href="http://www.temesis.com/" title="Lien externe vers Temesis">Temesis</a></li>
		<li><a href="http://www.accessiweb.org/" title="Lien externe vers Accessiweb">Accessiweb</a></li>
	</ul>
</div>
</div>
<div id="footer">
	<p>Plan du site | Sitemap</p>
    <p>XHTML &amp; CSS</p>
</div>
</body>
</html>

Code:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	padding: 0;
	margin: 0;
}
 
body {
	margin: 0;
	padding: 0;
	background: #311C00 url(images/background_corps.jpg);
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9B8767;
}
 
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #E8D6B4;
}
 
h2, h3 {
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	background: url(images/hr_corp_a.gif) repeat-x left bottom;
	text-transform: lowercase;
	letter-spacing: -1px;
}
 
h2 {
	font-size: 25px;
}
 
h3 {
	font-size: 17px;
	text-decoration: none;
}
 
h3 a {
	text-decoration: none;
}
 
h3 a:hover {
	text-decoration: none;
	color: #B6E13A;
}
 
p, ol, ul {
	line-height: 160%;
}
 
ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
 
ul li {
	padding: 2px 0 5px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
ul li.first {
	background: none;
}
 
a {
	color: #D9C09A;
}
 
a:hover {
	text-decoration: none;
	color: #FF0000;
}
 
strong {
	color: #D9C09A;
}
 
#wrapper {
	background: url(images/background_header.jpg) repeat-x;
}
 
/* Header */
 
#zone_idef {
	float: right;
	margin-top: 10px;
}
 
#header {
	width: 730px;
	height: 250px;
	margin: 0 auto;
}
 
#header * {
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	padding: 30px 0 0 0;
	letter-spacing: -2px;
	font-size: 36px;
}
 
#header h2 {
	float: left;
	padding: 50px 0 0 6px;
	background: none;
	font-size: 12px;
	font-weight: normal;
}
 
#header h2 a {
	text-decoration: none;
}
 
#header ul {
	float: right;
	margin: 0;
	padding: 90px 0 0 0;
	list-style: none;
}
 
#header li {
	display: inline;
}
 
#header li a {
	display: block;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #7DD2FA;
}
 
#header li.first a {
	border: none;
}
 
/* Content */
 
#content {
	width: 730px;
	margin: 0 auto;
}
 
#colOne {
	float: right;
	width: 500px;
}
 
#col_gauche {
	float: left;
	width: 184px;
}
 
#col_gauche h3 {
	margin-top: 10px;
	text-align: left;
}
 
/* Footer */
 
#footer {
	clear: both;
	width: 730px;
	margin: 20px auto;
	padding: 20px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
#footer p {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	text-align: center;
}
 
.contenu_article {
	background-color: #fff;
	padding-top: 20px;
	padding-left: 5%;
	padding-right: 5%;
	width: 90%;
}
 
.indent {
	margin-top: 0;
	margin-left: 130px;
}
 
.image {
	float: left;
	margin: 0;
	border: solid 2px #663300;
}

Juste pour information, ne vous faites pas trop attention avec .contenu_article, c'est juste un test perso sans rien de plus

Bon, maintenant je vais voir la solution de thes32 pour commencer ensuite on verra (si ca marche c'est bon, sinon je regarde avec Candygirl

26/03/2008, 16h21
Erwan31
Ok ta structure manque de robustesse : mettre l'image DANS le premier parapgraphe et non à l'extèreur, ça permettra de faire couler le texte autour de l'image quelque soit la longeur de ton paragraphe.

Ce qui donne::

CSS
Code:

1 2 3 4 5 .image { float: left; margin-right: 22px; border: solid 2px #663300; }
et

Code:

<p><img src="CollegeMailer2_files/nyustern.gif" alt="" width="102" height="102" class="image" />Fusce in turpis vitae nulla rutrum adipiscing. <strong>Ut urna. Maecenas at tellus.</strong> Duis pellentesque massa fermentum diam blandit imperdiet. Sed posuere vulputate magna. Proin placerat, nisl ut mollis tempus, magna nibh fringilla est, consequat cursus diam metus vel dolor. Fusce ut nulla sit amet mi sodales dictum. Proin tempor purus quis est. Donec nunc felis, hendrerit non, facilisis consectetuer, faucibus nec, leo. Etiam vestibulum luctus nibh. In hac habitasse platea dictumst. Vivamus luctus magna. Integer aliquam feugiat massa.</p>
26/03/2008, 16h22
{F-I}

àthes32, voici le rendu AVANT d'avoir modifié le code :

http://img407.imageshack.us/img407/7008/001xq7.jpg

Et celui APRES (en gardant -10px)

http://img411.imageshack.us/img411/1599/002oo9.jpg

Remarque, avec -10px, ça ne suffit pas, il faut que je descend encore mais comme qu'avec -10px, ça foire déjà, je ne sais pas de ce que je devrais faire
26/03/2008, 16h31
{F-I}

Je suis vraiment désolé pour ce multi-post...

Bref, avec la solution donné par Candygirl, elle marche bien et en effet plus simple...

Voici un aperçu ;)

En ajoutant margin-right: 23px pour la classe .image et en supprimant la classe de class="indent"

http://img210.imageshack.us/img210/2480/003fq4.jpg

Merci beaucoup à vous.

Je suis toujours là si vous avez des remarques / etc.

Bon après-midi
26/03/2008, 16h32
Erwan31

C'est aussi la solution que je te proposais.
26/03/2008, 16h49
{F-I}

En effet c'est vrai, au moment d'où j'ai posté mon dernier post (16h32), ton message n'apparait pas...

Bref, merci beaucoup à toi et bien entendu aux deux autres aussi (Candygirl et thes32)

Passez un bon après-midi
27/03/2008, 19h54
dug

juste pour rappeler de passer le post en Résolu ;)
27/03/2008, 20h06
{F-I}

Ce post est déjà en résolu...