Einzelnen Beitrag anzeigen
  #8 (permalink)  
Alt 14.08.2016, 03:12
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Hier mal, was ich bis jetzt habe.
Ich habe aus deinem Quelltext mal eine aktuelle responsive Webseite mit einem Sticky Footer erstellt. Die Höhe von header und footer passen sich ihrem jeweiligen Inhalt an. Höhenangaben (height) sind deshalb für beide nicht notwendig und stören sogar.

Zunächst deine Datei:

Quelltext Elma

Ich habe mir eine Vorlage erstellt, die für über 90% aller Layouts verwendet werden kann. Es handelt sich um ein sogenanntes Holy Grail Layout, dem ich etwas Inhalt hinzugefügt habe:

Vorlage Holy Grail Layout

Dann erfolgen die Anpassungen an das durch deinen Quelltext erkennbare Layout:

Seite mit Elmas Layout

Zum Schluß wird noch ein Fallback für ältere IE ab dem IE7 hinzugefügt. In allen anderen Browsern, auch dem IE11, sind natürlich keine Änderungen sichtbar. Um das Fallback anzuschauen muss die Seite also in einem älteren IE aufgerufen werden.

Achtung: Der Dokumentmodus im IE11 und neueren verhält sich teilweise anders als originale IE 7, 8 und 9. Der Dokumentenmodus ist nur eine Emulation. Um das Fallback korrekt zu testen muss die Website deshalb in originalen älteren IE aufgerufen werden:

Seite mit Elmas Layout und IE Fallback

Noch ein Beispiel mit etwas mehr Text in header und footer ohne Änderungen im CSS um zu zeigen, wie sie sich ihrem Inhalt flexibel anpassen und nur so viel Platz beanspruchen, wie sie auch benötigen:

Mehr Text in header und footer

Zum Schluß noch ein eher praxisorientiertes Beispiel mit mehr Inhalt und gefloateten Grafiken, die durch ein Clearfix eingefangen werden, wie float aktuell sinnvoll in seiner ursprünglichen Aufgabe verwendet werden kann:

Mehr Inhalt mit Bildern, float und clearfix

Gruss

MrMurphy

Geändert von MrMurphy (14.08.2016 um 12:18 Uhr)
Mit Zitat antworten