Discussion :

[Quoidevieux]

Bonjour,

html 4.01 - Par exemple :

Code :

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

1
2
3
<img src="une_image.png" alt="Une image" height="166" width="128" align="left" border="0" hspace="10">Bla bla bla à gauche, moins haut que l'image.<br>
<br>
<p>Paragraphe suivant.<br></p>

Comment faire pour que le "Paragraphe suivant" reprenne sous l'image, quelque soit la hauteur du texte à côté de l'image, sans passer par une cellule d'un tableau dont la largeur serait 100% ?

Pour l'instant, le "Paragraphe suivant" se poursuit sous le précédent, toujours à côté de l'image.

Merci

[Muchos]

Bonjour et bienvenue.

C'est une question de CSS, et non de HTML.
Vous voulez éviter de vous tourner vers des tables html — et vous avez raison. Mais gardez cette idée, et tournez-vous vers une disposition en tableau avec CSS

[Quoidevieux]

Bonjour Muchos

Merci.

Est-ce que c'est aussi simple que cela (qui fait le job dans mon cas) ou y a t'il quelque chose de plus intelligent à faire ?

Un paragraphe illustré dans le flux, avec illustration à gauche et texte commençant à la hauteur de l'image. Illustration de dimensions quelconques. Texte de longueur quelconque.

Une classe dans la css

Code css :

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

.paragraphe_illustre { width: 100%; }

Code :

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

1
2
3
<div class="paragraphe_illustre"><img src="une_image.png" alt="Une image" height="166" width="128" align="left" border="0" hspace="10">Bla bla bla à gauche, moins haut que l'image.<br></div>
<br>
<p>Paragraphe suivant.<br></p>

Cordialement

[rodolphebrd]

Bonjour,

Voici un exemple pour obtenir l'effet voulu:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.paragraphe_illustre {
	 width: 100%;
	 background-color:red;
}
img, p:first-of-type{
	float:left;
	color:white;
}
p+p {
	clear:left;
}

Code html :

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

1
2
3
4
<div class="paragraphe_illustre"><img src="http://lorempixel.com/200/200" alt="Une image"  align/>
<p>Bla bla bla à gauche, moins haut que l'image.</p>
<p>Paragraphe suivant.</p>
</div>

Les couleurs permettent de visualiser les blocs.

Note : il est judicieux de placer le texte dans des balises P afin de leur donner des styles.
Les balises BR sont autant que possible à éviter afin d'alléger le code Html.

[Quoidevieux]

Bonjour,

Merci rodolphebrd

J'ai ajouté l'héritage sinon cela impact sur la totalité des images des pages.

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
.paragraphe_illustre {
	 width: 100%;
	 background-color:red;
}
.paragraphe_illustre img {
	float:left;
	margin:10px 10px 10px 10px;
	color:white;
}
.paragraphe_illustre p:first-of-type {
	float:left;
}
.paragraphe_illustre p+p {
	clear:left;
}

J'ai ajouté mes marges habituelles autour des images (par exemple 10px).

Il subsiste ce bug irritant depuis des années : si le § à droite de l'image comporte une liste, la liste perd son indentation.

Et j'ai pris une leçon car je ne connaissais pas le "first-of-type" ni le "+".

Cordialement

[rodolphebrd]

Attention toutefois à la compatibilité de first-of-type