Footer im DIV Container in absoluter Position

Beispiel mit absoluter Position als Layoutbereich. Guckt Euch auch diese Beispiele an.

In diesem Beispiel habe ich das mal mit NOF-Mitteln realisiert. Hier das gleiche Prinzip, jedoch mit einem Layoutbereich und einem zentrierten Textfeld.

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 “#footerlayoutbereich“ genannt habe, in meiner Design-Ansicht in den CSS-Code Editor eingetragen:

#footerlayoutbereich {
   float:left;
   position:absolute;
   left:0;
   width:100%;
   height:188px;
}

> Design-Ansicht > CSS-Code Editor

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

Nun habe ich einen 2. Layoutbereich mit der ID#footerContent“ 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.

#footerContent {
   position:absolute;
   left:50%;
   width:990px;
   margin-left:-495px;
}

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

Bitte achtet darauf, dass NOF diese Objekt-ID der umbenannten Layoutbereiche auch annimmt. Bei älteren Versionen als NOF 2013 kann es vorkommen, dass der Eintrag bei dem Reiter “Aktionen” nicht gleich angenommen wird. Kontrolliert das, indem Ihr Eure Arbeitsfläche auf “Fortgeschritten” stellt:

> Menü oben > Ansicht > Arbeitsfläche > Fortgeschritten wählen

und klickt dann unten im Eigenschaften-Fenster auf den rechten Reiter der <Tag> Eigenschaften, dort muss dann die ID korrekt eingetragen sein.

... alternativ könnt Ihr das auch im “Objekt-Explorer” (F4 Taste) umbenennen und kontrollieren.

Nun kann ich wie gewohnt meine Objekte in diesem 2. Layoutbereich frei positionieren.

Viel Erfolg!

zu meiner Facebook-Seite
zu meiner Google-Seite


Tutorials von Thomas Frei-Herrmann

Counter Statistik 

zum NOF-Forum Blog