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 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!
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/
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 ;)
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!
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.
layout.png
(11 KB)
