Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

CSS mehrspaltig mit Column

Begonnen von rolinux, 17. Dezember 2022, 17:32:39

« vorheriges - nächstes »

rolinux

Hallo,

ich habe nach Recherche im Internet ein eigenes Syntax-Element kreiert, das mir erlaubt, Text mehrspaltig darzustellen:
mehrspaltig = <div class="mehrspaltig" style="column-count:{DESCRIPTION}">{VALUE}</div>

Die CSS-Definition dazu sieht so aus:
div.mehrspaltig {
    width: 100%;
    column-width: 200px;
}

div.mehrspaltig h3 {
    break-before: always;
}

Zu sehen ist das hier (versteckte Seite):
https://www.gospel-and-more-birkenfeld.de/Chor/Chor_Test.html?draft=true

Bisher habe ich das als Tabelle definiert, hat beim responsiven Layout auf dem Handy den Nachteil, dass die Sängerliste ziemlich gedrängt angezeigt wird. Deshalb das mehrspaltige Layout, damit die Liste auf dem Handy untereinander angezeigt wird.

Auf der Startseite und auf der Seite "Chor/Chorleiter" funktioniert das wunderbar. Nur in der verlinkten Seite nicht. Weiß jemand, warum?

Gruß
Rolf
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

stefan-wasp

Hallo Rolf!
Sehr schönes Syntaxelement!

a. Im kontekten Fall verwendest Du offenbar bildrechts bzw. rightcontentimage anstelle von bild bzw. contentimage wie bei den funktionalen Seiten - dies könnte m.E. ein Ansatz sein.
b. Weiterhin ist das Syntaxelement auch später eingebunden, als bei den zwei genannten, wo es funktioniert.

Ich tippe jedoch -ungetestet- auf a.

Beste Grüße
stefan
Use: UTF-8 w/o BOM

rolinux

Hallo Stefan,


danke für die Blumen.

Auf der Seite, wo es nicht funktioniert, wird [bildrechts|] verwendet, allerdings steht das Tag vor der Hauptüberschrift [ueber1|]. Wenn ich das rausnehme, wirds nicht besser.

Das Syntax-Element ist auf der Chorleiter-Seite ebenfalls mitten im Inhalt eingebaut, genauso wie auf der Seite, die nicht funktioniert.

Gruß
Rolf
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

rolinux

Ich habs hinbekommen. Ich habe der Definition noch ein "column-fill: auto;" hinzugefügt:
div.mehrspaltig {       /*RL17122022*/
    width: 100%;
    column-width: 200px;
    column-fill: auto;
}

div.mehrspaltig h3 {
    break-before: column;
}

Dann muss man nur die gewollten Spalten mit Leerzeilen auffüllen, sodass alle Spalten gleich lang sind. Jetzt siehts gut aus:
https://www.gospel-and-more-birkenfeld.de/Chor.html?draft=true

Auf dem Handy sieht man zwar die vielen Leerzeilen, aber das halte ich für nicht so schlimm.

Danke für Eure Bemühungen.

Gruß
Rolf
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

stefan-wasp

Zitat von: rolinux am 18. Dezember 2022, 16:53:48Ich habe der Definition noch ein "column-fill: auto;" hinzugefügt:

Damit zerhaut es mir im Firefox alles (Darstellung immer untereinander) und bei MS EDGE wird beim Schmal- ziehen des Fensters einiges schlicht nicht mehr angezeigt.

Ich sehe nach wie vor "die Verantwortung" bei dem Bild oben ...
Use: UTF-8 w/o BOM

rolinux

Hmmm... Bei mir in FF siehts gut aus.
Edge habe ich nicht probiert.
Dann muss ich weiter probieren.

Gruß
Rolf
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)

hheigl

Hallo Rolf,
ich würde in diesem Fall das Plugin "FlexCards" von marusti verwenden!

Natürlich müsste man in den css-Einstellungen des Plugins die Farben entsprechend anpassen, dass die einzelnen Blöcke (Cards) nicht so offensichtlich abgegrenzt werden. Aber so kann man erreichen, dass die zusammengehörenden Blöcke ("Stimmen") sauber beieinander bleiben, egal ob die Darstellung dreispaltig, zweispaltig oder einspalting erfolgt.
Aber das ist nur ein Vorschlag von mir!

Gruß Heinrich

rolinux

@Stefan: Heute auf dem Rechner im Geschäft hats mir das Layout auch zerhauen. Weiß nicht, warum das am WE auf dem Rechner zu Hause noch ok war.

Das Plugin FlexCards ist genau das, was ich dafür brauche! Habs grade mal testweise auf der Chor-Seite eingebaut und funktioniert bestens! Danke für den Tipp.
Schade, dass man das nicht in den Plugins auf der mozilo-Homepage findet.

Gruß
Rolf
"Vergiss nie, dass die Musik viel zu wichtig ist,
um sie ganz den Profis zu überlassen."
(Robert Fulghum, amerikanischer Philosoph)

"Die Deutsche Rechtschreibung ist Freeware, du darfst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du sollst sie nicht verändern oder in veränderter Form veröffentlichen."
(Verfasser unbekannt)