Image à gauche avec texte moins haut que l'image. Comment continuer sous l'image.

Bonjour,

html 4.01 - Par exemple :

Code:

---

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

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

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:

---

.paragraphe_illustre { width: 100%; }

---

Code:

---

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

Bonjour,

Voici un exemple pour obtenir l'effet voulu:

Code:

---

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:

---

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.

Bonjour,

Merci rodolphebrd

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

Code:

---

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

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