Semi-dynamisches Layout

[folkfreund]

Liebe Community,

hier beschreibe ich ein Layout mit Header, Footer und dazwischen bis zu 3 Spalten.
"Das ist doch das normale Contao-Layout"?

Ja, aber mit den folgenden Extras:

1. Der Footer ist immer am unteren Ende der Seite, egal ob der Inhalt das Fenster füllt oder nicht. Ist der Inhalt länger, dann bleibt der Footer unter dem Inhalt.

2. Es ist eine Mischung aus dynamischen und statischem Layout: solange das Fenster die angegebene Maximalbreite nicht überschreitet passt sich der Inhalt an die Fenstergröße an (dynamisch). Wenn aber der Maximalwert erreicht ist, dann verbreitert sich der Inhalt nicht weiter sondern wird im Fenster zentriert. Damit lassen sich z.B. zum Lesen zu lange Textzeilen vermeiden.

3. Die Layout-Bereiche #left und #right können aus optischen Gründen mit relativer Breite (also in Prozent) definiert werden. Falls notwendig, dann kann jeweils auch eine Minimalbreite angegeben werden. Fall nötig (bei zu schmalem Fenster) verdrängen die Seitenbereiche dann den Inhalt des Hauptbereichs.

Das Seiten-Template (fe_page.tpl) baut dabei die folgende Struktur auf:

html
    head
    /head
    body
        wrapper
            beforeFooter
                header
                    inside
                    /inside
                /header
                (custom_before)
                container
                    left
                        inside
                        /inside
                    /left
                    right
                        inside
                        /inside
                    /right
                    main
                        inside
                        /inside
                        (custom_main)
                    /main
                /container
                (custom_after)
            /beforeFooter
            footer
                inside
                /inside
            /footer
        /wrapper
    /body
/html

Eure Meinung dazu würde mich interessieren.
Wär auch nett, wenn jemand das mal in anderen Browsern als FF 3.6, IE 8 und IE 7 testen könnte.
Hier ein Link zum Ausprobieren: http://www.folkfreun.de/layoutdemo.html

Ich habe mal die betreffenden Dateien und die modifizierte fe_page.tpl angehängt.

Gruß, folkfreund

[Sebastian]

HI

Jetzt musst du nur noch holygrail ebenfalls einbauen, dann bin ich glücklich

Sebastian

[folkfreund]

Hi Sebastian,

Holy Grayl kannte ich noch nicht. Verstehe ich recht, dass es v.a. um die Inhaltsreihenfolge der Spalten (z.B. für Screenreader) geht?

Dann schau mal hier.
Nachteil: die Spaltenbreiten für #left und #right können nicht in Prozent angegeben werden. Das hab ich noch nicht auf die Schnelle hinbekommen

Die Erweiterung muss ich mir mal ansehen. Besteht die nur aus neuen Templates, oder gibt es da auch Einstellmöglichkeiten im BE? Vielleicht kann man das ja kombinieren...

Gruß, folkfreund

[Sebastian]

HI

Die Erweiterung stellt nur ein neues Template zu Verfügung, der Rest bleibt unverändert. Siehe auch http://www.contao-community.de/showt...5FCr-TYPOlight

Sebastian

[folkfreund]

Hi Sebastian,

also, in der neuesten Version 1.2.2 von HolyGrail gibt es schon auch etwas php-Code zur Erstellung des inline-CSS und auch zwei Schalter, mit denen man das beeinflussen kann.

Mein Vorschlag besteht ja aus mehreren Teilen, die vielleicht auch einzeln in HolyGrail integriert werden könnten. Wäre mir lieber als eine eigene Erweiterung, die man dann wohl nur schwer gleichzeitig mit HolyGrail nutzen könnte.

1. Footer immer am unteren Seitenende.
   Das ist ganz einfach zu erreichen und ist unabhängig von HolyGrail
2. Semi-dynamische Breite
   Auch dieser Punkt ist relativ simpel und beißt sich nicht mit HolyGrail
3. Linke und rechte Spalte in Prozent der semi-dynamischen Breite, optional mit min-width. Der benötigte Platz wird notfalls von der mittleren Spalte 'geklaut'.
   Dieser Aspekt kann wohl nicht umgesetzt werden, weil das Umfließen der Spalten #left und #right durch den Haupttext nicht funktioniert, wenn #mein als erstes im HTML steht. (Evtl. klappt noch die prozentuale Angabe der Breite - mal sehen)

Hättest du Interesse, zumindest die beiden ersten Punkte zu übernehmen?
Ich vermute, Punkt 1 wird niemanden stören, wenn er funktioniert ,
Punkt 2 könnte man per Schalter einstellbar machen: man wählt 'statisches Layout' und stellt ein, dass die angegebene Breit die dynamische Maximalbreite sein soll.

Viele Grüße, folkfreund

[Sebastian]

HI

Ich habe leider im Moment überhaupt keine Zeit für solche Projekte, ich kann gerade noch meine beiden Erweiterungen ab und an für neue Contao-Versionen freigeben.
Solltest du das als Erweiterung umsetzen, wünsche ich dir viel Erfolg!

Sebastian

[folkfreund]

Du musst es ja nicht unbedinge selbst machen! Ich würde da gerne was übernehmen.
Wollte nur vermeiden, dass es konkurierende/inkompatible Erweiterungen gibt.

Ich versuche mich mal daran auf Basis der 1.2.2 und melde mich, wenn es Ergebnisse gibt. Wäre dann schön, wenn das von anderen in der Community mit Tests aus verschiedenen Browsern unterstützt würde.

Bis denn, folkfreund

[folkfreund]

semidynamisches HolyGrail Layout

Hi Sebastian,
es ist soweit, ich hab eine erste Version fertig, die auf deiner Erweiterung basiert (s. Anhang)

Die Punkte 1. und 2. aus meinem obigen Post sind vollständig umgesetzt. Im BE gibt es einen zusätzlichen Schalter beim statischen Layout um den semidynamischen Modus zu aktivieren.
Zu Punkt 3: es gab noch einen Fehler im ursprünglichen HolyGrail, wenn die Breiten von #left und #right in Prozent angegeben wurden. Das ist nun korrigiert (in HolyGrail.php). Allerdings geht das nur, wenn beide Spalten prozentual definiert werden!

Mein Wunsch mit min-width arbeiten zu können verträgt sich überhaupt nicht mit HolyGrail, da es weder möglich ist, min-padding zu definieren noch zu umfließende divs nach dem umfließenden Text zu definieren. Leider.

Wäre schön, wenn du die Änderungen übernehmen möchtest.

Rückmeldungen über Tests auf anderen Browsern erwünscht!

Gruß, folkfreund