Discussion :

[{F-I}]

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



cette rendu a pour les codes suivants :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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)




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

Je vous remercie beaucoup d'avance

[Thes32]

dans la classe de l'image essai de définir une marge négative vers le bas :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
margin-bottom:-XXpx;

[{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.

[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?

[Thes32]

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?

[{F-I}]

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

Dans la classe image.

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 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
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