Footer bei Flat Responsive

  • Hallo liebe Zeta Community.


    auf meiner Webseite http://www.skiclub-koengen.de/ habe ich vor dem Footer einen Infoblock (s. Dateianhang) der auf allen Unterseiten angezeigt wird.

    Auf mobilen Geräten (Tablet, Smartphone) verschiebt es diesen Block komplett.

    Kann mir jemand eine Lösung nennen wie man diesen Block so gestalten kann, dass es auch auf mobilen Geräten professionell aussieht?
    Für eure Hilfe wäre ich dankbar.

    MfG

    Stephan

  • Hallo Stephan


    Ich möchte Dir gerne raten, grundsätzlich nur Tabellen zu verwenden, wo unbedingt nötig und entsprechend sinnvoll...

    Verwende das Grid-System von Zeta. Link zum Handbuch >>> inkl. zu beachtende Folgeschritte.


    Einen angenehmen Spätsommerabend und viele Grüsse

    elch

  • Hallo elch,


    der Tipp war erstmal perfekt. Danke.


    Ich habe jetzt einen Container mit einer Reihe und 4 Spalten (= 4 Artikel) erstellt. Nun möchte ich diese noch in alle Unterseiten einbinden.

    Wenn ich nun jeden Artikel einzeln anklicke dann "Weitere Einstellungen" und das Häkchen "Auf allen Unterseiten anzeigen" setze, werden auf den Unterseiten je 4 Reihen mit je einem Artikel angezeigt, das ist dann kein Container mehr.

    Welche Einstellungen müssen da im Container eingestellt werden sodass dieser auf den Unterseiten mit allen 4 Spalten horizontal wie auf der Hauptseite angezeigt werden?
    Hast Du mir da noch einen Tipp?


    Danke und schönen Abend

    Stephan

  • Hallo Stefisa,


    das Vererben von Containern ist leider noch nicht möglich, siehe

    Footer auf allen Seiten


    Wünsche mir auch, dass das in einem der nächsten Updates möglich ist.


    Ich selbst erstelle auch, wie Du, für die Fußzeile mehrere Text-Boxen, weil das m. E. im Responsive-Verhalten schöner aussieht. Meine Projekte haben meist nicht mehr als 50 Rubriken, deshalb schiebe ich die Textblöcke in jeder Rubrik an die richtige Position. Für größere Projekte ist das natürlich keine Lösung.


    Liebe Grüße

    Sunny :)

  • Weil Container bzw. Artikel-Gruppen und -Positionen nicht vererbt werden können, war das vorgehen über die Tabelle gar nicht so schlecht, denn so haben Sie alle Spalten in einem Artikel, der vererbt werden kann (alternativ im Text einfach DIVs nutzen, die per inline-Style auf "float: left" gesetzt sind).

    Eine 100% fertige Lösung kann ich hier nicht bieten, aber einen Ansatz: Ihre Tabelle enthielt einen inline Style mit height und width. Das sollten Sie den Artikel mal im Quelltext-Modus (Toolbar) bearbeiten und das height-Attribut samt wert entfernen und die Width auf "100%" setzen. Dann geben Sie der Tabelle noch die CSS-Klasse "zpresponsive" dann verhält sich die Tabelle besser responsive (ab einer bestimmten Bildschirmbreite kann man die Tabelle scrollen…)

  • Hallo Herr Seiz,


    habe nun das Height-Attribut entfernt und die Width auf 100% erhöht.
    Wo kann ich der Tabelle die CSS klasse vergeben. (bin kein Profi)
    Ich kann nur in der Reihe und dem Container das Feld CSS-Klasse finden und da verändert sich leider nichts wenn ich "zpresponsive" eintrage.

    Können sie mir hierzu noch ein paar Details geben?
    Danke.


    Grus Stephan

  • Wenn Sie im Editor auf Quelltext-Darstellung umschalten, sehen Sie folgendes:


    <table style="WIDTH: 100%">


    Das ändern Sie in:


    <table class="zpresponsive" style="WIDTH: 100%">


    Dadurch wird dann die Klasse hinzugefügt und die Tabelle reagiert bei schmalen Bildschirmbreiten anders. Danach dann ggf. veröffentlichen, damit ich den Code online überprüfen kann, falls was nicht klappt.

  • Hallo Stephan,

    ich habe mich mal der Sache angenommen und einen 4-spaltigen Footer im voller Breite gestaltet.

    LINK - funktioniert allerdings in Flat Resp. nicht so richtig mit den %-angaben.


    Aber man kann das natürlich auch mit Pixel-angaben umsetzen. Muss dann halt genau auf die jeweilige Seitenbreite angepasst werden.

    Ich habe das mal umgesetzt und bin deinem Fall von einer Seitenbreite von 1500px ausgegangen?


    LINK zu der Testseite


    Einstellungen > CSS - die Werte eventuell anpassen


    Widget > Quelltext - im Footer der Startseite einfügen, anpassen und vererben

  • Dann wurden sie vermutlich vom Nutzer nicht richtig gesetzt.

    Einstellungen > Links