Um hier die möglichen Designs beschreiben zu können, wird Beispielhaft davon ausgegangen, dass die folgende Benutzervorlage
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
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.
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.
