Grid-Darstellung im JCE

    Joomla Version
    5.1.4
    PHP Version
    PHP 8.3.x
    Hoster
    fc-hosting

    Hallo ,

    ich habe einen 3-spaltigen Beitrag erzeugt mit dieser css-Klasse (Cassiopeia)

    @media (min-width: 844px) {
    .grid-spalten3 {
       display: grid; 
       gap: 25px;
        grid-template-columns: 1fr 1fr 1fr;
         } 
    }

    Der Code im JCE sieht so aus:

    <div class="grid-spalten3">
    <div style="text-align: center; border: medium solid #000000;"><span style="font-family: georgia, palatino; font-size: 14pt;"><br />links<br /><br /></span></div>
    <div style="text-align: center; border: medium solid #000000;"><span style="font-family: georgia, palatino; font-size: 14pt;"><br />mitte<br /><br /></span></div>
    <div style="text-align: center; border: medium solid #000000;"><span style="font-family: georgia, palatino; font-size: 14pt;"><br />rechts<br /><br /></span></div>
    </div>

    Das funktioniert:

    Was mich irritiert, ist die Darstellung im Editor-Fenster des JCE. Warum ist das so verschoben und nicht linksbündig?
    Ist mir früher nicht aufgefallen.

    vG

    Hallo,
    es ändert sich nichts. Trotzdem Danke!


    Ich arbeite schon einige Jahre mit 'grid'. Dieses Phänomen wäre mir sicherlich schon früher aufgefallen, da es mich irritiert und mit WSIWYG nichts zu tun.

    Was mich auch irritiert: Dieser Thread ist fast 200 mal geöffnet worden, aber wir beide sind die einzigen, die das Thema kommunizieren.
    Bin ich der einzige, der mit 'grid' arbeitet, ist 'grid' out, habe ich etwas verpassst?

    vG

    Möglicherweise hängt das daran, dass Du Deine eigenen Klassen dem JCE nicht bekannt gemacht hast (geht irgendwo in den Profileinstellungen). Dann kann JCE natürlich nur raten, wie es aussehen soll. Bei mir ist das genau so.

    Ich habe immer einen Tab mit dem Frontend offen, um die Änderungen zu kontrollieren (und bei CSS-Änderungen immer Cache löschen und STRG-F5).

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

    Rolf Dautrich

    Zitat von Dautrich

    Dazu brauchst Du allerdings den JCE PRO. Da ich den nicht habe, baue ich Flexboxen per HTML ein (eine Vorlage und das notwendige CSS habe ich natürlich).

    Habe auch keinen JCE PRO. Verwendet(e) mal bei einer Seite:
    https://getbootstrap.com/docs/5.3/layout/columns/. Also das mit den "cols".

    derkps

    Was mir auffällt ist, dass Du auch die Formatierungen (#1) in den Editor gibst.
    Warum nicht mit einer Klasse in die user.css?

    Liebe Grüße
    Christine

    Du schreibst dreimal hintereinander die gleiche style-Angabe in den <div>-Tag. Mit einer selbstdefinierten Klasse, die einen sprechenden Namen bekommt, wäre der Code nicht nur eleganter, sondern auch besser lesbar und besser wartbar.

    Aber erst einmal sollte es funktionieren, danach kannst Du mit dem Refactoring beginnen. ;)

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

    Hallo zusammen und Dank für die vielen Hinweise!

    ~JCE-Pro habe ich nicht
    ~Flexboxen per HTML kenne ich nicht
    ~es gibt eine Klasse aber für dieses Beispiel habe ich die nicht weiter ausgebaut (schnell&schmutzig)

    #10 den Link teste ich
    #6 ich schaue mal, wo ich was im JCE einstellen kann

    vG

    Ich bin's nochmal!

    Eher durch Zufall kam ich zur Lösung:

    Ich arbeite seit geraumer Zeit mit aktiviertem 'Zeige/Verstecke Blockelemente'. Dann kommt es zu o.g. Problem.
    Ohne 'Zeige/Verstecke Blockelemente' und mit aktiviertem 'Vollbildmodus' kommt man WYSIWYG schon näher.

    vG