Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 2

Aufbau einer standardgemäßen und barrierefreien Navigationsleiste: CSS-Tricks für TYPO3

    Aufbau einer standardgemäßen und barrierefreien Navigationsleiste: CSS-Tricks für TYPO3

Ergänzend zu dem Artikel von Jochen Weiland über den Aufbau einer Website mit TYPO3 in dieser Ausgabe, soll hier am Beispiel einer Navigationsleiste die Verwendung von CSS in TYPO3 vermittelt werden.

CSS mit TYPO3 verwenden

Generell lassen sich CSS-Anweisungen auf drei Arten in HTML-Dokumente einbinden:

1. Als Inline-Styles für HTML-Elemente:

HTML

<strong style="font-weight: bold;">Text</strong>

Listing 1

2. Als Styles im Kopfbereich der HTML-Datei:

HTML

<style> 
   strong { font-weight: bold; }
</style>

Listing 2

3. Als verlinktes oder eingebundenes Stylesheet:

HTML

<link xhref="stylesheet.css" rel="stylesheet" type="text/css" />
<style>
   @import url(stylesheet.css);
</style>

Listing 3

Während die erste Methode nur in wenigen Fällen geeignet ist, kommen bei TYPO3-Websites Styles im Kopfbereich und verlinkte Stylesheets häufig vor. Die TypoScript-Anweisung zum Einbinden eines Stylesheets im Kopfbereich lautet:

TYPOSCRIPT

page.stylesheet = stylesheet.css

Listing 4

Diese Methode hat jedoch einige Nachteile – so lassen sich keine individuellen Titel oder rel-Attribute für die Stylesheets vergeben. Stattdessen wird auf eine universellere Methode zurückgriffen, mit der beliebige Zeichenfolgen in den Seitenkopf geschrieben werden können:

  • Seite:
  • 1
  • 2
  • 3
  • 4
  • 7

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden