Discussion :

[Huntress]

Bonjour,

J'ai une problématique de mise en page que j'ai du mal à formuler pour une recherche sur Google (rien trouvé dans les tutoriels CSS ou autres forums en tout genre, y compris Développez), d'où ma présence ici.

Voilà ce que je souhaite faire :
Un texte qui coule autour d'une image là tout va bien, mais ce texte doit se terminer par une boîte. Et suivant la longueur du texte la boite est soit à droite de l'image soit sous l'image. En fait celle-ci doit "couler" autour de l'image comme le fait le texte.

Voici 2 illustrations pour y voir plus clair :

Code :

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

1
2
3
4
5
6
7
-----------
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
|         | lorem ipsum lorem ipsum lorem ipsum 
|         |  ----------------------------------------------------------
|         | | Lorem ipsum...                                           |
-----------  ----------------------------------------------------------

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
-----------
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
|         | lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
----------- lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum  
-----------------------------------------------------------------------
|Lorem ipsum...                                                       |
-----------------------------------------------------------------------

Est-ce possible de faire ça en CSS ?

Merci.

[thelvin]

Je dirais avec une boîte inline ou inline-block.

Le problème avec une boîte de type block tout simple, c'est que le float ne repousse à droite que son contenu, pas la boîte elle-même. Et donc les bordures vont passer à travers le float et la bordure gauche sera à gauche du float. Même chose avec un éventuel background.

Je suppose qu'il n'y avait pas d'autre problème ?

[Huntress]

J'ai déjà tenté ce type de positionnement, ainsi que le comportement "table" et rien n'y fait.

J'ai aussi tenté de faire des "effets spéciaux" en faisant passer cette fameuse boite sous l'image sur l'axe Z, et ça marche... sauf que si la boite est "à cheval" (à la limite basse de l'image) on la voit dépasser de sous l'image, et du coup on voit tout de suite l'arnaque.

[Huntress]

Okééééééééééééééééééééé.

J'ai complètement réécrit mon markup et ça marche, donc il doit y avoir quelque chose de moisi dans mon intégration

J'arrange mon code pour voir si ça fonctionne toujours et je mets ce sujet en résolu.

[Huntress]

Ah non en fait ça ne marche pas, le fameux cas "à cheval" dont je parlais... on voit bien la div sous l'image

Voici mon code :

Code html :

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

1
2
3
4
5
6
7
8
<div style="position:relative;width:500px;background:pink;">
	<img  style="position:relative;float:left;margin:0 10px 10px 0" src="images/IMAGE.jpg" alt="img" />
	<p>du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
	du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
	du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
	</p>
	<div style="position:inline-block;background:gold;height:29px;line-height:29px;">du texte</div>
</div>

[Huntress]

Bon le code que j'ai posté est bourré de fautes, j'ai confondu "position" et "display" sûrement la fatigue due à ce problème

Quoiqu'il en soit après pas mal de tests en partant de ce bout de code (sans les fautes) je n'arrive toujours pas à ce que je veux. En fait je ne veux pas que cette boite "suive" le texte... je veux qu'elle soit juste en dessous. et qu'elle adapte sa largeur suivant son niveau par rapport à l'image.