CSS Sticky Footer in NetObjects Fusion

[nettesekel]

Ein immer wiederkehrendes Thema ist der „durchgehende” Footer, der sich  möglichst immer am Ende der Seite befinden soll. Sprich, bei kurzen Seiten am unteren Bildschirmrand, bei langen Seiten am Ende des Seiteninhalts.

Ich habe schon einige Lösungsversuche ausprobiert, aber irgendwie gab es doch immer irgendetwas, was nicht so 100%ig funktionierte wie es sollte. Nun habe ich nochmals das Web durchstöbert und bin auf eine Lösung gestoßen, die m.E. 100%ig das tut, was sie soll.

Nachteil bei dem Ganzen ist, dass diese Lösung natürlich nicht vom NOF-Maßschneider ist und deshalb ist der footer in der Arbeitsansicht weder zu sehen, noch zu bearbeiten. Die Bearbeitung erfolgt ausschließlich über eingefügten html-Code.

Da ich aber erkläre, wie es geht und man einen footer ja auch nicht dauern ändert, halte ich die Lösung für durchaus nof-tauglich und absolut genial.

Gefunden habe ich das Ganze hier: http://www.cssstickyfooter.com/

[nettesekel]

Öffnet zuerst Euren Editor und fügt den folgenden Code dort ein. Danach speichert Ihr die Datei unter dem Namen footer.css ab und kopiert sie in den Ordner „html” Eurer lokalen Publizierung und in den selben Ordner auf Eurem Server.

Code: [Auswählen]

/* 
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* Du musst margin auf 0 für alle Elemente setzen und immer padding statt margin
für vertikale Abstände (top und bottom) verwenden, anderenfalls werden diese margin-Werte zur Gesamthöhe addiert und der Footer wird zu weit nach unten geschoben, was vertikale Scrollbalken im Browser erzeugt. */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* Muss genau so hoch sein wie der Footer */

#footer {
   position: relative;
   margin-top: -150px; /* Negativer Wert der Footer-Höhe */
   height: 150px;
   clear:both;
        background: grey;
}

/* CLEAR FIX */
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.clearfix {display: inline-block;}

/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht für IE-mac Ende */

[nettesekel]

Nun legt Ihr für die Startseite zunächstmal einen eigenen Masterrahmen an. Wie das geht könnt Ihr hier nachlesen: https://www.nof-community.de/index.php/topic,354.0.html

Damit die Datei auch aufgerufen werden kann, tragt Ihr im Anschluss die Verlinkung zur Datei in das Masterrahmen-html Eures Projekts ein. Als erstes auf der Startseite. Dazu drückt Ihr auf der Tastatur die Taste F10 und dann auf der Eigenschaftenpalette den html-Button. Im sich öffnenden Fenster fügt Ihr den folgenden Code zwischen den Headtags ein.
(Wer nicht sicher ist, wo er bei seiner NOF-Version die Stelle für die Einfügung findet, kann hier nachsehen: https://www.nof-community.de/index.php/topic,15.0.html )

Code: [Auswählen]

<link href="./html/footer.css" media="all" rel="stylesheet" type="text/css" />
Im Anschluss fügt Ihr den folgenden Code in das Masterrahmen-html einer Unterseite ein. Das Vorgehen ist das Selbe wie bei der Startseite, nur der Pfad zur Datei hat sich ein wenig verändert, da die Unterseiten im Gegensatz zu Startseite nicht im Rootverzeichnis liegen, sondern im Ordner „html”.

Code: [Auswählen]

<link href="./footer.css" media="all" rel="stylesheet" type="text/css" />

[nettesekel]

Damit das Ganze auch reibungslos funktioniert, braucht es noch zwei kleine Einfügungen im Masterrahmen-html. In diesem Falle sind die Einfügungen für die Startseite und Unterseiten zunächst identisch.

Drückt also wieder die Taste F10 und ruft das Masterrahmen-html auf. Am Beginn des Hauptextest fügt Ihr nun folgenden Code ein.
Der Code zentriert eure Seite und öffnet zwei div's welche Eure Seiteninhalte umschließen werden und für die korrekte Positionierung des footers sorgen.

Code: [Auswählen]

<div id="wrap" align="center">
<div id="main" class="clearfix">
Und am Ende des Haupttextes fügt Ihr foldgenden Code ein.
Dieser Code schließt die beiden div's wieder und fügt das footer-div ein.

Code: [Auswählen]

</div>
</div>
<div id="footer" align="center"><!--hierhin die Inhalte Eures footers--></div>

[nettesekel]

Wer in seinem footer auch Inhalte unterbringen will, wie eine Navigationsleiste, oder ein Schnellkontaktformular oder, oder, oder... der legt diese Inhalte zunächst auf einer separaten Seite an. Je nach Arbeitsweise erstellt man seine footer-Inhalte mit Hilfe eines Textfeldes oder einer Tabelle bis sie den eigenen Vorstellungen entsprechen, publiziert dann diese Tabelle und kopiert den Quellcode der Tabelle/des Textfeldes an die von mir gekennzeichnete Stelle (<!--hierhin die Inhalte Eures footers-->) ins Masterrahmen-html der zwei Masterrahmen.

[nettesekel]

Das ist erstmal die Schnellversion, sollte Bedarf bestehen, erweitere ich das Tutorial gern um ein paar Screenshots.


l.g. nettesekel