Comment faire s'écouler un texte le long d'une image, [Résolu]

Bonjour,

J'ai une image dans un paragraphe de taille donnée.
Je voudrais que le texte s'écoule, à côté de cette image, et qu'une fois l'image passée, il continue sous l'image...
Coiffant ce texte, j'ai un titre.
Ca a donc l'air tout simple mais je n'arrive pas avec une solution simple à faire ça =>

http://img359.imageshack.us/img359/6733/24710788vm0.jpg

Voila si vous pouvez m'aider car là je sèche depuis hier soir
Merci
Modifié par pan (18 Oct 2008 - 16:30)

Est-ce qu'un float left sur la dite image peut t'éclairer ?

Elle est déjà en float: left;

L'image se positionne bien.
En fait j'ai trouvé grâce à une balise <span> et display;block. Ce n'est pas très académique mais du coup je crée avec cette balise, un titre que je peux mettre dans mon paragraphe et du coup tout s'aligne correctement et le texte prend sa place...

Qui plus est j'évite d'ajouter des <div> inutiles...
Merci quand même...

pan a écrit :
En fait j'ai trouvé grâce à une balise <span> et display;block. Ce n'est pas très académique mais du coup je crée avec cette balise, un titre ...

En effet, si il s'agit d'un titre un élément hN (selon position dans la hiérarchie) doit être utilisé. Et ne pas passer par un élément neutre (span) pour le simuler.

pan a écrit :
je crée avec cette balise, un titre que je peux mettre dans mon paragraphe

Un titre dans un paragraphe? Hérésie!

Pour être sérieux deux secondes, ta structure est censée ressembler à ça (à quelques adaptations près, peut-être, par exemple le H3 sera peut-être un H2 ou un H4, la classe utilisée n'est pas forcément pertinente, etc.):

<div class="article-preview">
	<img alt="" src="..." class="illustration" />
	<h3>Titre de la news</h3>
	<p>Bla bla.</p>
</div><!-- .article-preview -->

Modifié par Florent V. (18 Oct 2008 - 18:54)

Florent V. a écrit :

Un titre dans un paragraphe? Hérésie!

Pour être sérieux deux secondes, ta structure est censée ressembler à ça (à quelques adaptations près, peut-être, par exemple le H3 sera peut-être un H2 ou un H4, la classe utilisée n'est pas forcément pertinente, etc.):

<div class="article-preview">
	<img alt="" src="..." class="illustration" />
	<h3>Titre de la news</h3>
	<p>Bla bla.</p>
</div><!-- .article-preview -->

Oui oui je sais c'est la méthode que j'avais employé au début mais je voulais me passer des <div>.
Si je veux respecter une structure cohérente je devrais utiliser une <div> mais j'ai 4 pavés au milieu de ma page + une div site + div header + div footer etc...
Du coup je me retrouve avec des tas de <div>
En fait je tatonne et c'est vrai que là c'est plus très cohérent...

Eh bien tu as un bloc (marqué visuellement par une largeur fixe, une bordure, etc.) contenant différents éléments de type bloc (titre et paragraphe), ainsi qu'une illustration. Si ça ça ne mérite pas une DIV, où va-t-on?

La divite aigüe, c'est utiliser des DIV pour tous les éléments en lieu et place d'éléments plus pertinents (un titre, un paragraphe, une liste...). Son corrolaire pourrait être la spanite aigüe (remplacer les titres par des SPAN ). Il n'y a pas de mal à utiliser des DIV lorsque c'est pertinent, notamment comme support pour des styles CSS (bordure qui regroupe divers éléments).

Si c'est une question de méthodologie et de facilité à relire le code, tu peux 1) indenter correctement ton code et 2) utiliser des commentaires pour indiquer ce que tu fermes à chaque </div>, comme dans mon exemple ci-dessus.