[Résolu] Cadrer une image

falsamfalsam Member
mai 2019 modifié dans Bogues
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 ^^
Mots clés:

Réponses

  • GzygGzyg Member
    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. :)
  • falsamfalsam Member
    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
  • Dakin QueliaDakin Quelia Member
    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. ;)

    Bien à toi
  • falsamfalsam Member
    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. ;)

    Bien à toi
    Ce style est générer par le plugin d’édition des articles ;)
  • falsamfalsam Member
    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
  • Dakin QueliaDakin Quelia Member
    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. ;)
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Un "display: flex" sur le container de l'image et du texte serait plus simple.
    Cela évitera ces horribles "clear: both"

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • Jerry WhamJerry Wham Member
    @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) ;)
Connectez-vous ou Inscrivez-vous pour répondre.