(Stand: 23.11.24, Adresse: http://www.grammiweb.de/html/html073.shtml)
Angepasste Tabreiter
Sicherlich kennen Sie Webseiten, die Tabreiter als Navigationsmittel verwenden. Viele Betreiber greifen auf diese Lösung zurück, lässt sie doch viel Platz für den restlichen Inhalt der jeweiligen Seite.
Wenn Sie sich die Tabreiter von z. B. Amazon anschauen, fällt eines schnell auf: Je nach aufgerufener Rubrik ist der dazugehörige Reiter entsprechend anders eingefärbt, so dass der Besucher schnell sehen kann, wo er sich gerade befindet.
Es gibt verschiedene Wege, dieses Einfärben zu ermöglichen. Eine der bequemsten und trotzdem effektivsten Möglichkeiten ist die Verwendung von CSS:
Der Trick liegt darin, erst einmal verschiedene Style-Sheets anzulegen. Neben einem, das alle allgemeinen Angaben enthält, erstellen Sie noch entsprechend der Anzahl der gewünschten Tabreiter zusätzliche, in denen die Hintergrundfarben der jeweiligen Reiter definiert werden. Diese Definitionen ersetzen sich entsprechend ihrem Aufruf, also wird die Hintergrundfarbe, die im allgemeinen Sheet definiert wird, von der, die im individuellen festgelegt wurde, "überschrieben".
Diese Style-Sheets werden dann in die Seiten entsprechend ihrer Zugehörigkeit eingebunden, so dass also z. B. jede Seite, die in "Rubrik 1" gelistet wird, das Style-Sheet zur Rubrik 1 erhält, wohingegen die Seiten, die in "Rubrik 2" erscheinen, das Sheet zur Rubrik 2 laden.
In unserer Onlinedemo können Sie sich die Funktion anschauen.
Hier ein Beispiel:
Im allgemeinen Sheet, z. B. "style.css":
.tabreiter_rahmen { border: 1px solid black }
.rubrik1 { background-color: silver }
.rubrik2 { background-color: silver }
.rubrik3 { background-color: silver }
Hier werden 4 Definitionen erstellt: Der Rahmen soll 1 Pixel breit und schwarz sein, die Rubriken jeweils einen hellgrauen Hintergrund erhalten.
Im Sheet "1.css":
.rubrik1 { background-color: yellow }
In diesem Sheet wird nun die im allgemeinen Sheet vergebene Farbe "Hellgrau" durch "Gelb" ersetzt.
Entsprechend diesem zweiten Style-Sheet erstellen Sie dann noch die anderen:
Sheet "2.css":
.rubrik2 { background-color: yellow }
...
Außer diesen einzelnen Anpassungen enthalten die spezifischen Style-Sheets keine weiteren Informationen.
Nun machen Sie sich daran, die vorhandenen Seiten den angepassten Definitionen zuzuordnen. Wahrscheinlich ist im Kopfbereich der Seiten bereits ein Eintrag wie der folgende vorhanden:
<link rel="stylesheet" type="text/css" href="/style.css">
Ergänzen Sie darunter einfach die zur Rubriken-Zugehörigkeit der Seite passende Definition, also z. B. bei einer Seite, die in der Rubrik 1 aufgeführt wird:
<link rel="stylesheet" type="text/css" href="/1.css">
oder bei einer Seite, die zur Rubrik 2 gehört:
<link rel="stylesheet" type="text/css" href="/2.css">
Wichtig: Die individuellen Sheets müssen unter dem allgemeinen aufgerufen werden, da ihre Inhalte ja die "normalen" ersetzen sollen.
Nun fehlt nur noch das eigentliche Menü, welches in allen Seiten enthalten sein sollte:
<table cellpadding="5" cellspacing="0" border="0">
<tr>
<td class="rubrik1">
<a href="/rubrik1/index.shtml">Rubrik 1</a>
</td>
<td class="rubrik2">
<a href="/rubrik2/index.shtml">Rubrik 2</a>
</td>
<td class="rubrik3">
<a href="/rubrik3/index.shtml">Rubrik 3</a>
</td>
</tr>
</table>
Das war's schon. Das Ergebnis sieht zwar sehr einfach aus, aber mit ein wenig HTML- und CSS-Kenntnis können Sie das Menü noch verfeinern.
[an error occurred while processing this directive] [an error occurred while processing this directive]© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 23.11.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt