CSS Problem in der Vertikalen

[Andi (Gast)]

Hallo,

ich bin leider etwas mit CSS auf dem Kriegsfuß:

Aktuell verwende ich bootstrap 4.1.3 mit Grid-Layout.
Wie kriege ich ein vertikales Layout mit 3 Reihen auf den Schirm, bei 
dem die unterste Reihe am unteren Bildschirmrand hängt?

https://getbootstrap.com/docs/4.1/layout/grid/#vertical-alignment

Das oben angeführte Beispiel funktioniert bei mir leider nicht, obwohl 
das übergeordnete div die volle Höhe hat.

Aussehen sollte es schlussendlich so wie auf dem angehängten Screenshot.
Die Größe des Schirms ist statisch (Full-HD Monitor als Anzeigetafel).
Ich kriege es zwar hin indem ich die divs in der Höhe festnagle, aber 
eine saubere Lösung würde mich doch sehr interessieren.

Kann mir jemand dabei helfen?

Danke schon mal, Andi

[DPA (Gast)]

Ich hasse Bootstrap und liebe CSS!
https://jsfiddle.net/52p7dwga/1/

[Andi (Gast)]

DPA schrieb:
> Ich hasse Bootstrap und liebe CSS!

Hehe, ich bin da einen Schritt weiter und hasse beides ;)

CSS habe ich nie verstanden.
Deswegen wollte ich auch bootstrap verwenden.
Nur wie bei jedem Framework: wennst einmal aus den Grenzen ausbrechen 
willst landest in der S****.
Und wenn man die darunterliegenden Mechanismen nicht versteht stochert 
man eben ständig im Dunkeln herum;

Ich baue für unseren Verein eine Schautafel mit einem Raspi + Monitor 
als nicht-interaktive Anzeige.
Mit dem Frontend habe ich schon gefühlt deutlich mehr Zeit verbraten als 
mit dem kompletten Backend zur Wartung von Terminen, Berichten, 
Bilderupload, ...

> https://jsfiddle.net/52p7dwga/1/

Wow, so einfach :)

Werde mal querlesen um zu verstehen was du da machst.

Meine bootstrap Slideshow zickt jetzt natürlich herum, am liebsten würde 
ich natürlich bootstrap komplett aus dem Frontend streichen.

Hättest du vielleicht dafür eine einfache Alternative bei der Hand?
Sie soll einfach nur x Bilder (16:9) nach und nach durchschieben.
Wie gesagt, nicht interaktiv.

Vielen vielen Dank auf jeden Fall schon einmal!

[DPA (Gast)]

Andi schrieb:
> Hättest du vielleicht dafür eine einfache Alternative bei der Hand?
> Sie soll einfach nur x Bilder (16:9) nach und nach durchschieben.
> Wie gesagt, nicht interaktiv.

Wenn man nur CSS verwendet hat man in jedem Fall das Problem, dass man 
das Maximum an Elementen in der Slideshow wissen muss, um jedes Element 
für eine konstante Dauer anzuzeigen.

Für ne slideshow mit SCSS (eine art css Template) hab ich das hier mal 
eben zusammengehackt:
https://jsfiddle.net/02o1vs4y/

Ich hatte da früher auch schon mal was mit Einblenden mit SCSS, damals 
wars text, aber das anzupassen wäre nicht so schwer:
Beitrag "Re: CSS only Slider"
https://jsfiddle.net/e0pdow1y/

Auch mit Überblendung, aber mit JS, hatte ich hier mal was:
Beitrag "Re: Statusdisplay / Slideshow in HTML, PHP, Java,?"
https://jsfiddle.net/r12mfLk5/2/

[Andi (Gast)]

DPA schrieb:
> Wenn man nur CSS verwendet hat man in jedem Fall das Problem, dass man
> das Maximum an Elementen in der Slideshow wissen muss, um jedes Element
> für eine konstante Dauer anzuzeigen.

Für mich kein Problem, die Seite wird aus der Datenbank dynamisch mit 
twig gerendert.

Danke für deine Vorschläge, ich glaube ich habe jetzt fürs WE einiges zu 
tun ;)

[Andi (Gast)]

Kurzer Zwischenbericht:
Mein Layout habe ich, auf deiner Basis aufsetzend, in kurzer Zeit genau 
so - und zwar pixelgenau - wie ich es mir vorstelle hingekriegt.
Ok, ein wenig Feinschliff ist schon noch notwendig.

Mit bootstrap war ich aber knapp vorm aufgeben.

Slideshows habe ich alle 3 ausprobiert:
Die erste SCSS bringt einen Syntaxerror, meine Korrekturversuche (eher 
blindes herumgestochere) waren nicht sehr ergiebig, sprich es slided 
nicht ;)

Die 2. SCSS-Lösung klappt hingegen problemlos.
Und die JS sowieso.

Bei SCSS bin ich schon sehr skeptisch, der Compiler produziert aus 
deinem 10-Zeiler immerhin knapp 3500 Zeilen CSS!?

Ich werde die beiden funktionierenden Varianten jetzt mal am Raspi 
laufen lassen und testen welche er besser und geschmeidiger darstellen 
kann.

Danke nochmal!

[DPA (Gast)]

Andi schrieb:
> Bei SCSS bin ich schon sehr skeptisch, der Compiler produziert aus
> deinem 10-Zeiler immerhin knapp 3500 Zeilen CSS!?

Nunja, wie schon gesagt, im grunde ist SCSS eine art Template Sprache 
für CSS. In meinem Code sind halt schleifen, im 2ten sogar mal 2 
verschachtelte. 1 Schleife mit 10 Zeilen und 20 Durchläufen gibt 
mindestens 10*20=200 Zeilen. Noch eine Schleife in der ersten mit 20 
Durchläufen, und man hat 10*20*20=4000 Zeilen. In CSS kann man eben 
nicht direkt mit der Anzahl Unterelemente in einem Element rechnen, 
sondern muss für jede Anzahl eine Regel machen, wenn n Elemente, gib 
Elementen X von diesen Eigenschaft Y, daher die Schleifen, und deshalb 
die grosse Menge an Code. Auch die momentanen Möglichkeit in CSS mit 
calc() und attr() sind leider noch sehr bescheiden.