[Résolu] Cadrer une image

falsamfalsam Membre
11 mai 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 Membre
    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 Membre
    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
  • 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 Membre
    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 Membre
    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
  • 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 Membre
    Un "display: flex" sur le container de l'image et du texte serait plus simple.
    Cela évitera ces horribles "clear: both"
  • @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.