Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Image et paragraphe

0 views
Skip to first unread message

JKB

unread,
Oct 19, 2010, 10:10:13 AM10/19/10
to
Bonjour à tous,

J'essaie de coller une image à droite d'un texte formé de plusieurs
paragraphes (le tout dans Spip) et j'ai un petit soucis.

Mon squelette génère :

<div class="images">
<h1>Notre démarche est citoyenne</h1>
<div><img class="spip_logos" alt="" src="IMG/arton7.png?1287496257" width="336"
height="435" />
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>

Si le premier paragraphe est bien à gauche de l'image (j'ai un
float: left; dans le CSS déclarant 'images'), le second début sous
l'image.

Comment faire pour coller deux paragraphes à gauche d'une image ? Je
sèche depuis quelques heures sur le problème et je n'ai rien trouvé
de probant.

Merci de toute lumière,

JKB


--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse...
=> http://grincheux.de-charybde-en-scylla.fr

docanski

unread,
Oct 19, 2010, 10:18:11 AM10/19/10
to
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, JKB ecrit ce qui suit en ce 19/10/2010 16:10 :
> Bonjour ᅵ tous,

Bonjour seul,

> J'essaie de coller une image ᅵ droite d'un texte formᅵ de plusieurs


> paragraphes (le tout dans Spip) et j'ai un petit soucis.

> Comment faire pour coller deux paragraphes ᅵ gauche d'une image ? Je
> sᅵche depuis quelques heures sur le problᅵme et je n'ai rien trouvᅵ
> de probant.

Dᅵjᅵ, il faudrait commencer par placer l'image en float:right plutᅵt que
les paragraphes en float:left. Les paragraphes s'installeront ᅵ gauche,
dans l'espace disponible.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallï¿œe de la Rance maritime : http://valderance.free.fr/
Les cï¿œtes du nord de la Bretagne : http://docarmor.free.fr/

grenault

unread,
Oct 19, 2010, 10:18:57 AM10/19/10
to
Le 19/10/2010 16:10, JKB a écrit :
> Bonjour à tous,
>
> J'essaie de coller une image à droite d'un texte formé de plusieurs
> paragraphes (le tout dans Spip) et j'ai un petit soucis.
>
> Mon squelette génère :
>
> <div class="images">
> <h1>Notre démarche est citoyenne</h1>
> <div><img class="spip_logos" alt="" src="IMG/arton7.png?1287496257" width="336"
> height="435" />
> <p>Mon premier paragraphe</p>
> <p>Mon second paragraphe</p>
> </div>
>
> Si le premier paragraphe est bien à gauche de l'image (j'ai un
> float: left; dans le CSS déclarant 'images'), le second début sous
> l'image.
>
> Comment faire pour coller deux paragraphes à gauche d'une image ? Je
> sèche depuis quelques heures sur le problème et je n'ai rien trouvé
> de probant.
>
> Merci de toute lumière,
>
> JKB
>

Tu peux essayer d'insérer ta ligne pour l'image entre tes deux paragraphes ?

Bon, c'est une idée...

--
Photo, Home-cinéma, Polars, vin, cartes virtuelles...
http://www.grenault.net/cartes_postales.htm
http://www.grenault.net
http://guides-pratiques.info/annuaire.html

JKB

unread,
Oct 19, 2010, 10:31:49 AM10/19/10
to
Le Tue, 19 Oct 2010 16:18:11 +0200,
docanski <docanski_...@euphonynet.be.invalid> écrivait :

> Alors que les eleveurs et agriculteurs empoisonnent toujours la
> Bretagne, JKB ecrit ce qui suit en ce 19/10/2010 16:10 :
>> Bonjour à tous,
>
> Bonjour seul,
>
>> J'essaie de coller une image à droite d'un texte formé de plusieurs

>> paragraphes (le tout dans Spip) et j'ai un petit soucis.
>> Comment faire pour coller deux paragraphes à gauche d'une image ? Je
>> sèche depuis quelques heures sur le problème et je n'ai rien trouvé
>> de probant.
>
> Déjà, il faudrait commencer par placer l'image en float:right plutôt que
> les paragraphes en float:left. Les paragraphes s'installeront à gauche,
> dans l'espace disponible.

C'est exactement ce que je fais. Ça fonctionne parfaitement pour le
premier paragraphe mais pas pour les suivants.

docanski

unread,
Oct 19, 2010, 10:53:17 AM10/19/10
to
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, JKB ecrit ce qui suit en ce 19/10/2010 16:31 :

> C'est exactement ce que je fais. ï¿œa fonctionne parfaitement pour le


> premier paragraphe mais pas pour les suivants.

C'est sans doute que le volume disponible ᅵ gauche est insuffisant pour
contenir tes paragraphes. Il faut donc remonter le second en ï¿œvitant une
fermeture de la balise <p> et la remplacer par un <br>. L'espace entre
les 2 paragraphes sera diminuᅵ et le second pourra ainsi remonter.
Sinon, reste ᅵ agrandir l'image ... si c'est possible et si c'est
vraiment nï¿œcessaire.

JKB

unread,
Oct 19, 2010, 11:00:28 AM10/19/10
to
Le Tue, 19 Oct 2010 16:53:17 +0200,
docanski <docanski_...@euphonynet.be.invalid> écrivait :

> Alors que les eleveurs et agriculteurs empoisonnent toujours la
> Bretagne, JKB ecrit ce qui suit en ce 19/10/2010 16:31 :
>
>> C'est exactement ce que je fais. Ça fonctionne parfaitement pour le

>> premier paragraphe mais pas pour les suivants.
>
> C'est sans doute que le volume disponible à gauche est insuffisant pour
> contenir tes paragraphes.

Non, il est largement suffisant.

> Il faut donc remonter le second en évitant une

> fermeture de la balise <p> et la remplacer par un <br>.

Déjà essayé sans succès.

> L'espace entre
> les 2 paragraphes sera diminué et le second pourra ainsi remonter.
> Sinon, reste à agrandir l'image ... si c'est possible et si c'est
> vraiment nécessaire.

Le problème est ici :
http://dev1.de-charybde-en-scylla.fr/spip.php?rubrique5

grenault

unread,
Oct 19, 2010, 11:39:01 AM10/19/10
to
Iu peux aussi regrouper tes 2 paragraphes en un seul div en float: left
et ton image en float: left ou right (la suite tu mets : clear: left ou all)

Aldo M.

unread,
Oct 19, 2010, 12:14:26 PM10/19/10
to
Le 19/10/2010 16:10, JKB a écrit :
> Bonjour à tous,
>
> J'essaie de coller une image à droite d'un texte formé de plusieurs
> paragraphes (le tout dans Spip) et j'ai un petit soucis.
>
> Mon squelette génère :
>
> <div class="images">
> <h1>Notre démarche est citoyenne</h1>
> <div><img class="spip_logos" alt="" src="IMG/arton7.png?1287496257" width="336"
> height="435" />
> <p>Mon premier paragraphe</p>
> <p>Mon second paragraphe</p>
> </div>
>
> Si le premier paragraphe est bien à gauche de l'image (j'ai un
> float: left; dans le CSS déclarant 'images'), le second début sous
> l'image.

Me semble qu'il y a confusion/erreur dans le HTML, surtout...

Le float: left; dans la classe "images" n'a pas d'implication sur le
fait que l'image soit à droite du texte... Il indique simplement que
dans son conteneur à lui, le div "images" va flotter à gauche.

Je n'ai pas trouvé la classe "spip_logos" dans le bordel de feuilles de
style de Spip, mais si tu confirmes qu'il y a bien float: right; alors
il faudrait plutôt faire ça dans le HTML, a priori :

<div class="images"> <!-- drôle de nom assez "confusing" -->


<h1>Notre démarche est citoyenne</h1>

<img class="spip_logos" etc. />
<p>Premier parag</p>
<p>Second parag</p>
</div>

En gros, je ne comprends pas pourquoi tu ouvres un <div> juste avant
l'image... C'est peut-être l'explication ?

Ou alors je n'ai rien compris à ton souci et je m'en excuse. Mais a
priori le bout de code HTML que je te propose doit marcher.


--
Aldo M.

SAM

unread,
Oct 19, 2010, 6:59:07 PM10/19/10
to
Le 19/10/10 17:39, grenault a écrit :

> Iu peux aussi regrouper tes 2 paragraphes en un seul div en float: left
> et ton image en float: left ou right (la suite tu mets : clear: left ou
> all)


Non ... pas de 'all' pour clear ! !

'clear'
Valeur : none | left | right | both | inherit
Initiale : none

nous dit-on ici :
<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-clear>


--
Stéphane Moriaux avec/with iMac-intel

SAM

unread,
Oct 19, 2010, 7:07:29 PM10/19/10
to
Le 19/10/10 17:00, JKB a écrit :

Encore un truc fabriqué avec un machin-chouette-bazar-a-blog, non ?
Parce que ... tout de même ... un humain normalement constitué peut-il
réellement "penser" une telle mise en page ?
Les 2 paragraphes et l'image fautifs sont enfouis dans un div ... au ...
5ième niveau !
Juste pour le seul plaisir de faire de l'imbrication puisque ça se
referme pour au moins 3 niveaux sitôt après.

Qu'on ne vienne pas pleurer si après ça fonctionne mal quand, par
exemple, la balise p qui nous intéresse ici fait n'importe quoi, tel que
suivre la règle éditée pour "column1-unit" --> width:820px

Et d'abord, pourquoi ce column1-unit ?
Et ensuite pourquoi lui donner une largeur ?

Et puis, oui, quoi, quand-même !
finalement à quoi sert ce "images" qui n'a aucun style ?


J'ai quasi tout essayé :

.images p { width: auto !important; margin-botom: auto !important; }
.images img { clear: none !important; float: right }

en vain ...


Il faudrait mettre un / de fermeture pour l'image
<img alt="" />

SAM

unread,
Oct 19, 2010, 7:07:54 PM10/19/10
to
Le 19/10/10 18:14, Aldo M. a écrit :

>
> Me semble qu'il y a confusion/erreur dans le HTML, surtout...

c'est esssentiellement très inutilement emberlificoté

> Je n'ai pas trouvé la classe "spip_logos" dans le bordel de feuilles de
> style de Spip,

c'est ça le bonheur de ces truc-machins ...
- des class qui ne servent à rien (pas renseignées)
- des class qui inheritent on n'sait plus/pas quoi
tellement y en a de partout

> <div class="images"> <!-- drôle de nom assez "confusing" -->
> <h1>Notre démarche est citoyenne</h1>
> <img class="spip_logos" etc. />
> <p>Premier parag</p>
> <p>Second parag</p>
> </div>
>
> En gros, je ne comprends pas pourquoi tu ouvres un <div> juste avant
> l'image... C'est peut-être l'explication ?

Ça, ça doit être pour pouvoir y créer de nvelles règles pour essayer
d'annuler les autres contraintes héritées.

> Ou alors je n'ai rien compris à ton souci et je m'en excuse. Mais a
> priori le bout de code HTML que je te propose doit marcher.

C'est certain : *ça marche*
sauf ...
quand ...
on a bien tout pourri dans les conteneurs successifs de l'imbrication

Sergio

unread,
Oct 20, 2010, 1:29:43 AM10/20/10
to
Le 19/10/2010 17:00, JKB a écrit :

>> L'espace entre
>> les 2 paragraphes sera diminué et le second pourra ainsi remonter.
>> Sinon, reste à agrandir l'image ... si c'est possible et si c'est
>> vraiment nécessaire.
>
> Le problème est ici :
> http://dev1.de-charybde-en-scylla.fr/spip.php?rubrique5
>
> JKB

Pour la carte, il serait bon de doubler l'accès par une liste. Parce que pour trouver une boutique en région parisienne ou à
Belfort, bonjour !

Sinon, pour les images, elles sont un peu lourdes... Prévoir du jpeg pour les photos...

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org

SAM

unread,
Oct 20, 2010, 6:53:49 AM10/20/10
to
Le 19/10/10 16:31, JKB a écrit :

>
> C'est exactement ce que je fais. Ça fonctionne parfaitement pour le
> premier paragraphe mais pas pour les suivants.

Bien sûr !
Puisque tu as qque part dans les css :
p:after { clear:both; ... blabla }
Il faudrait donc rajouter une autre nième règle :
.images p:after { display: none; }

Ça n'a vraiment pas été de la tartigniole de trouver ce p:after !

Aldo M.

unread,
Oct 20, 2010, 7:44:32 AM10/20/10
to
Le 20/10/2010 01:07, SAM a écrit :
> Le 19/10/10 18:14, Aldo M. a écrit :
>> Je n'ai pas trouvé la classe "spip_logos" dans le bordel de feuilles de
>> style de Spip,
>
> c'est ça le bonheur de ces truc-machins ...
> - des class qui ne servent à rien (pas renseignées)
> - des class qui inheritent on n'sait plus/pas quoi
> tellement y en a de partout
>
>
>> Ou alors je n'ai rien compris à ton souci et je m'en excuse. Mais a
>> priori le bout de code HTML que je te propose doit marcher.
>
> C'est certain : *ça marche*
> sauf ...
> quand ...
> on a bien tout pourri dans les conteneurs successifs de l'imbrication

J'avoue qu'après avoir posté ça hier, je suis allé voir les styles et je
n'ai juste jamais vu un bordel pareil ! Et dans aucun des 7 ou 8
fichiers (appelés par du PHP...) je n'ai trouvé la fameuse classe
"spip_logos".

Je ne connais pas Spip, j'ai essayé mais j'ai rapidement abandonné
l'usine à gaz ; je sais que j'avais été rebuté, quand j'avais essayé de
faire un site "joli" en sortant des thèmes prédéfinis, par son système
de squelettes, alors que le système beaucoup plus limpide de Wordpress
me semble super puissant, dans le genre.

Une seule feuille de style (deux au max si on veut en faire une pour
l'impression...), déjà, ça change un peu la donne.

Après je ne veux pas rentrer dans une guéguerre, mais franchement, si le
site qu'on voit ici est représentatif du "style" Spip, alors...

--
Aldo M.

JKB

unread,
Oct 20, 2010, 9:46:50 AM10/20/10
to
Le Wed, 20 Oct 2010 01:07:29 +0200,
SAM <stephanemor...@wanadoo.fr.invalid> écrivait :

> Le 19/10/10 17:00, JKB a écrit :
>>
>> Le problème est ici :
>> http://dev1.de-charybde-en-scylla.fr/spip.php?rubrique5
>
> Encore un truc fabriqué avec un machin-chouette-bazar-a-blog, non ?
> Parce que ... tout de même ... un humain normalement constitué peut-il
> réellement "penser" une telle mise en page ?

La question n'est pas là. Il y a des impératifs qui ont conduit à
cette mise en page.

JKB

unread,
Oct 20, 2010, 9:48:40 AM10/20/10
to
Le Wed, 20 Oct 2010 07:29:43 +0200,
Sergio <serge....@delbono.net.invalid> écrivait :

> Le 19/10/2010 17:00, JKB a écrit :
>
>>> L'espace entre
>>> les 2 paragraphes sera diminué et le second pourra ainsi remonter.
>>> Sinon, reste à agrandir l'image ... si c'est possible et si c'est
>>> vraiment nécessaire.
>>
>> Le problème est ici :
>> http://dev1.de-charybde-en-scylla.fr/spip.php?rubrique5
>>
>> JKB
>
> Pour la carte, il serait bon de doubler l'accès par une liste. Parce que pour trouver une boutique en région parisienne ou à
> Belfort, bonjour !
>
> Sinon, pour les images, elles sont un peu lourdes... Prévoir du jpeg pour les photos...

On est d'accord. Mais ce n'est pas encore la question posée. Ce site
est un site de dev partant de la configuration actuelle (site en
flash) pour obtenir quelque chose de pérenne et aisément modifiable.
Que la mise en page soit merdique n'est pas mon problème puisqu'elle
reprend la mise en page du site initial, ce qui est justement _mon_
besoin.

JKB

unread,
Oct 20, 2010, 9:49:52 AM10/20/10
to
Le Wed, 20 Oct 2010 12:53:49 +0200,
SAM <stephanemor...@wanadoo.fr.invalid> écrivait :

Merci. C'est exactement ce que je cherchais.

Cordialement,

SAM

unread,
Oct 20, 2010, 11:09:50 AM10/20/10
to
Le 20/10/10 15:49, JKB a écrit :

> Le Wed, 20 Oct 2010 12:53:49 +0200,
> SAM<stephanemor...@wanadoo.fr.invalid> écrivait :
>> Le 19/10/10 16:31, JKB a écrit :
>>>
>>> C'est exactement ce que je fais. Ça fonctionne parfaitement pour le
>>> premier paragraphe mais pas pour les suivants.
>>
>> Bien sûr !
>> Puisque tu as qque part dans les css :
>> p:after { clear:both; ... blabla }
>> Il faudrait donc rajouter une autre nième règle :
>> .images p:after { display: none; }
>>
>> Ça n'a vraiment pas été de la tartigniole de trouver ce p:after !
>
> Merci. C'est exactement ce que je cherchais.

Ouais ... mais ... même si soit-disant des "impératifs" ont pu conduire
à une telle mise en page (usine), on aurait pu se souvenir de ce qu'on
avait bricolé et de cette longue suite de :after

qui, certainement, vont produire d'autres surprises et arrache cheveux.

J'espère seulement que quelqu'un avait "pensé" cette règle p:after
que ce n'est pas arrivé là au bonheur la chance, on verra bien si ça sert...

0 new messages