positionner image avec comportement float(en bas à droite)

salut,

voici ce que j'aimerai obtenir (fait avec the gimp évidemment)
et voici la situation actuelle.

la difficulté réside dans l'image en bas à droite de la boite de texte.

- positionner cette image en bas droite ne pose pas de problème en utilisant le positionnement absolute ou relative, ou tout simplement en mettant l'image après le texte dans le code HTML.
Mais le positionnement sort l'image du flux, et le texte ne la contourne pas(passe dessus ou dessous).

- pour faire que l'image soit englober par le texte, je n'ai trouvé que les float, d'ailleurs cela fonctionne très bien avec mon image en haut à gauche. Mais le float exclue la possibilité de positionnement vertical, et mon image de droite restera désespérément en haut ou en dessous du texte en fonction que l'image est avant ou après le texte dans le code HTML.

le but donc, positionner une image en bas à droite d'un texte de tel façon que ce texte englobe cette image en effectuant un retrait vers la gauche.

--différentes choses auxquelles on pensent et que j'ai essayé:
-un padding-right sur le texte s'appliquerait sur toute la hauteur de la boite de texte(ça n'est pas l'effet recherché).
-mettre l'image en float a la fin du texte via la pseudo class :after revient à mettre une image de type en ligne à la fin du texte.
-mettre l'image en float dans une div positionner en bas ne fonctionne évidemment pas non plus.
-séparer le texte dans deux boite: une pour le haut du texte et une de la hauteur de l'image. Cela fonctionne mais oblige à bricoler dans le contenue et le code html, ce qui n'est pas adapté à un texte variable et mis en ligne par de simples utilisateurs via des formulaire.

merci d'avoir lu jusque là, et pour vos suggestions si vous en avez :aie:
bye

Salut e-rwan,

J'ai regardé un peu ton code, et j'ai trouvé une méthode d'écriture HTML/CSS plus simple pour obtenir le résultat que tu souhaites. En fait, je me complique pas la vie, j'ai créé une image background pour tout le container du site qui contient les coins arrondis (cela permet de les voir sur tous les navigateurs), les notes, les textes "Les Résonances". et ensuite j'ai créé 3 gros div (gauche, main et droite) avec leur sous-éléments. Un peu de CSS sur tout ca et voilà le travail :)

Pièce jointe 62850

Tu trouveras dans le ZIP le code et les images pour t'inspirer de ce que j'ai fait et le refaire à ta sauce... ;)

salut dionyzos
merci pour le mal que tu t'es donné, je desesperais d'obtenir une réponse, j'utiliserais surement certaine de tes modif pour le reste du site.
cependant au niveau de la mise en forme du texte, elle oblige la encore à entrer le texte directement dans le html puisqu'il doit être adapté aux balises <p class=prem> et <p class=dern>, or le texte sera appelé d'une base mysql qui sera modifié par des utilisateurs lambda via des formulaires php, donc pas de possibilité de diviser le texte, sauf en passant par une fonction php subtr() qui donne le résultat que l'on voit actuellement sur mon site, mais qui manque cruellement de précision(ne prend pas en compte les retours à la ligne par exemple)

après, je vois que tu as mis des balises <p> pour chaque paragraphe, peut être qu'une autre fonction php ou javascript peut détecter les paragraphes et le entourer? après, pas besoins de classes prem et dern, les selecteur css > et + devrait suffire pour spécifier des caractéristiques au premier et dernier paragraphe. mais la encore il ne faudrait pas que le dernier paragraphe soit trop long...

Citation:

---

Envoyé par e-rwan

... cependant au niveau de la mise en forme du texte, elle oblige la encore à entrer le texte directement dans le html puisqu'il doit être adapté aux balises <p class=prem> et <p class=dern>, or le texte sera appelé d'une base mysql qui sera modifié par des utilisateurs lambda via des formulaires php, donc pas de possibilité de diviser le texte, sauf en passant par une fonction php subtr() ...

---

Justement, il est possible de faire un traitement PHP relativement simple (via une boucle) pour identifier les paragraphes, et les entourer par de <p></p>, et d'ajouter deux sous conditions dans la boucle pour tester s'il s'agit du 1er paragraphe ou du dernier, et donc leur attribuer la classe "prem" ou "dern".
Mais là on s'écarte grandement de la CSS ;)

Citation:

---

Envoyé par e-rwan

... après, pas besoins de classes prem et dern, les selecteur css > et + devrait suffire pour spécifier des caractéristiques au premier et dernier paragraphe. ...

---

Attention, ce type de sélecteurs CSS n'est pas compatible avec tous les navigateurs, notamment IE.

c'est malheureusement le constat auquel je me suis inéluctablement confronté jusque là pour ce cas précis: le css ne suffit pas...
et moi qui croyait en la toute puissance du CSS!!!

Le CSS EST puissant, le problème vient des navigateurs (IE) qui n'interprète pas toute la puissance du CSS justement.

Il existe beaucoup de propriétés CSS puissantes mais méconnues car ignoré par IE :(

:first et :last en font (entre autres) partie

certes, mais dans mon cas, le css même css3 ne suffit pas à obtenir le résultat que je cherche, sans l'aide de php.
j'ai essayé en effet :before et :after, mais l'imge se met en-ligne et n'a d'effet que sur la derniere ligne.