|
In Arbeit ...
Um hier die möglichen Designs beschreiben zu können, wird Beispielhaft davon ausgegangen, dass die folgende Benutzervorlage
|
Ausgangsvorlage (Tab2 zeigt in dem Beispiel nach Benutzer:MaxMustermann/Tab2)
|
|
in den Benutzernamensraum von MaxMustermann kopiert wurde
- Benutzer:MaxMustermann/Templates/MyTabMenu
In den folgenden Kapiteln wird die Benutzerseite
- Benutzer:MaxMustermann/Tab2
betrachtet. Es wird davon ausgegangen, dass auf dieser Seite das Menü über den folgenden Code eingebunden wurde:
<!-- BEGIN TABS --> {{Benutzer:MaxMustermann/Templates/MyTabMenu | Position=Top | Tab2=Active | BgColor=#FFFFFF }}
Inhalt der innerhalb des Tabrahmens angezeigt werden soll.
<!-- END OF TABS -->{{Benutzer:NeonZero/Templates/TabMenu | Mode=EndTabMenu }}
Das Erscheinungsbild der Tabs läßt sich wie folgt anpassen: Fügt man bei in der Vorlage für das Tabmenü unter der Konfiguration von Tab5 den Parameter
- AdjustRight=60
hinzu, so wird damit festgelegt, dass man hier einen Abstand von 60 Pixeln zwischen dem letzten Tab (hier Tab5) und dem rechten Rand haben möchte.
|
Letzter Tab: AdjustRight=60; Problem: einzig der IE stellt den Tabnamen nicht mehr zentriert dar (die anderen Browser haben das Problem nicht)
|
|
Die Angabe läßt sich auch in Prozent vornehmen: Der Parameter
- AdjustRight=25%
erzeugt das folgende Menü:
Lösungen für das IE-Problem: Der IE ignoriert die Anweisung style="text-align:center;", die in der Vorlage verwendet wird, und stellt den Text der Tabnamen linksbündig dar. Andere Browser haben dieses Problem nicht.
Wer sich daran stört, kann mithilfe der folgenden Anpassung erreichen, dass auch der IE den Text zentriert darstellt:
Man kann jedem Tab eine Automatische Tabbreite zuweisen. Dazu dient der Parameter
- TabWidth=0 ← Hinweis: Über einen Klick darauf gelangt man zur Vorlage, die diese Einstellung verwendet.
Das erzeugt ein Menü, welches unter allen Browsern den Text der Tab-Namen zentriert darstellt.
Allerdings hat jeder einzelne Tab dann eine unterschiedliche Größe, je nach Länge des dargestellten Textes (Tabname). Möchte man auch das verhindern, so bietet sich eine andere Lösung an: Zunächst einmal muss der prozentuale Platz berechnet werden, den die Tabs in der zu Grunde liegenden Konfiguration einnehmen sollen.
Oben wurde festgelegt, dass der Platz zwischen dem letzten Tab und dem rechten Rand 25% der Gesamtlänge einnehmen soll. Es bleiben 75% für die Tabs. Es sind insgesamt 5 Tabs. 75% / 5 = 15% pro Tab.
Diese 15% weist man den Tabs zu. Dazu dient der Parameter
- TabWidth=15%
Bei der Berechnung wurden die Zwischenräume vernachlässigt. Daher sollte ein Tab (möglichst der mittlere Tab, hier also Tab3) eine automatische Tabbreite erhalten:
- Tab3: TabWidth=0
Er wird nun ein wenig kleiner dargestellt, was durch die mittlere Position allerdings kaum auffällt. Je mehr Tabs das Menü enthält, desto größer wird der Effekt allerdings, da es mehr Zwischenräume gibt. Dann kann man bei dem einen oder anderen Tab ggf. 1% abziehen, oder, wie in diesem Fall, die Einrückung des rechten Randes etwas verringern (AdjustRight=23% statt AdjustRight=25%).
Das erzeugt ein Menü, welches unter allen Browsern den Text der Tab-Namen zentriert darstellt.
Mit Hilfe des Parameters TabWidth läßt sich die Breite einzelner Tabs unterschiedlich festlegen. Hier ist die ursprüngliche Einstellung der Vorlage, in der einzig der Tab3 über
- TabWidth=20%
vergrößert wird.
Der Parameters TabSpace legt dagegen den Abstand zwischen den Tabs fest. Hier wird für Tab5 ein
- TabSpace=50
verwendet:
Tabs über die komplette Breite ziehen (Block)
Bearbeiten
| 
