[Résolu] Déplacer une image dans un texte

Bonjour, bonjour.


Bon je sais qu'il est aisément faisable de faire couler du texte autour d'une image grâce à nos jolies propriétés de float. Seulment mes neurones s'amusent à compliquer la chose : est-il possible de faire couler du texte autour d'une image et que cette image ne soit pas en haut du bloc, ni en bas, mais disons à 40% ?

En gros l'idée est que je vais travailler sur des données dynamique (texte et images provenant d'une base de données).
Donc mon code est du style :

<p class="breve"><img src="photo15.jpg" border="0" class="photo" />Mont texte bla bla bla et le tout sur une 30aine de ligne patati etc...</p>

côté css rien de bien méchant:

img.photo{
float:left
}

Tout fonctionne très bien, l'image à gauche, le texte qui courre autour. Seulement je voudrais que cette image soit, non pas en haut, mais disons à 50px du haut par exemple. J'ai tenté un padding-top mais le soucis c'est que le texte ne vient pas courrir au-dessus de l'image.
Alors, oui quand je mets la balise "img" dans le texte (par exemple au second paragraphe) aucun soucis. Mais vu que le texte est dynamique, c'est pas très pratique d'avoir à rechercher la fin du premier paragraphe pour y insérer le tag "img".

Je me demandais donc s'il existait une astuce CSS pour ça...

Merxi d'avance.

Julien
Modifié par jgoetzfr (22 Oct 2007 - 19:16)

Salut,

Je ne vois pas comment tu peux faire si tu ne génères qu'un seul élément paragraphe.
D'ailleurs, si tu n'as qu'un seul paragraphe, fut-il seulement de 30 lignes, ça ne va pas être très confortable à lire.

Donc je pense qu'il faudra de toute façon mettre le texte en forme.
Dans ces conditions tu pourras soit inclure l'image directement, soit insérer dynamiquement l'image à un endroit donné (repère)...
Modifié par Yorick (22 Oct 2007 - 02:46)

Bonjour jgoetzfr,

As tu essayé de mettre l'image à l'intérieur du paragraphe, comme ceci :

<p style="width: 400px;">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Vivamus fermentum pellentesque ipsum. In laoreet mattis nunc. Etiam orci.
Nullam molestie. Curabitur congue, erat iaculis egestas pulvinar, pede nibh
tempor mauris, et mollis quam est vitae orci. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus in tellus.
Pellentesque tempor est ac dui. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Cras euismod condimentum nibh.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nam congue rutrum ipsum. Duis eget felis.
Duis adipiscing. Nullam tincidunt hendrerit ligula. Nulla ullamcorper faucibus
risus. Quisque volutpat dapibus mi. Nullam dictum pulvinar velit. Vivamus
interdum neque et est mollis gravida.[#red]<img alt="jgoetzfr (28K)" src=
"jgoetzfr.jpg" height="223" width="225" style="float: left;" />[/#] Quisque non
ligula. Aenean a odio. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Ut sagittis. In velit odio, ultricies sit amet,
pulvinar in, vulputate nec, turpis. Nulla bibendum arcu et dolor. Vestibulum
laoreet quam vitae neque. Integer volutpat eros vestibulum lectus. Nam aliquam,
lectus imperdiet gravida ornare, ipsum nunc commodo sapien, quis ullamcorper
tellus lectus a tellus. Nulla vehicula suscipit turpis. Praesent suscipit
tempor dui. In hac habitasse platea dictumst. Proin placerat, metus sed
vestibulum tristique, felis orci ornare tellus, ut luctus tellus leo ac lorem.
Integer posuere lectus. Maecenas sit amet dolor.</p>

Hello,

Papillon41 : En fait c'est exactement ce résultat là que je voudrais obtenir mais sans placer l'image dans le texte, en la laissant au début... Mais je pense que j'en demande trop là

Yorick : Tu sembles confirmer mon intuition : c'est sans doute impossible à faire, dommage, dommage...

jgoetzfr: tu n'as pas mis de texte alternatif à ton image. Pour une image de simple décoration ou d'illustration pas indispensable à la compréhension du contenu, un attribut alt vide est souvent pertinent.

Papillon41: tu utilises un attribut alt dans l'exemple que tu donnes, mais son contenu n'est pas pertinent. Il aura pour conséquence d'insérer un contenu textuel paraiste (le nom de l'image et sa taille en Ko... bien entendu, on s'en fiche ) au milieu d'un texte qu'on peut espérer par ailleurs bien structuré.

Maintenant, pour en venir au problème lui-même...

jgoetzfr a écrit :
En fait c'est exactement ce résultat là que je voudrais obtenir mais sans placer l'image dans le texte, en la laissant au début... Mais je pense que j'en demande trop là

Ce résultat (on place l'image centrée verticalement, et le texte vient s'enrober au dessus, sur le côté et en dessous) n'est pas possible en CSS 2.1, et je n'ai pas connaissance de plans en CSS 3 pour permettre ce genre de positionnement (ce serait à explorer...).
Par contre, tu peux sans doute arriver à quelque chose de correct avec une simple surcouche Javascript. Le principe:
1. tu places l'image en début de texte;
2. en Javascript, tu effaces l'image, puis tu génères son jumeau vers le tiers ou 40% du texte environ...

C'est la deuxième étape qui risque d'être pas évidente, mais il me semble qu'il y a moyen de.
Modifié par Florent V. (22 Oct 2007 - 10:32)

Bonjour Florent,

Bien sur tu as raison à propos du "alt".
J'ai mis en forme ce test rapidement avec "HtmlKit", et c'est lui qui a rempli le "alt".

Salut Florent,

Merci pour le conseil sur le alt, je le note et merci aussi pour la pise JS, je ne suis pas un grand fan des solutions JS, donc je vais appliquer une règle que j'ai souvent lue ici : mieux vaut adapter le design aux possibilités de l'outil plutôt que l'inverse


Donc je vais oublier cette histoire de décalage dynamique de l'image.

A+
Julien