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.
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.