Position du texte par rapport aux images

Général
1

Bonjour,

Comme indiqué dans le sujet, j’ai un problème de positionnement du texte par rapport aux images.

Les images font 255 px de large et le texte les accompagnant est court.

Je positionne les images dans l’article avec

<img1|left> Mon texte 1

<img2|left> Mon texte 2

Un autre texte

Encore un autre texte …

Le résultat : j’ai img2 qui se colle à droite de img1 juste en dessous de Mon texte 1
Et à droite de img2, j’ai Mon text2 avec en dessous mais toujours à droite de IMG2, Un autre texte, puis Encore un autre texte …

Exemple : (Si c’est plus clair ?? La répétition de IMG1 et de IMG2 est censée représentée leur taille en hauteur par rapport au texte)

IMG1 Mon texte 1
IMG1
IMG1 IMG2
IMG1 IMG2 Mon text2
IMG2 Un autre texte
IMG2 Encore un autre texte …

Comment avoir :

IMG1 Mon texte 1
IMG1
IMG1
IMG1

IMG2 Mon text2
IMG2
IMG2
IMG2

Un autre texte

Encore un autre texte …

Merci de votre aide

2

C’est un comportement normal, puisque le filtre |left ajoute un comportement flotant au paragraphe contenant l’image.
Mais la hauteur de ce paragraphe ne prend pas en compte la hauteur de l’image.

Pour arriver à tes fins, dans l’édition de ton article, tu peux rajouter ceci entre tes deux paragraphes

Je pense que ça n’est pas très académique, et que les spipiens puristes ne manqueront pas de me reprendre…
mais je suis moi aussi preneur d’une solution plus propre…(sans éditer les css originaux)

Hervé

« Pierre Roger » <pierre.roger@emera-fr.com> a écrit dans le message de news:4A45B6C8.5030908@emera-fr.com…
Bonjour,

Comme indiqué dans le sujet, j’ai un problème de positionnement du texte par rapport aux images.

Les images font 255 px de large et le texte les accompagnant est court.

Je positionne les images dans l’article avec

<img1|left> Mon texte 1

<img2|left> Mon texte 2

Un autre texte

Encore un autre texte …

Le résultat : j’ai img2 qui se colle à droite de img1 juste en dessous de Mon texte 1
Et à droite de img2, j’ai Mon text2 avec en dessous mais toujours à droite de IMG2, Un autre texte, puis Encore un autre texte …

Exemple : (Si c’est plus clair ?? La répétition de IMG1 et de IMG2 est censée représentée leur taille en hauteur par rapport au texte)

IMG1 Mon texte 1
IMG1
IMG1 IMG2
IMG1 IMG2 Mon text2
IMG2 Un autre texte
IMG2 Encore un autre texte …

Comment avoir :

IMG1 Mon texte 1
IMG1
IMG1
IMG1

IMG2 Mon text2
IMG2
IMG2
IMG2

Un autre texte

Encore un autre texte …

Merci de votre aide

3

En attendant une réponse satisfaisante peut-être avec des CSS mais comment les inclure dans le texte d’un article SPIP en respectant la syntaxe SPIP ?

Donc j’ai provisoirement utilisé une table mais ce n’est pas satidfaisant au point de vue de l’accessibilité.

Ma question reformulée pourrait être :

Comment utiliser les styles CSS pour positionner les images et le texte …?

Merci de votre aide

Pierre Roger a écrit :

4

Essayé <br style="clear:both"/> après le texte1
---- Envoyé avec BlackBerry® d'Orange ----

-----Original Message-----
From: Pierre Roger <pierre.roger@emera-fr.com>

Date: Sat, 27 Jun 2009 10:11:02
To: SPIP<spip@rezo.net>
Subject: Re: [Spip] utiliser les styles CSS pour positionner les images et
le texte d'accompagnement

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip

5

Merci Hervé pour ta réponse,

Ca marche effectivement très bien avec la balise

Je ne connaissais pas l’option clear=« all »
En fait je voulais éviter d’utiliser les balises html à l’intérieur du texte mais je vais m’y résoudre…

Je viens de trouver cet article sur
et son remplacement pas CSS : Je n’ai pas essayé mais je vais le faire. et renverrai un post sur le résultat. Pierre Hervé BERNARD a écrit :

6

Merci.

C'est ce que j'ai fait et c'est efficace.

Mais je n'ai pas trouvé comment le mettre dans les feuilles de style CSS pour que chaque fois je rajoute une image flottante, ça puisse aller à la ligne sans que j'ai à rajouter de code html dans le texte de mon article.

gillesklein.spip@gmail.com a écrit :

Essayé <br style="clear:both"/> après le texte1
---- Envoyé avec BlackBerry® d'Orange ----

-----Original Message-----
From: Pierre Roger <pierre.roger@emera-fr.com>

Date: Sat, 27 Jun 2009 10:11:02 To: SPIP<spip@rezo.net>
Subject: Re: [Spip] utiliser les styles CSS pour positionner les images et
le texte d'accompagnement

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip

7

Merci Arhtegone,

Je ne suis pas sur de comprendre complètement pour ce que tu proposes.

Si j’utilise

, je mets hr dans le corps de l’artcle (?) et je le déclare également dans la feuille de style :

J’ai compris comme ça :
Dans l’article

<Mon image|left> Mon texte voulu à côté de l’image

Mon texte que je veux en dessous de l'image

Dans le CSS :
hr {
clear:both;
}

C’est bien ça ?

Pour ----- sous spip faut-il que je rajoute clear:both; mais ou ?

Merci d’éclairer ma lanterne.

arthegone arthegone a écrit :

8

Dans ton article, tu mets :

<img1|left> texte 1

<img2|left> texte 2

Texte après

Les tirets seront remplacés pas un hr
Dans les css, tu mets

hr {
visibility: hidden;
clear:both;
}

et hop !

Pierre Roger a écrit :

Merci Arhtegone,

Je ne suis pas sur de comprendre complètement pour ce que tu proposes.

Si j’utilise

, je mets hr dans le corps de l’artcle (?) et je le déclare également dans la feuille de style :

J’ai compris comme ça :
Dans l’article

<Mon image|left> Mon texte voulu à côté de l’image

Mon texte que je veux en dessous de l'image

Dans le CSS :
hr {
clear:both;
}

C’est bien ça ?

Pour ----- sous spip faut-il que je rajoute clear:both; mais ou ?

Merci d’éclairer ma lanterne.

arthegone arthegone a écrit :

pardon ,
HR en tre chaque ensemble IMG+TXT

ou ---- sous spip

Le 28 juin 2009 09:44, arthegone arthegone <arthegone@gmail.com> a écrit :

sinon deux solutions :

utilisation d’un tableau (moi j’aime pas)

sinon utilisation de

et dans ton css tu rends ta hr invisible et avec clear:both, bien sur

Le 28 juin 2009 07:59, Pierre Roger <pierre.roger@emera-fr.com> a écrit :

Merci.

C’est ce que j’ai fait et c’est efficace.

Mais je n’ai pas trouvé comment le mettre dans les feuilles de style CSS pour que chaque fois je rajoute une image flottante, ça puisse aller à la ligne sans que j’ai à rajouter de code html dans le texte de mon article.

9

Merci Jean-Christophe et Arthegone.

La solution est propre nette et sans bavure.

Et hop!!

Jean-Christophe Villeneuve a écrit :

Dans ton article, tu mets :

<img1|left> texte 1

<img2|left> texte 2

Texte après

Les tirets seront remplacés pas un hr
Dans les css, tu mets

hr {
visibility: hidden;
clear:both;
}

et hop !

Pierre Roger a écrit :

Merci Arhtegone,

Je ne suis pas sur de comprendre complètement pour ce que tu proposes.

Si j’utilise

, je mets hr dans le corps de l’artcle (?) et je le déclare également dans la feuille de style :

J’ai compris comme ça :
Dans l’article

<Mon image|left> Mon texte voulu à côté de l’image

Mon texte que je veux en dessous de l'image

Dans le CSS :
hr {
clear:both;
}

C’est bien ça ?

Pour ----- sous spip faut-il que je rajoute clear:both; mais ou ?

Merci d’éclairer ma lanterne.

arthegone arthegone a écrit :

pardon ,
HR en tre chaque ensemble IMG+TXT

ou ---- sous spip

Le 28 juin 2009 09:44, arthegone arthegone <arthegone@gmail.com> a écrit :

sinon deux solutions :

utilisation d’un tableau (moi j’aime pas)

sinon utilisation de

et dans ton css tu rends ta hr invisible et avec clear:both, bien sur

Le 28 juin 2009 07:59, Pierre Roger <pierre.roger@emera-fr.com> a écrit :

Merci.

C’est ce que j’ai fait et c’est efficace.

Mais je n’ai pas trouvé comment le mettre dans les feuilles de style CSS pour que chaque fois je rajoute une image flottante, ça puisse aller à la ligne sans que j’ai à rajouter de code html dans le texte de mon article.

10

De rien et merci surtout a Jean-Christophe d’avoir éclaircit et précisé mes sombres élucubrations :slight_smile:

Le 30 juin 2009 22:24, Pierre Roger <pierre.roger@emera-fr.com> a écrit :

Merci Jean-Christophe et Arthegone.

La solution est propre nette et sans bavure.

Et hop!!

Jean-Christophe Villeneuve a écrit :

Dans ton article, tu mets :

<img1|left> texte 1

<img2|left> texte 2

Texte après

Les tirets seront remplacés pas un hr
Dans les css, tu mets

hr {
visibility: hidden;
clear:both;
}

et hop !

Pierre Roger a écrit :

Merci Arhtegone,

Je ne suis pas sur de comprendre complètement pour ce que tu proposes.

Si j’utilise

, je mets hr dans le corps de l’artcle (?) et je le déclare également dans la feuille de style :

J’ai compris comme ça :
Dans l’article

<Mon image|left> Mon texte voulu à côté de l’image

Mon texte que je veux en dessous de l'image

Dans le CSS :
hr {
clear:both;
}

C’est bien ça ?

Pour ----- sous spip faut-il que je rajoute clear:both; mais ou ?

Merci d’éclairer ma lanterne.

arthegone arthegone a écrit :

pardon ,
HR en tre chaque ensemble IMG+TXT

ou ---- sous spip

Le 28 juin 2009 09:44, arthegone arthegone <arthegone@gmail.com> a écrit :

sinon deux solutions :

utilisation d’un tableau (moi j’aime pas)

sinon utilisation de

et dans ton css tu rends ta hr invisible et avec clear:both, bien sur

Le 28 juin 2009 07:59, Pierre Roger <pierre.roger@emera-fr.com> a écrit :

Merci.

C’est ce que j’ai fait et c’est efficace.

Mais je n’ai pas trouvé comment le mettre dans les feuilles de style CSS pour que chaque fois je rajoute une image flottante, ça puisse aller à la ligne sans que j’ai à rajouter de code html dans le texte de mon article.