Gästebuch   Impressum

 

>> Startseite    >> CSS mit NOF    >> Scrollbare Zellen in NOF einrichten  
 

Scrollbare Tabellen oder Textbereiche in NOF einrichten

Srollbare Tabellen  oder Textbereich haben einige Vorteile - sie zeigen Inhalte platzsparend und werden auch von exotischen Browsern angezeigt. Allerdings lassen sich diese Inhalte nicht mehr ordentlich als Gesamttext ausdrucken.

Der CSS-Befehl nennt sich overflow - zusätzlich wird dem Bereich die Breite/Höhe eingegeben, die sichtbar sein soll - ist der Inhalt länger oder breiter erscheint der Scrollbalken

  • Die Werte für Breite und Höhe könnt ihr nach eigenem Wunsch ändern
  • Dem overflow können verschiedene Eigenschaften zugeordnet werden
    Scrollbar wird es erst, wenn der Text tatsächlich länger ist als die Zelle lang (overflow=auto)
    Der Bereich soll auch bei höheren maßen nicht scrollbar sein (overflow=hidden)
    Der Bereich soll immer einen Scrollbalken haben - auch bei kleineren Inhalten (overflow=scroll)

So wird eine ganze Tabelle scrollbar gemacht

Tabelle mit den gesamten Inhalten erstellen (dringend darauf achten das die Höhe der Tabelle und auch die Höhe der Zellen auf automatisch steht) - anschließend anklicken, so dass sie markiert ist - im Tabellen-Eigenschaftenfenster auf den HTML-Button klicken - Fenster geht auf  - dort den Reiter/Button vor dem tag anklicken und eingeben wie folgt:

  • <div style="position:relative; width:600px; height:200px; overflow:auto;">

im gleichen Fenster auf den Reiter/Button nach dem tag den div-tag noch schließen mit

  • </div>

div-tabelle1

hier unser Beispiel mit einer tabelle - die Tabelle hat zur besseren Erkennbarkeit einen Rahmen erhalten

Die Königin des Eises umgibt die Welt mit ihrem Kleid,
Bläst Schneegestöber über unendliche Weiten,
Empfängt die Welt mit weißen Zeiten,
Von droben rieseln Flocken, wie herrlich, es schneit.

Gläserne Zapfen reflektieren das Licht,
Zerbrechliche Eiskristalle glänzen,
Zarte Schneeflocken tänzeln,
Der Schneesturm behindert die Sicht.

Doch jungfräulich berührt die Liebe,
Den kalten Atem der Gestalt -
Zärtlichkeit.

Durch Sonnenstrahlen sprießen Triebe,
Überdeckt von weißem Schnee gar bald -
Vollkommenheit.

so wird ein Textbereich oder eine Zelle scrollbar gemacht

Den Kursor an den Anfang des gewünschten Scrollbereiches positionieren - jetzt in der erweiterten Werkzeugleiste auf HTML klicken - ein Fenster geht auf - dort folgenden Code reinkopieren

  • <div style="position:relative; width:200px; height:200px; overflow:auto;> <p>

an das Ende des gewünschten Scrollbereichs wird jetzt noch der p-tag und das div geschlossen

  • </p></div>
der p-tag innerhalb der Einfügung sorgt übrigens dafür, dass der scrollbare Text auch mit unseren normalen textformaten erscheint - es kann natürlich auch via Formatvorlage formatiert werden.

Hier unser Beispiel zur besseren Kenntlichkeit mit Rahmen

Die Königin des Eises umgibt die Welt mit ihrem Kleid,
Bläst Schneegestöber über unendliche Weiten,
Empfängt die Welt mit weißen Zeiten,
Von droben rieseln Flocken, wie herrlich, es schneit.

Gläserne Zapfen reflektieren das Licht,
Zerbrechliche Eiskristalle glänzen,
Zarte Schneeflocken tänzeln,
Der Schneesturm behindert die Sicht.

Doch jungfräulich berührt die Liebe,
Den kalten Atem der Gestalt -
Zärtlichkeit.

Durch Sonnenstrahlen sprießen Triebe,
Überdeckt von weißem Schnee gar bald -
Vollkommenheit.

die Kennzeichnung der HTML-Einfügungen

div-textIm fortlaufenden Text wird die HTML-Einfügung mit einem kleinen blauen kreis gekennzeichnet. ältere NOF-Versionen können Probleme haben, die richtige Seitenhöhe darzustellen






div-tabelle2

die Einfügung in das HTML einer Tabelle wird mit einem hellgrünen Kreis in der oberen linken Ecke gekennzeichnet - die Tabelle selber bleibt als ganzes zu sehen. Ältere NOF-Versionen können Schwierigkeiten haben, die Gesamtlänge der Seite darzustellen

 


dieses tutorial

version: nof11
Schwierigkeitsgrad: mittel

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/scrollbare_zellen_netobjects_f.php:341 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/scrollbare_zellen_netobjects_f.php on line 341