Image et paragraphe
JKB
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
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
> 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
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 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.
>> 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
> 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
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 :
>
>> premier paragraphe mais pas pour les suivants.
>
> 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
et ton image en float: left ou right (la suite tu mets : clear: left ou all)
Aldo M.
>
> 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
> 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
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
>
> 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
>> 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
>
> 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.
> Le 19/10/10 18:14, Aldo M. a écrit :
>> 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
>
>
>> 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
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
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
SAM <stephanemor...@wanadoo.fr.invalid> écrivait :
Merci. C'est exactement ce que je cherchais.
Cordialement,
SAM
> 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...