Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Da immer noch Mails verwunderter "Mitglieder" bei mir ankommen, weil Login und Registrierung nicht funktionieren... das Forum ist seit geraumer Zeit geschlossen und steht ausschlielich als Nachschlagewerk zur Verfgung. Einerseits bin ich froh, diesen Schritt gewagt zu haben... auf der anderen Seite... wenn ich hier manchmal so lese... es war doch "'ne geile Zeit" mit euch! Macht's gut!

Beste Gre nettesekel

* Friendship

DER Katzenblog  mit tollen Tipps und Ideen fr deine Katze(n) <3

Die letzten Beitrge

Autor Thema: CSS Sticky Footer in NetObjects Fusion  (Gelesen 3692 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beitrge: 8181
CSS Sticky Footer in NetObjects Fusion
« am: 21. November 2012, 22:58:45 »
Ein immer wiederkehrendes Thema ist der „durchgehende” Footer, der sich  mglichst 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 Lsungsversuche ausprobiert, aber irgendwie gab es doch immer irgendetwas, was nicht so 100%ig funktionierte wie es sollte. Nun habe ich nochmals das Web durchstbert und bin auf eine Lsung gestoen, die m.E. 100%ig das tut, was sie soll.

Nachteil bei dem Ganzen ist, dass diese Lsung natrlich nicht vom NOF-Maschneider ist und deshalb ist der footer in der Arbeitsansicht weder zu sehen, noch zu bearbeiten. Die Bearbeitung erfolgt ausschlielich ber eingefgten html-Code.

Da ich aber erklre, wie es geht und man einen footer ja auch nicht dauern ndert, halte ich die Lsung fr durchaus nof-tauglich und absolut genial.

Gefunden habe ich das Ganze hier: http://www.cssstickyfooter.com/
« Letzte nderung: 22. November 2012, 22:10:21 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beitrge: 8181
Style-Datei erstellen
« Antwort #1 am: 21. November 2012, 23:00:36 »
ffnet zuerst Euren Editor und fgt 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.

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

* {margin:0;padding:0;}

/* Du musst margin auf 0 fr alle Elemente setzen und immer padding statt margin
fr vertikale Abstnde (top und bottom) verwenden, anderenfalls werden diese margin-Werte zur Gesamthhe 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-Hhe */
   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 fr IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht fr IE-mac Ende */

« Letzte nderung: 24. November 2012, 18:35:43 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beitrge: 8181
Style-Datei verlinken
« Antwort #2 am: 22. November 2012, 09:51:19 »
Nun legt Ihr fr die Startseite zunchstmal einen eigenen Masterrahmen an. Wie das geht knnt 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 drckt Ihr auf der Tastatur die Taste F10 und dann auf der Eigenschaftenpalette den html-Button. Im sich ffnenden Fenster fgt Ihr den folgenden Code zwischen den Headtags ein.
(Wer nicht sicher ist, wo er bei seiner NOF-Version die Stelle fr die Einfgung findet, kann hier nachsehen: https://www.nof-community.de/index.php/topic,15.0.html )

<link href="./html/footer.css" media="all" rel="stylesheet" type="text/css" />
Im Anschluss fgt 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 verndert, da die Unterseiten im Gegensatz zu Startseite nicht im Rootverzeichnis liegen, sondern im Ordner „html”.

<link href="./footer.css" media="all" rel="stylesheet" type="text/css" />
« Letzte nderung: 22. November 2012, 23:50:48 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beitrge: 8181
Notwendige Einfgungen im Masterrahmen-html
« Antwort #3 am: 22. November 2012, 23:57:53 »
Damit das Ganze auch reibungslos funktioniert, braucht es noch zwei kleine Einfgungen im Masterrahmen-html. In diesem Falle sind die Einfgungen fr die Startseite und Unterseiten zunchst identisch.

Drckt also wieder die Taste F10 und ruft das Masterrahmen-html auf. Am Beginn des Hauptextest fgt Ihr nun folgenden Code ein.
Der Code zentriert eure Seite und ffnet zwei div's welche Eure Seiteninhalte umschlieen werden und fr die korrekte Positionierung des footers sorgen.

<div id="wrap" align="center">
<div id="main" class="clearfix">

Und am Ende des Haupttextes fgt Ihr foldgenden Code ein.
Dieser Code schliet die beiden div's wieder und fgt das footer-div ein.

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

Offline nettesekel

  • Administrator
  • *****
  • Beitrge: 8181
Inhalte im Footer platzieren
« Antwort #4 am: 23. November 2012, 00:03:26 »
Wer in seinem footer auch Inhalte unterbringen will, wie eine Navigationsleiste, oder ein Schnellkontaktformular oder, oder, oder... der legt diese Inhalte zunchst 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.
« Letzte nderung: 25. Dezember 2014, 11:42:26 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beitrge: 8181
Re: CSS Sticky Footer in NetObjects Fusion
« Antwort #5 am: 23. November 2012, 00:05:57 »
Das ist erstmal die Schnellversion, sollte Bedarf bestehen, erweitere ich das Tutorial gern um ein paar Screenshots.
:)

l.g. nettesekel

« Letzte nderung: 20. Juli 2014, 19:12:52 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion