Tutorials von Thomas Frei-Herrmann
Tutorial Footer im DIV-Container
Diese Seite wurde folgendermaßen erstellt:
Zunächst habe ich mir eine kleine Grafik für den Hintergrund erstellt. Diese Grafik habe ich als Hintergrund in der Design-Ansicht angegeben. Sie füllt also meinen Banner-Bereich und mein Layout. In meinen Layout-Eigenschaften habe ich das Häkchen bei “Im Browser zentrieren” gesetzt.
Dann habe ich mir einen extra Layout-Bereich (diesen gelben Bereich hier) aufgezogen.
Nun habe ich eine kleine CSS-Class in die HTML meines Projektes gebracht. Die Höhe (height) des DIV-Containers mit 17px (meine Textfeld-Höhe) angegeben und die Hintergrund-Farbe (background-color) des Containers habe ich als #0000ff (blau) eingetragen, padding (hier 2px) gibt den Abstand (in alle Richtungen) zum Inhalt an, damit habe ich die gesamte Höhe dieses DIV-Containers auf 21px festgelegt. Die Breite (width) steht auf 100%, die sich auf die gesamte Breite des verwendeten Browsers bezieht.
> Master-Rahmen markieren > Fenster “Master-Rahmen-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen
<style type="text/css">
#footer
{
position:fixed;
bottom:0px;
left:0;
height:17px;
background-color:#0000ff;
background-position : 50% 0%;
padding:2px;
width:100%;
}
</style>
... und im unteren Masterrahmen-Bereich habe ich mir ein Textfeld aufgezogen. In dieses Textfeld habe ich meinen Text geschrieben und diesen 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. Ihr könntet da natürlich auch Bilder, eine Navi oder sonst was rein packen.
> 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!