PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 28/02/2019 16:09:08

falsam
Membre
Inscription : 02/09/2012
Messages : 6

Cadrer une image

Bonjour

J'utilise pluxml depuis quelques année et je ne crois pas avoir rencontrer ce souci jusqu'à présent.

Je viens d'installer la toute dernière version de PluXml et certains de mes articles sont imbriqués les uns dans les autres.

Je suis partie sur une nouvelle installation avec deux articles. J'utilise le plugin CKEditor - version 4.7.3 (28/11/2017)

Le premier article est très simple

<p>Premier billet</p>

Voici maintenant mon second article

<p>lorem&nbsp;badum&nbsp;&amp; badabum</p>

<p><img alt="" src="/PluXml/data/medias/400303.png" style="margin: 10px; width: 66px; height: 151px; float: left;" /></p>

Ce qui donne :
pluxmlbug0.JPG


Comme vous pouvez le constater, le premier article se retrouve imbriqué dans le second ce qui est .... moche.

A part ca, j'ai toujours autant de plaisir à utiliser PluXml ^^

Dernière modification par falsam (28/02/2019 16:11:31)

Hors ligne

#2 28/02/2019 18:14:34

Gzyg
Membre
Inscription : 25/09/2006
Messages : 900
Site Web

Re : Cadrer une image

Salut. Il n'est pas "imbriqué", il est collé à cause du float: left qui n'a rien à faire là.

- d'une part, parce que c'est l'alignement par défaut, inutile de le préciser.
- d'autre part, en rendant ton image "flottante" à gauche, tu crées un espace vide à droit qui "aspire" tout ce qui peut y entrer en terme de largeur.

Bref, tu retires ce float: left, et tout rentrera dans l'ordre. smile

Hors ligne

#3 01/03/2019 11:26:21

falsam
Membre
Inscription : 02/09/2012
Messages : 6

Re : Cadrer une image

L'objectif était d'avoir du texte à droite de l'image. J'ai donc besoin de cette justification d'image à gauche.

<p>lorem&nbsp;badum&nbsp;&amp; badabum</p>

<p><img alt="" src="/PluXml/data/medias/400303.png" style="margin: 10px; width: 66px; height: 151px; float: left;" />Subtegminum luceant cingulis vestium expandentes animalium animalium ponderibus insertas fimbriae ponderibus insertas maximeque sinistra lacernarum maximeque ponentes nimia solito tenuitate nimia expandentes cingulis multiformes quas summum sub lacernarum ipsis effigiatae.</p>

Le résultat obtenu n'est pas satisfaisant.

pluxmlbug1.JPG

Hors ligne

#4 01/03/2019 11:45:24

Dakin Quelia
Membre
Lieu : Belgique
Inscription : 04/02/2019
Messages : 25
Site Web

Re : Cadrer une image

Bonjour,

Un "clear: right" ne règlerait-il pas l'affaire du coup?

Toutefois, au vu de la longueur de l'attribut "style", je te suggère plutôt de créer une classe CSS. wink

Bien à toi

Hors ligne

#5 01/03/2019 12:07:27

falsam
Membre
Inscription : 02/09/2012
Messages : 6

Re : Cadrer une image

Dakin Quelia a écrit :

Bonjour,

Un "clear: right" ne règlerait-il pas l'affaire du coup?

Toutefois, au vu de la longueur de l'attribut "style", je te suggère plutôt de créer une classe CSS. wink

Bien à toi

Ce style est générer par le plugin d’édition des articles wink

Hors ligne

#6 01/03/2019 13:12:31

falsam
Membre
Inscription : 02/09/2012
Messages : 6

Re : Cadrer une image

Je pense que mon souci d'affichage est résolu en modifiant la feuille de style du théme par defaut (theme.css)

.article header {
	margin-top: 2rem;
	clear : both;
}

j'ai ajouté clear : both;

Ref : https://developer.mozilla.org/fr/docs/Web/CSS/clear

Hors ligne

#7 01/03/2019 14:56:29

Dakin Quelia
Membre
Lieu : Belgique
Inscription : 04/02/2019
Messages : 25
Site Web

Re : Cadrer une image

Oui, c'est bien mieux.

Oui, j'hésitais un peu entre both et right.

En tout cas, le principal étant que tu aies réussi. wink

Hors ligne

#8 01/03/2019 17:38:56

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 244
Site Web

Re : Cadrer une image

Un "display: flex" sur le container de l'image et du texte serait plus simple.
Cela évitera ces horribles "clear: both"

Hors ligne

#9 03/03/2019 20:23:48

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 607
Site Web

Re : Cadrer une image

@bazooka07 : ce n'est pas horrible. C'est le comportement à avoir pour annuler un float (qui est une vieille propriété qui a rendu bien des services avant l'arrivée des flex ou grid récents)  wink


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2019 PluXml.org, tous droits réservés