Gästebuch   Impressum

 

>> Startseite    >> CSS mit NOF    >> Tabbed Pages von Stu Nicholls in  NOF **  
 

Multi-Layer-Tabs mal anders: Tabbed Pages von Stu Nicholls

Die MLR (MultiLayerRegions) sind in NOF11 als neues Feature integriert. Nach den ersten Euphorien zeigten sich aber Einschränkungen. Das CSS für die MLRs ist sehr umfangreich und verschachtelt - man tut sich schwer, hier einen eigenen Look einzupassen (siehe Film). Und sieht das MLR endlich den Wünschen entsprechend aus, kann es nur auf dieser einen Seite genutzt werden. Kopieren und einfügen auf einer anderen Seite führt zur totalen Zerstörung. Ich bin stundenlang davor gesessen und habe irgendwann entnervt aufgegeben.

Aber auch andere Mütter haben hübsche Töchter (Nachtrag: und natürlich auch Söhne ;-))

Stu Nicholls - der Vater aller CSS-Spielereien hat eine schlanke Variante ins Netz gestellt, die sich auch wunderbar einfach in NOF einbauen lässt. Naja - einfach ist natürlich immer relativ - aber es geht mit nur ganz wenigen HTML-Einfügungen und wenn man sich daran gewöhnt hat, dass man in der Arbeitsansicht von NOF alle Inhalte untereinander sieht, ist es wirklich ok.

 

Als erstes die Assets

neues-asset-stu-nicholls-tabsdamit später alles klappt, werden in der Verwaltungsansicht als erstes 2 Dateien als Asset eingebunden (wer das noch nicht gemacht hat schaut bitte hier).
Wichtig: beim Einbinden das Häkchen bei immer publizieren nicht vergessen.

tabbed_pages.css
tabbed_pages.js

js-datei-stu-nichols-tabsKleiner Tip: Auch die eingefügte JS-Datei könnte man nun in der Verwalten-Ansicht markieren und mit Rechtsklick in einem Editor öffnen und so direkt in NOF bearbeiten. Die Änderungen werden automatisch aktualisiert.

Beide Assets müssen natürlich noch im Head vermerkt werden. Also F9 drücken auf den HTML-Button und dort zwischen den Headtags wir folgt eintragen.

<link rel="stylesheet" media="all" type="text/css" href="scripte/tabbed_pages.css" />

<script src="scripte/tabbed_pages.js" type="text/javascript"></script>

assets-stu-nichols-tabsAchtet bitte auf den Pfad. Der Ordnung halber habe ich für diese Dateien ein extra Verzeichnis angelegt und sie in der Publizierungsansicht entsprechend verschoben (siehe auch eigene Verzeichnisse), Der Pfad heißt bei mir scripte/datei.css weil ich im HTML-Ordner einen Scripte-Ordner angelegt und dort die Dateien reingeschubst haben.

 

 

 

Das CSS kann in NOF bearbeitet werden.

auch das CSS wurde als neues Asset eingebunden.

css-stu-nichols-tabs Es kann jetzt direkt im Style von NOF bearbeitet werden - zugegeben nicht sonderlich komfortable was NOF da zeigt (seltsamerweise wird manchmal auch gar nix gezeigt - hier hilft ein kurzer Wechsel in eine andere Ansicht) aber mann kann die Einstellungen im Eigenschaftenfenster sehen, bearbeiten und erweitern, was für viele User einfacher ist, als manuell in der Code-Ansicht zu fummeln. Auch ist die Anzahl der Formatierungen um einiges überschaubarer als die Formatierungen der NOF-Tabs (und mehrfach anwendbar ist es auch - was hab ich schon geschimpft, wenn ich den gleichen NOF-MLR auf mehreren Seiten nutzen wollte)

#gallery ist das grundsätzliche Aussehen der Tabs
#gallery div.off ist das Aussehen der inaktiven Tabs
#gallery div.on ist das Aussehen des aktiven Tabs
#div.hide sind die versteckent Text (hier besser nix ändern)
#div.show ist der angezeigte Text
#div.show img sind die Bilder innerhalb der DIVs - hier finden wir den float-Befehl zum umbrechen der Texte
.clear beendet das Umbrechen der Texte am Bild

 

Auch Bilder sind natürlich möglich

iStock_000003896769SmallHier ein Tab mit  Bild - die Position des Bildes (hier linksbündig mit Abstand rechts/unten) finden wir in der CSS-Datei. Schaut zwar in der Arbeitsansicht etwas ungewohnt aus, ist aber sehr viel sinnvoller als das Text umbrechen in NOF. Hier muss man also nix mehr am Bild machen - alles schon da.

Diese Einstellung gilt übrigens nur für die Bilder in den DlVs. Wer aber scharf nachdenkt, könnte das häufiger auch in anderen Projekten nutzen.

Und ein ganz wilder Trick damit es auch mit weniger Text klappt ohne dass die Bilder ineinander rutschen

<br class="clear" >

als HTML-Einfügung am Ende vom jeweiligen Text.

 

die Einfügungen

Alle Inhalte der oberen Tabellenreiter werden als reines HMTL an den Beginn gesetzt

<div id="gallery">
<div class="on" title="tab1"><span>die Assets</span></div>
<div class="off" title="tab2"><span>das CSS</span></div>
<div class="off" title="tab3"><span>Bilder mit Float-Befehl</span></div>
<div class="off" title="tab4"><span>Die Einfügungen</span></div>
<div class="off" title="tab5"><span>über Stu Nicholls</span></div>
</div>

<div id="tab1" class="show">

Der erste Tab soll bereits offen sein - daher hat er class=on. Damit die Tab-Inhalte wissen zu welchem Text sie gehören, wurden sie im Title nummeriert (hier kann aber auch Text genutzt werden).

Die letzte Zeile der Einfügung ist schon der Start für den ersten Text

Am Anfang des Textes für den nächsten Reiter kommt dann ins HTML wie folgt

</div>

<div id="tab2" class="hide">

zum einen ist das das Ende des Reiter davor - zum Zweiten startet der neue Reiter. Achtet darauf, dass alles ordentlich nummeriert ist beziehungsweise die Texte in TAB-Title und DIV-ID einheitlich sind. Wichtig ist auch, dass nur eine ID die class=show hat. Alle anderen DIVs bitte class=hide eintragen.

Der letzte Text erhält natürlich dann nur das abschließende </div> und keinen neuen Start-div.

 

Stu Nicholls - CSS-Tüftler mit Herz

Diese Tabs sind von Stu Nicholls entwickelt und kostenlos im Web zur Verfügung gestellt. Alle Tüfteleien von ihm - und das sind einige - findet Ihr unter http://www.stunicholls.com. Leider sind einige nicht ganz soo einfach in NOF einzubauen, da alles div-orientiert ist, und in NOF oft nur als HTML-Volleinfügung zu nutzen sind.

Stu stellt seine Spielereien kostenlos ins Netz, freut sich aber über Donations/Spenden via Paypal - wir haben am Ende des Stammtisch auch ein Paar Euronen gespendet.

Einzelne Sachen sollen aber nicht ohne Erlaubnis für kommerzielle Zwecke genutzt werden. Für die Verwendung dieser Tabs erwartet Stu bei kommerzieller Verwendung einen kleinen Obulus. Was ich auch wirklich gerechtfertigt finde.

Alle Copyright-Vermerke in den Dateien, bleiben natürlich unverändert!

Und wie geht das nun genau?

die Arbeitsweise ist etwas ungewohnt. Als erstes schreiben wir den Text ganz normal fortlaufend - also alle Texte der Reihe nach schreiben - in der Arbeitsansicht ergibt sich also ein relativ langer Text. Wer mit Überschriften arbeitet, setzt davor bitte noch  jeweils eine Leerzeile (da der ff sonst Fehler zeigt, die ich noch nicht ganz klären konnte).

Die oben aufgeführten Einfügungen kommen jeweils als HTML-Einfügung in die Leerzeile. Wer keine Überschriften nutzt, kann uac direkt vor das erste Wort platzieren. Die ganze Prozedur kann man im Film genau verfolgen (Film folgt noch heute).

Anmerkungen zum CSS

Die Breite der Inhalte wird in der CSS-Datei definiert (wichtig: die Breite wird an 2 Stellen geändet!). Wenn Ihr die CSS-Datei als Asset eingebunden habt, können alle Werte im Style/Selektoren geändert werden (Hintergrundfarbe, Rahmen, etc ) - Ich werde nicht jeden Punkt erklären - hier ist einfach mal spielen angesagt - auf dem Stammtisch haben wir dem Textbereich z.B. ein Hintergrundbild verpasst.

 


dieses tutorial

version: nof11
Schwierigkeitsgrad: mittel
Download: js & css als zip

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten
 

-
Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/netobjects_multi-layer_tabbed_.php:360 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/netobjects_multi-layer_tabbed_.php on line 360