Footer im DIV Container in fixierter Position

Beispiel mit fester (fixierter) Position als Layoutbereich, auf dem man natürlich viel besser als auf einer Tabelle frei positionieren kann.

Bitte guckt Euch zuerst mein bebildertes Tutorial zur absoluten Position an. Guckt Euch auch diese Beispiele an.

Für diese Methode muss die HTML-Ausgabe  XHTML oder HTML5 dynamic (NOF 2013 Update 5) für den 1. (untersten) Layoutbereich gewählt werden.

Hintergrundbild

Zunächst habe ich mir meinen 1. Layoutbereich für den durchgehenden Footer mit dem Hintergrundbild aufgezogen und diesem Layoutbereich dann im Fenster “Layoutbereich-Eigenschaften” am mittleren Button oben (Hintergrund) z.B. diese Hintergrund-Grafik “bgfooter.jpg” zugeordnet...

bgfooter.jpg

... oder auf dieser Seite hier das Hintergrundbild rechts:

Footer

CSS

Nun habe ich folgende ID, die ich hier mal “#footerfixed“ genannt habe, in meiner Design-Ansicht in den CSS-Code Editor eingetragen:

#footerfixed {
   bottom:0px;
   float:left;
   position:fixed;
   left:0;
   width:100%;
   height:188px;
}

Diesem 1. Layoutbereich habe ich dann diese IDfooterfixed” als Objekt-ID gegeben.

Nun habe ich einen 2. Layoutbereich mit der ID#contentFixed“ auf dem 1. Layoutbereich für den Inhalt meines Footers aufgezogen, die ich ebenfalls in meiner Design-Ansicht in den CSS-Code Editor eingetragen habe. Ich habe dem 2. Layoutbereich auf dieser Seite auch eine Hintergrund-Grafik gegeben.

Hier gebe ich die die linke Position mit 50% und einem Außenrand von -495px an, also die Hälfte meiner Layoutbreite von 990px.

#contentFixed {
   bottom:0px;
   position:fixed;
   left:50%;
   width:990px;
   margin-left:-495px;
}

Diesem 2. Layoutbereich haben ich dann diese IDcontentFixed“ als Objekt-ID gegeben.

Viel Erfolg!

zu meiner Facebook-Seite
zu meiner Google-Seite


Tutorials von Thomas Frei-Herrmann

Counter Statistik 

zum NOF-Forum Blog