Durchgehender Footer aus Fusion 2013

[nettesekel]

In vielen der neuen Vorlagen für NOF2013 ist ein durchgehender Footer zu sehen. Wie dieser realisiert wurde möchte ich in folgendem kleinen Tutorial kurz erläutern, damit jeder in der Lage ist, diese Lösung auch für eigene Projekte zu nutzen.

[nettesekel]

Im ersten Schritt kopiert ihr euch folgenden Code...

Code: HTML5

1. #footer {
2. float:left;
3. position:absolute;
4. left:0;
5. width:100%;
6. height:198px;   /* Höhe bitte anpassen */
7. }
8.  
9.  
10. #footerContent {
11. position:absolute;
12. left:50%;
13. width:990px;   /* Breite des Layouts */
14. margin-left:-495px; /* Hälfte der Layoutbreite */
15. }

...und fügt ihn im Design unter dem Reiter CSS ein. Die ggf. nötigen Änderungen entnehmt ihr bitte den /*Kommentaren*/  im CSS-Code.

[nettesekel]

In der Seitenansicht zieht ihr nun (am besten im unteren Masterrahmen) einen neuen Layoutbereich auf. Klickt dazu auf das markierte Icon in der Symboleiste und zieht im Anschluss den Layoutbereich an der gewünschten Stelle in eurem Layout auf. Gebt ihm in etwa die selbe Breite, wie dem Rest eurer Inhalte.

[nettesekel]

Markiert den Layoutbereich mit einem einfachen Klick und ruft den zweiten Reiter der entsprechenden Eigenschaftenpalette auf.
Hier könnt ihr festlegen, welche Farbe euer Footer haben soll und ob ggf. ein Hintergrundbild verwendet werden soll.



Im Anschluss markiert ihr Reiter 3 der Eigenschaftenpalette und gebt dem Layoutbereich dort die ID "footer".  Die Schreibweise muss identisch mit der im CSS-Code sein, welchen wir anfangs im Design platziert haben.

[nettesekel]

Nun zieht ihr einen weiten Layoutbereich auf und platziert diesen auf dem zuerst eingefügten Layoutbereich. Auf diesem Layoutbereich bringt ihr die Inhalte untre, die in eurem Footer erscheinen sollen.

Markiert auch diesen Layoutbereich mit einem einfachen Klick, aktiviert wieder Reiter 3 der EP und vergebt für diesen Layoutbereich die ID "footerContent".
Achtet auch hier wieder auf die Schreibweise.

[nettesekel]

Das war auch schon die ganze Kunst. Viel Spaß und Erfolg bei der Umsetzung. 

-----------------------------------------------------------------------------------------------------

Eine weitere Lösung für den durchgehenden Footer findet ihr hier... www.nof-community.de/index.php/topic,440.0.html  Vorteil dieser Lösung ist, dass der Footer immer am unteren Bildschirrand fixiert ist, selbst bei Seiten die keinen oder wenig Inhalt haben. Nachteil ist, dass Inhalte nur durch Einfügungen im Code eingebunden werden können und nicht einfach in der Arbeitsansicht.