OVH Cloud OVH Cloud

Image et paragraphe

17 réponses
Avatar
JKB
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

7 réponses

1 2
Avatar
Sergio
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
Avatar
SAM
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 !

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Aldo M.
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.
Avatar
JKB
Le Wed, 20 Oct 2010 01:07:29 +0200,
SAM é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

--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse...
=> http://grincheux.de-charybde-en-scylla.fr
Avatar
JKB
Le Wed, 20 Oct 2010 07:29:43 +0200,
Sergio é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

--
Si votre demande me parvient sur carte perforée, je titiouaillerai très
volontiers une réponse...
=> http://grincheux.de-charybde-en-scylla.fr
Avatar
JKB
Le Wed, 20 Oct 2010 12:53:49 +0200,
SAM é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.

Cordialement,

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
Avatar
SAM
Le 20/10/10 15:49, JKB a écrit :
Le Wed, 20 Oct 2010 12:53:49 +0200,
SAM é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...

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