Sidebar und Content nicht bündig unter dem Header

    Joomla Version
    Joomla 6.02
    PHP Version
    PHP 8.3.x
    Hoster
    all-inkl.com
    Link (URL) zur Seite mit dem Problem
    https://joomla.heimatpflege.at/

    Benutze Joomla 6.02, Cassiopeia, Banner (1200 px breit) mit Bannerbild und angeschlossenem Hauptmenü.

    Eine linke Sidebar als Menü (Modul) Klasse = "sidebar-menu" und den Content (Klasse = .com-content-article__body)

    Leider bringe ich Sidebar und Content nicht bündig unter das Menü. Weiß mir leider keinen Rat mehr. Gemini und ChatGPT können hier auch nicht weiterhelfen.

  • Zur hilfreichsten Antwort springen

    Vielen Dank für Deine Antwort . . .

    Das Fluid habe ich umgestellt, es zeigt sich jetzt zumindest, dass Sidebar und Content zentriert sind und die Sidebar nicht am linken Rand klebt; wie soll ich die Breite von 1200px ansonsten definieren?

    Das Problem ist dein header. Bei dem erzwingst du eine Breite von 1200 px. Mit vielen !importants.
    Eine solche feste Breite und Höhe macht man nicht mehr.
    Wenn du alles zum header aus deiner user.css rausnimmst, kannst du in deinem modul auf position topbar das Bild zentrieren oder was du willst, aber verzichte auf feste px-Angaben.
    Und schreib einen alt-text, der das Bild beschreibt :) Denn was sieht ein Blinder, wenn man ihm vorliest "banner neu"?

    • Hilfreichste Antwort

    Außerdem hast du in der user.css bei Zeile 60bis63 eine nicht geschlossene Klammer:

    CSS
    /* Den Hauptinhalt nach rechts schieben, damit er bündig mit dem Banner ist. Wir zielen auf den umschließenden Container */
.site-grid > .main-fullwidth,
.site-grid > .grid-child {
    padding-left: 0px !important;

/* Sidebar links etwas formschöner */
.sidebar-left {

    Alles was nach /* Sidebar links etwas formschöner */ kommt wird daher nicht ausgeführt weil direkt davor die schließende Klammer fehlt!


    Ja, du hast in deiner user.css viel zu viele unnötige und unnütze Festlegungen von:

    CSS
     max-width: 1200px !important;
 margin-left: auto !important;
 margin-right: auto !important;
 width: 100% !important;
 margin-inline: auto !important;

    sowohl mit und auch ohne !important sind viele dieser Festlegungen nicht erforderlich, sinnlos oder fragwürdig.

    Vielen Dank!

    Sieht schon viel besser aus. Hatte Deinen CSS-Code als letzten Eintrag ganz unten positioniert, was falsch war. Hatte geglaubt, dass der Beisatz
    "!important" ohnehin vorangegangene Zeilen überschreibt.

    Jetzt fehlt nur noch eine Kleinigkeit: Die Sidebar ist noch nicht ganz bündig und der GAP zwischen Sidebar und Content lässt sich nicht verändern.

    Sende Dir auch meine user.css, vielleicht kannst Du diese ein wenig durchforsten.

    Bin wirklich froh, dass ich die Möglichkeit des Forums nutzen kann.

    LG

    Die nicht geschlossene Klammer oben aus #6 ist noch immer an der gleichen Stelle vorhanden!

    Derzeit nun bei Zeile 68 bis 71 in der user.css

    Alles was nach /* Sidebar links etwas formschöner */ in der user.css kommt wird daher nicht ausgeführt weil direkt davor die schließende Klammer fehlt!

    Daher wird auch der Code welcher am Ende der user.css eingefügt wird nicht ausgeführt!

    Hatte heute wenig Zeit, daher immer wieder die Unterbrechungen . . .

    Mein Fall ist eigentlich schon gelöst, die Hauptfehler waren das FLUID und die fehlende Klammer im Syntax.

    Vielen Dank Euch allen, ich hoffe ich darf Euch wieder einmal behelligen, wenn ich nicht mehr weiter weiß.

    Liebe Grüße

    PS: Ein Frage noch: Bringt ein SP Page Builder bei Cassiopeia effektive Vorteile? Oder reicht hier der JCE Pro?

    Die fehlende Klammer im Syntax ist nun behoben aber der Rest in #6 gilt weiterhin und important! benötigt man in der Regel eigentlich meistens nur um Inline-CSS zu überschreiben.

    Zu Page Builder und deren zusätzlichem Framework gibt es hier im Forum schon recht viele, zum Teil auch ausführliche Informationen und Hinweise bezüglich der Vorteile und auch der Nachteile. Siehe z.B.:

    Erfahrungen hinsichtlich Barrierefreiheit: Cassiopeia vs. Astroid vs. Helix Ultimate

    Diverse kleine Probleme

    Hilfe zur Erstellung einer neuen Website für einen Sportverein

    Zitat

    Oder reicht hier der JCE Pro?


    JCE Pro ist eine Erweiterung des in Joomla standardmäßig vorhandenen TinyMCE.

    Persönliche Meinung:
    Früher habe ich reflexartig in jede Anwendung JCE installiert, aber seit Jahren finde ich das überflüssig.
    TinyMCE kann genau dasselbe, nur wenn viele Bilder und Dokumente zu verwalten sind, hat der JCE seien Vorzüge.

    Viele haben den JCE behalten und sich daran gewöhnt wie er aussieht und wollen sich nich t mehr umgewöhnen.
    Für mich war es wichtiger, mir die Erweiterung zu sparen, die ja auch gepflegt werden muss.

    Vielen Dank auch für Eure Tipps bzw. pers. Meinungen; jetzt funktioniert alles bestens, zumindest komme ich nach einigem Tüfteln dann meist selbst auf die richtige Problemlösung.
    Liebe Grüße aus dem nördlichen Niederösterreich
    G. Obermann :thumbup::thumbup: