Tutorial Header und Footer im DIV Container

Diese Seite wurde folgendermaßen erstellt:


Hier habe ich die NOF eigene Hintergrund-Grafik für den Header verwendet. Sie füllt also meinen Banner-Bereich und mein Layout. In meinen Layout-Eigenschaften habe ich das Häkchen bei “Im Browser zentrieren” gesetzt.


Nun habe ich zwei kleine CSS-Klassen in die HTML meines Projektes gebracht.

Für die Class header padding-bottom (hier 20px) als Abstand zum Inhalt. Für den Hintergrund (background-image) des Header-Containers habe ich die NOF eigene Hintergrund-Grafik gewählt. Die Hintergrund-Grafik wiederholt sich horizontal (background-repeat x), achtet hierbei auf die relative Pfadangabe zu dieser Grafik. Von einer Unterseite mit 2 Punkten ../, von der Home mit 1 Punkt ./

Für die Class footer habe ich eine eigene, leicht transparente Grafik angegeben, natürlich könnte man hier auch einfach eine Farbe
angeben, padding-top (hier 1px) und padding-bottom (hier 21px) als Abstand zum Inhalt und zum unteren Browser-Rand.

> Master-Rahmen markieren > Fenster “Master-Rahmen-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<style type="text/css">

    #header
   {
      position:fixed;
      top:0px; left:0px; right:0px;
      padding:0px;
      padding-bottom: 20px;
      background-image: url(../assets/images/Background.gif);
      background-repeat: repeat-x;
   }

   #footer
   {
      position:fixed;
      bottom:0px; left:0px; right:0px;
      background-image: url(../assets/images/BG-Footer.png);
      background-repeat: repeat-x;
      padding-top:1px;
      padding-bottom:21px;
   }

</style>

Im oberen Masterrahmen-Bereich habe ich mir einen extra Layoutbereich aufgezogen. In diesen Layoutbereich habe ich meinen Banner, meine Schrift und meine Navigationsleiste gelegt, da dieser gesamte Bereich feststehend bleiben soll.

Dieser Layout-Bereich erhällt nun die ID #header dieser CSS-Class, die ich oben in die HTML der Seite eingebracht habe.

> Layoutbereich aufziehen > Button “HTML” tragt Ihr ein:

“vor dem Tag” (ab NOF 11 “vorher”) im Objekt Editor

<div id="header">

“nach dem Tag” (ab NOF 11 “nachher”) schließt Ihr dieses DIV wieder

</div>

... und im unteren Masterrahmen-Bereich habe ich mir ein Textfeld aufgezogen. In diesem Textfeld habe ich meine zusätzliche Navi erstellt, diese zentriert und das Textfeld in einen DIV-Container “verpackt”. Dazu schreibt Ihr die ID #footer dieser CSS-Class, die ich oben in die HTML der Seite eingebracht habe, in den DIV-Container.

> Textfeld aufziehen > demarkieren > markieren und im Fenster “Textfeld-Eigenschaften” > Button “HTML” tragt Ihr ein:

“vor dem Tag” (ab NOF 11 “vorher”) im Objekt Editor

<div id="footer">

“nach dem Tag” (ab NOF 11 “nachher”) schließt Ihr dieses DIV wieder

</div>

Achtung:

Bitte achtet darauf, dass Ihr einen validen DOCTYPE verwendet, denn der “Standard-DOCTYPE” von NOF veranlasst den IE in den
“Quirks-Modus” zu schalten und in diesem Modus funktioniert die verwendete CSS-Class nicht.

Viel Erfolg!