Frage zum Layout für Footer - Lösungsvorschläge gesucht

[m-werk]

Hallo Leute,

ich hab von einer Grafikerin ein Layout für den Footer bekommen, nur grüble ich schon das ganze Wochenende, wie ich dies am besten lösen könnte.
Hier die Grafik: 2017-10-09_08h57_36.jpg

Ich hab mir gedacht, dass ich 3 Spalten mach, aber bin mir nicht sicher, ob es das richtige ist. Man beachte auch den rechten Teil, wo oben eine unterschiedliche Schrift sich befindet.

Und so soll dann die Mobile version aussehen, wobei ich hier kein Problem habe, denn ich mach einfach einen Mobilen Artikel und setze hier alles untereinander.
2017-10-09_09h02_31.jpg


Wer hat für mich anhaltspunkte bzw. kann mir sagen, wie ich das am besten lösen könnte.

[mlweb]

ich hab von einer Grafikerin ein Layout für den Footer bekommen, nur grüble ich schon das ganze Wochenende, wie ich dies am besten lösen könnte.

Tut mir leid, das kann ich nicht nachvollziehen. Das ist doch bei modernen Browsern geradezu der Klassiker für display: flex. display:grid wäre hier vielleicht sogar noch eine bessere Möglichkeit, aber da hätte ich noch Bedenken mit der Browserunterstützung. Also eher nicht ohne Fallback einsetzen.

Man beachte auch den rechten Teil, wo oben eine unterschiedliche Schrift sich befindet.

Was ist daran besonders?

... wobei ich hier kein Problem habe, denn ich mach einfach einen Mobilen Artikel und setze hier alles untereinander.

Das ist jetzt nicht Dein Ernst oder?

[m-werk]

So, nun hab ich mich mal mit dem Spaltensets gespielt, und hier mein erstes Ergebnis: (FUSSZEILE) http://test.daseberhart.at

Jetzt hab ich noch nicht herausgefunden, wie ich die linke und rechte Spalte automatisch gleich hoch machen kann wie die mittlere und wie ich dann in der rechten Spalte (sowie in der linken) den Text an unterster Stelle setzen kann, wobei "gleich reservieren" und die Telefonnummer oben bleiben sollen.

Das 2.
In der Mobilen Version ist ja die Anordnung ganz anders. Wie wird dass dan angeordnet?

[lucina]

Hier gibt's den Lernstoff: http://flexboxfroggy.com/

[mlweb]

So, nun hab ich mich mal mit dem Spaltensets gespielt, und hier mein erstes Ergebnis: (FUSSZEILE) http://test.daseberhart.at

In der Mobilen Version ist ja die Anordnung ganz anders. Wie wird dass dan angeordnet?

Fragst Du hier einfach nur mal so oder hast Du auch vor Dich selbst mit einem vorgeschlagenen Ansatz auseinander zu setzen?
Falls nicht kann ich Dir - entsprechende Bezahlung vorausgesetzt - auch das Layout umsetzen.

[Stefko]

Ahoi,
wie Dir schon empfohlen wurde, schreit dein Problem nach einer Lösung mit display:flex
Damit kannst Du die identische Höhe hinbekommen und auch die Sortierung per mediaquery einstellen.
Hier mal ein Einstieg: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Gesendet von iPhone mit Tapatalk

[Andreas]

Ok, dann fehlt nur noch http://the-echoplex.net/flexyboxes/

Du hast da irgendwie viel zu viele verschachtelte DIVs. Hier mal ein Fiddel
https://jsfiddle.net/Andreas/2mLw3xsn/
Browser zusammenschieben!

[mlweb]

@Andreas Wenn ich es richtig sehe benutzt er das TAO-Theme von Rocksolid und dann hat er wahrscheinlich im Footer rocksolid-columns im Einsatz zu mindestens in seinem ersten gezeigten Test. Jetzt hat er noch mal etwas verändert, da hab ich nicht noch mal genau geschaut. Trotzdem dürfte einiges direkt aus dem Theme kommen. Das Theme arbeitet wegen der Flexibilität ja nicht zu knapp mit divs.

[m-werk]

So, ich hab nun den Footer mittels Flexbox umgesetzt. Ich musste mich zuerst in dieses Thema einlesen bzw. via Youtube mir dies erklären lassen.

Somit funktioniert dies jetzt ja schon ganz gut. Was ich aber noch nicht kappiert habe ist folgendes:

Wenn man in den Footer sich die rechte Box (box3) ansieht, hab ich hier 3 Elemente. Dem 3. Element hab ich auch eine Klasse gegeben. Ich hab aber noch keine Möglichkeit gefunden, dass das 3. Element auch ganz unten ist.

Wenn ich die anordnung für Mobile geräte mit "order: 1" usw. erstelle, geht die ja nur auf die gesamte Box. Geht dies auch auf einzellne Elemente in der Box?

Achja, ich verwende das TAO Theme von Rocksolid und ich hatte deshalb gefragt, da ich schon seit Tagen grübelte, wie ich dies am besten umsetzen kann. Mit Flexbox hatte ich bis dato noch nichts zu tun. Aber ich hab mit Flexbox auf dieser Homepage auch schon ein anderes Problem lösen können.

[jscholtysik]

Ich würde im Footer zwei horizontale Flexboxen machen. In der unteren Flexbox kannst Du dann im Flex Container mit "align-items: flex-end" die Elemente Adresse, E-Mail und Block mit Wichtige Infos unten anordnen...

[m-werk]

Das hab ich mir auch schon gedacht.

Ich hab hier nur noch das Problem mit der mittleren unteren Spalte.
Dort hab ich das Facebook Icon oberhalb der Telefonnummer und im Mobilen soll es unter dem E-Mail stehen. Alles andere ist kein Problem.

[jscholtysik]

Im mittleren Teil der unteren Flexbox eine zusätzliche vertikale Flexbox erstellen und im mobilen Teil die Reihenfolge mit "order" ändern oder umdrehen. Da man Flexboxen auch ineinander verschachteln kann, ist das kein Problem...

[mlweb]

Man darf Flexboxen auch verschachteln.

Edit: @jscholtysik war schneller

[Andreas]

Ok, Tao, das hatte ich jetzt nicht gesehen. Evtl. kannst du das auch mit rs-column umsetzen, ich bin damit nie warm geworden, weiß nicht, ob es damit auch push und offset gibt usw.

Was Flexbox betrifft muss du dir hauptsächlich klar machen, dass ein Element mit display:flex der sogenannte Flex-Container ist und dessen direkte Kinder automatisch sogenannte Flex-Items.

Diese Flex-Items (Kinder) reagieren dann, obwohl kein CSS auf sie aufgesetzt ist, automatisch ganz anders als z.B. ein normaler DIV. Man kann auf das Element u.a. z.B. kein float: mehr aufsetzen.

Die Flex-Items (Kinder) selber können nun auch zu Flex-Containern gemacht werden, deren Kinder dann wieder Flex-Items sind. Ein Element kann also gleichzeitig Flex-Container und Flex-Item sein.

[m-werk]

PERFEKT, das mit dem verschachteln hat prima funktioniert. Jetzt hab ich es so wie ich es wollte.

Ich muss jetzt nur noch im BE alles sauber machen, denn ich hab für die 1. Zeile Spaltenset Start und dann darin Spalten Anfang und Ende, und auch für die 2. Zeile. Ist alles noch ein wenig unübersichtlich (sieht man auch im Quelltext).

Aber das mach ich mal, wenn alles andere Fertig ist.

Somit hab ich betreffend Flexboxen wieder mal was gelernt und kann gleich mehrere Sachen damit lösen.

Danke nochmals für die Unterstützung!