Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

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

10 réponses

1 2
Avatar
docanski
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/
Avatar
grenault
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
Avatar
JKB
Le Tue, 19 Oct 2010 16:18:11 +0200,
docanski é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.

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
docanski
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.

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/
Avatar
JKB
Le Tue, 19 Oct 2010 16:53:17 +0200,
docanski é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

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
grenault
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)

--
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
Avatar
Aldo M.
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.
Avatar
SAM
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
Avatar
SAM
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 ?
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="" />

--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
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


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