Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
CSS Sticky Footer in NetObjects Fusion
« am: 21. November 2012, 22:58:45 »
Ein immer wiederkehrendes Thema ist der „durchgehende” Footer, der sich  möglichst 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 Lösungsversuche ausprobiert, aber irgendwie gab es doch immer irgendetwas, was nicht so 100%ig funktionierte wie es sollte. Nun habe ich nochmals das Web durchstöbert und bin auf eine Lösung gestoßen, die m.E. 100%ig das tut, was sie soll.

Nachteil bei dem Ganzen ist, dass diese Lösung natürlich nicht vom NOF-Maßschneider ist und deshalb ist der footer in der Arbeitsansicht weder zu sehen, noch zu bearbeiten. Die Bearbeitung erfolgt ausschließlich über eingefügten html-Code.

Da ich aber erkläre, wie es geht und man einen footer ja auch nicht dauern ändert, halte ich die Lösung für 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Style-Datei erstellen
« Antwort #1 am: 21. November 2012, 23:00:36 »
Öffnet zuerst Euren Editor und fügt 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 für alle Elemente setzen und immer padding statt margin
für vertikale Abstände (top und bottom) verwenden, anderenfalls werden diese margin-Werte zur Gesamthöhe 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-Höhe */
   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 für IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht für IE-mac Ende */

« Letzte Änderung: 24. November 2012, 18:35:43 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Style-Datei verlinken
« Antwort #2 am: 22. November 2012, 09:51:19 »
Nun legt Ihr für die Startseite zunächstmal einen eigenen Masterrahmen an. Wie das geht könnt Ihr hier nachlesen: http://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 drückt Ihr auf der Tastatur die Taste F10 und dann auf der Eigenschaftenpalette den html-Button. Im sich öffnenden Fenster fügt Ihr den folgenden Code zwischen den Headtags ein.
(Wer nicht sicher ist, wo er bei seiner NOF-Version die Stelle für die Einfügung findet, kann hier nachsehen: http://www.nof-community.de/index.php/topic,15.0.html )

<link href="./html/footer.css" media="all" rel="stylesheet" type="text/css" />
Im Anschluss fügt 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 verändert, 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Notwendige Einfügungen im Masterrahmen-html
« Antwort #3 am: 22. November 2012, 23:57:53 »
Damit das Ganze auch reibungslos funktioniert, braucht es noch zwei kleine Einfügungen im Masterrahmen-html. In diesem Falle sind die Einfügungen für die Startseite und Unterseiten zunächst identisch.

Drückt also wieder die Taste F10 und ruft das Masterrahmen-html auf. Am Beginn des Hauptextest fügt Ihr nun folgenden Code ein.
Der Code zentriert eure Seite und öffnet zwei div's welche Eure Seiteninhalte umschließen werden und für die korrekte Positionierung des footers sorgen.

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

Und am Ende des Haupttextes fügt Ihr foldgenden Code ein.
Dieser Code schließt die beiden div's wieder und fügt das footer-div ein.

</div>
</div>
<div id="footer" align="center"><!--hierhin die Inhalte Eures footers--></div>
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 zunächst 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)