Vorlage:TabMenu/Doku/TabFmtInfo/FineTuning

Dokumentation

Unter „Konzept und praktische Anwendung“ steht, wie Du Dein eigenes TabMenü erstellst; Code-Beispiele liegen unter „Tabs oben“. Darin wird Dir auch gezeigt, wie Du Dein Menü auf den dazu gehörenden Seiten einbinden kannst.

In diesem Kapitel werden die Feineinstellungen dazu beschrieben, wie der Schatten, die Rotation, die Anpassung der Breite Deines Menüs sowie seine Ausrichtung und die Konfiguration des inneren und äußeren Abstands zum Menürahmen.

Schatten und Rotation Bearbeiten

Der Parameter

Shadow = On

schaltet den Schatten an, wohingegen

Shadow = Off

den Schatten ausschaltet. Siehe auch unter Hack: Im aktiven Tab unten einen Schatten erzeugen.

Der Parameter

Rotate = 0

schaltet die Rotation aus. Positive Werte lassen Dein Menü nach rechts kippen; nagative Werte kippen es links herum.

Hier ein Beispielcode...

<!-- BEGIN TABS --> {{Benutzer:DeinBenutzername/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Rotate=-3 | Shadow=On }}
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}

...der die folgende Ausgabe erzeugt:

Tab1

Tab2

Tab3

Tab4

Tab5

Ausgangsvorlage (ein Klick darauf führt zum Quellcode der Vorlage)

Menübreite, Ausrichtung und Abstand zum Rand Bearbeiten

Die Breite des Menüs festlegen (FrameWidth) Bearbeiten

Der Parameter

FrameWidth = 25%

erzeugt ein Tabmenü mit einer Breite von 25% des zur Verfügung stehenden Platzes auf dem Bildschirm.

Der folgende Code...

<!-- BEGIN TABS --> {{Benutzer:MaxMustermann/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Shadow=On | FrameWidth=25% | FrameAlign=center | Margin=0px | Padding=0px | Move=0px, 0 }}

Das ist ein Test.

<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text...

...der in diesem Beispiel ein vorgefertigtes TabMenü vor einem großen Textblock einbindet, erzeugt je nach angepaßtem Parameter die folgenden Ausgaben:

Das Menü innerhalb Deiner Seite rechts platzieren (FrameAlign = right) Bearbeiten

Ändert man im obigen Codebeispiel den Parameter

FrameAlign = right

so bindet sich das Menü auf diese Weise in die Ausgabe ein:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Das Menü innerhalb Deiner Seite zentriert platzieren (FrameAlign = center) Bearbeiten

Beläßt man im obigen Codebeispiel den Parameter

FrameAlign = center

so bindet sich das Menü auf diese Weise in die Ausgabe ein:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Der Text wird hier nicht einfach unterbrochen, sondern nach unten verschoben. Anders ist das auch nicht sinnvoll, denn ein Fließtext sollte nicht Zeile für Zeile vor dem Menü beginnen und erst danach weitergehen. Sinnvoll ist das nur, wenn man die Textblöcke separat definiert, die über, vor, hinter und unter dem Menü stehen sollen...

Text darüber: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text links: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text rechts: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Tab1

Tab2

Das ist ein Test.

Text darunter: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

... wie unter „Zentriertes Menü umgeben von Text“ beschrieben.

Das Menü innerhalb Deiner Seite links platzieren (FrameAlign = left) Bearbeiten

Ändert man im obigen Codebeispiel den Parameter

FrameAlign = left

so bindet sich das Menü auf diese Weise in die Ausgabe ein:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Den inneren Abstand zum Menürand festlegen (Padding) Bearbeiten

Ändert man im obigen Codebeispiel den Parameter

Padding = 28px

so wird die folgende Ausgabe erzeugt:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Der Text innerhalb des TabMenüs hielt vorher einen Mindestabstand zum Rand von ca. einer Standardzeichenbreite (links und rechts) bzw. einer Leerzeile (oben und unten). Nun sind dazu noch einmal 28 Pixeln Abstand dazugekommen. Will man links und rechts den zusätzlichen Abstand auf 10 Pixel setzen, oben und unten aber keinen Abstand hinzufügen, so läßt sich dies wie folgt formulieren...

Padding = 0 10px 0 10px (im Uhrzeigersinn oben, rechts, unten, links)

...was die folgende Ausgabe erzeugt:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Den äußeren Abstand zum Menürand festlegen (Margin) Bearbeiten

Ändert man im obigen Codebeispiel den Parameter

Margin = 28px

so wird die folgende Ausgabe erzeugt:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Im Unterschied zum Parameter Padding ändert sich hier der Abstand zur Umgebung des TabMenüs um 28 Pixel. Sollen rechts und unten 10 Pixel gesetzt werden, ohne jedoch links und oben einen Abstand hinzuzufügen, so läßt sich dies wie folgt formulieren...

Margin = 0 10px 10px 0 (im Uhrzeigersinn oben, rechts, unten, links)

...was die folgende Ausgabe erzeugt:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Das Menü in seiner Position verschieben (Move und Margin) Bearbeiten

Der Parameter Move aus dem obigen Codebeispiel hebt das Menü aus seinen Angeln und verschiebt es auf dem Bildschirm...

Move = 35px -42px

...was die folgende Ausgabe erzeugt (35 Bildpunkte nach rechts und 42 nach oben):

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Der Parameter Margin aus dem obigen Codebeispiel akzeptiert auch negative Werte und kann damit das Menü in seiner Position verschieben und auch den Abstand zur Umgebung anpassen...

Margin = -55px 10px -10px 5px (im Uhrzeigersinn oben, rechts, unten, links)

...was die folgende Ausgabe erzeugt:

 
Tab1

Tab2

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text