Das CSS kann in NOF bearbeitet werden.

auch das CSS wurde als neues Asset eingebunden.

 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

Hier 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!