Cassiopeia: Module untereinander darstellen

    Hallo,

    ich kann mir gar nicht vorstellen, dass ich der erste mit diesem Problem bin, aber in der Suche habe ich nichts gefunden.

    Mein Problem: Wenn ich mehrere Module auf einer Position darstellen lasse, werden die im Desktop merkwürdig "gequetscht" dargestellt, manchmal nur 1-2 Buchstaben pro Zeile. Beispiele siehe Screenshot.

    Mein Wunsch: ich würde gerne auch auch dem Desktop manche Module in einer Position (z. B. Footer oder Bottom a/b) auch auf dem Desktop untereinander darstellen lassen. Ich habe schon in den Moduleinstellungen herumprobiert, z. B. Bootstrap-Größe auf 12 gesetzt oder beim Modul die CSS-Klasse boxed und fluid angegeben. Hat alles nichts geändert.

    Gibt es da eine einfache Lösung?
    Danke und Gruß

    Peter

    Da solltest du einen Link zum Problem posten. Oft, nicht immer, ist das Problem bei so was nicht korrektes HTML im Modul oder schon zuvor. Beispielsweise ein nicht geschlossenes <DIV> oder ähnlich.


    Vielleicht hilft der W3C-Validator weiter, wenn du nur Fehler anzeigen lässt und/oder der Firefox zeigt solche Dinge in der Quelltext-Ansicht rot an.

    Guten Morgen,

    das kann ich gerne machen: https://www.bauen-und-heimwerken.de/

    Aber das Problem taucht immer auf, wenn ich mehrere Module (z. B. Menüs, Neueste Beiträge etc.) auf einer Position veröffentliche: Die werden dann immer nebeneinander gequetscht. Das wird ja dann kein "fehlerhaftes CSS-Problem" oder ähnliches sein, sondern etwas Grundsätzliches. Die Module werden halt immer auf die minimalst mögliche Breite nebeneinander zusammengestaucht, wenn mehrere auf einer Templateposition veröffentlicht werden.


    Mein Ziel: Auch auf breiten Bildschirmen sollen Module auf einer Templateposition untereinander angezeigt werden. Nicht immer, aber in einigen Fällen. Gibt es da eine Einstellmöglichkeit?

    Zitat von Diarmiud

    das kann ich gerne machen

    Das hilft wenig, wenn man die betroffene Seite nicht sieht.

    Zitat von Diarmiud

    Das wird ja dann kein "fehlerhaftes CSS-Problem" oder ähnliches sein

    Ich habe ja auch von HTML geredet. Wenn man z.B. ein Modul vom Typ "Eigenes" drinnen hat oder einen Ausschnitt eines Beitrags, der zu früh abgeschnitten wird, dann zerlegt es eben den gesamten Aufbau der Seite.


    Und, wenn es nicht HTML sein sollte, dann muss es ja CSS sein. Oder eben beides im Zusammenspiel.


    Zumindest hast du 2 Tipps wie man das schon mal ausschleißen kann.


    Wenn ich also schon mal deine jetzige Startseite teste

    Showing results for https://www.bauen-und-heimwerken.de/ - Nu Html Checker


    mit Einstellungen



    und nur die ERROR anschaue(!!!!!)


    finde ich zahlreiche Fehler dieser Art UND, wenn ich erst mal nur diese "end tag seen" durchsehe(!!!), um nicht zu sehr von anderen nicht so gravierenden abgelenkt zu werden (viele sind kein wirkliches Problem zu deinem Thema):



    Die müssen nicht immer das ursächliche Problem sein, weil moderne Browser einiges "wegignorieren", aber es findet sich z.B. so was (Betonung auf "zum Beispiel"):



    also

    Code
    <p></div></p>

    und so was hackt mit Sicherheit das HTML und in Folge das CSS kaputt, weil die DIVs eben maßgeblich an der Anordnung beteiligt sind und ein schließendes DIV da nicht hingehört.


    Ob das nun du bist oder eine Erweiterung sei dahingestellt. Das sähe man nur, wenn man davor sitzt.


    Vielleicht Readmore-Marker in Beiträgen falsch gesetzt oder so Zeugs. Dutzendfaches möglich.

    Danke für deine Analyse. Ich werde das angehen.


    Aber: Das hat alles nichts mit meiner Frage zu tun... Vielleicht drücke ich mich unverständlich aus.


    Darum nochmal anders formuliert: Nehmen wir an, ich habe 3 Module auf der Position bottom-a veröffentlicht. Wie erreiche ich es dass diese drei auf allen Bildschirmbreiten untereinander und nicht nebeneinander dargestellt werden?


    Danke!

    Das lässt sich wohl über ein child-template von Cassiopeia machen. Da kannst du dann die index.php ändern und für jedes Modul einen eigenen Platz anlegen mit anderm Namen und das ganze über css stillen.

    Ginge vielleicht auch über ein Override. Denke aber der Child-Funktionalität ist für das Ansinnen genau der richtige Ansatzpunkt.

    Diarmiud ,


    Folgende Möglichkeit :

    Du erstellst ein neues « Eigenes Module » mit folgendem Code:


    Code
    <div class="w-100"><strong>Haec igitur</strong> prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.<br /><hr /></div>
<div class="w-100"><strong>Haec igitur</strong> prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.<br /><hr /></div>
<div class="w-100"><strong>Haec igitur</strong> prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</div>


    Sieht dann so aus:



    Jetzt ersetzt du den Lorem Ipsum Text mit deine {loadmoduleid xx}

    Der Code sieht dann so aus:


    Code
    <div class="w-100"><p>{loadmoduleid xxx}</p><hr /></div>
<div class="w-100"><p>{loadmoduleid xxx}</p><hr /></div>
<div class="w-100"><p>{loadmoduleid xxx}</p></div>


    Sieht dann so aus:


    .

    Erklärung zu CSS oben: .grid-child (die Klasse um die Modulpositionen und Main Bereich der Webseite) ist als display:flex definiert. Standardmäßig werden die Elementen innerhalb eines flex Elements nebeneinander dargestellt (flex-direction:row)so wie sie Platz darin finden, außer man definiert eine Breite für die Einzelelemente. Will man die Elemente untereinander positionieren, muss man die flex-direction in column ändern