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

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

2. Als Styles im Kopfbereich der HTML-Datei:

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

3. Als verlinktes oder eingebundenes Stylesheet:

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

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:

page.stylesheet = stylesheet.css

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:

page.headerData.5 = TEXT
page.headerData.5.value (
   <link rel="stylesheet" type="text/css" xhref="stylesheet.css"  
   media="screen, projection" title="Standardlayout" />
)

Viele TYPO3-Websites erkennt man beim Blick in den Quellcode (neben
dem TYPO3-Hinweiskommentar) an einem Mischmasch aus CSS-Anweisungen im
Seitenkopf, die durch diverse Extensions eingefügt wurden. Mit der
folgende TypoScript-Notation verlagern Sie diese Styles in ein extern
verlinktes Stylesheet, das von TYPO3 verwaltet wird:

page.config.inlineStyle2TempFile = 1

Wenn ohnehin eigene CSS-Anweisungen verwendet werden,
können für jede Extension die mitgelieferten Standard-Styles deaktiviert bzw. eigene Styles an deren Stelle gesetzt werden:

plugin.tx_nameDesPlugins._CSS_DEFAULT_STYLE >

Durch den Einsatz von CSS müssen barrierefreie und semantisch korrekte
Dokumente nicht unbedingt unansehnlich sein – hier demonstriert am
Beispiel einer horizontal gestalteten Reiternavigation ähnlich der
von Amazon – nur besser.

Eine solche oder ähnliche Aufgabe wird in vielen TYPO3-Umgebungen
mittels „GMENU“ gelöst. Das aus Grafiken aufgebaute Menü ist
allerdings alles andere als barrierefrei und lädt auch deutlich
langsamer als ein Textmenü. Mit CSS kann eine anspruchsvolle
Optik realisiert und ein optimaler HTML-Code erhalten werden. Der am
besten geeignete Code für ein Menü ist das Element „ul“ (eine
ungeordnete Liste). Denn was ist ein Menü anderes als eine Liste
von Links.

<ul>
   <li><a xhref="..">Auswahl 1</a></li>
   <li><a xhref="..">Auswahl 2</a></li>
   <li><a xhref="..">Auswahl 3</a></li>
</ul>

Eine solche Liste lässt sich auch schachteln, um mehrere Menüebenen zu realisieren:

<ul>
   <li><a xhref=“..“>Auswahl 1</a></li>
   <ul>
      <li><a xhref=“..“>Auswahl 1.1</a></li>
      <li><a xhref=“..“>Auswahl 1.2</a></li>
   </ul>
   <li><a xhref=“..“>Auswahl 2</a></li>
</ul>

Außerdem bietet eine Liste genügend Elemente zum Zuweisen von Styles
(„ul“, „li“ und „a“), sodass wir weitgehend auf
Klassen oder „div“-Container verzichten können. Bisher sieht diese
Liste relativ gewöhnlich aus. Mit den ersten
CSS-Anweisungen ändert sich dies aber schnell.

ul {
   padding-top: 1em;
   background-color: #EEF0F2;
   list-style: none;
}
li {
   float: left;    
}

Nun sitzen die Menüpunkte zumindest in einer horizontalen
Reihe. Besonders ansehnlich sieht das zugegebenermaßen allerdings noch nicht aus.

Die eigentlichen Reiter werden aus den a-Elementen gebildet:

ul a {
   float: left;
   display: block;
   text-decoration: none;
   background-color: #C4CCD2;
   border: 1px solid #58646E;
   border-bottom: none;
   padding: 5px 10px;
   margin-right: 2px;
   color: #000;
}

Durch das „Floaten“ der „li“-Elemente dehnt sich der Hintergrund der Liste
nicht um sie aus – das wird dadurch behoben, dass die „ul“-Elemente ebenfalls
mit einem „float: left“ versehen werden. Sie müssen jetzt allerdings dafür
sorgen, dass das nächstfolgende Element nach der Liste das Floaten mit
„clear: left“ wieder auflöst. Außerdem werden mit der folgenden Anweisung alle Abstände auf „0“ gesetzt:

* {
   margin: 0; 
   padding: 0;
}

Auf diese Weise werden Unterschiede in der
Darstellung der verschiedenen Browser vermieden, die unterschiedliche
Voreinstellungen für Abstände haben.

Um einen schönen Verlauf in den Reitern zu erhalten,
der
sich beim „rollOver“ und für den aktuellen Reiter verändert, muss zum
ersten Mal ein Grafikprogramm (z.B. Photoshop) bemüht werden. Eine 100
Pixel
hohe und 4 Pixel breite Grafik wird angelegt, die einen Verlauf eines
mittleren Blautons in ein sehr helles Blau enthält – für den rollOver
wird ein Verlauf von hellgrau nach weiß verwendet. Die Grafiken werden
als „t3n-bgon.jpg“ und „t3nbg-off.jpg“ gespeichert. Im Stylesheet wird nun
die Festlegung der Eigenschaft „background-color“ für das „ul“-Element
durch folgenden CSS-Code ersetzt:

background: #C4CCD2 url(t3n-bgoff.jpg) repeat-x center left;

Damit wird die erstellte Grafik als Hintergrund festgelegt, der
sich horizontal wiederholt und an der linken Seite vertikal zentriert
angezeigt wird.

Für den rollOver-Effekt und die Kennzeichnung der aktuellen Sektion wird nur Folgendes ergänzt:

ul a:hover, ul a.akt {
   background-image: url(t3n-bgon.jpg);
}

Zum Abschluss wird noch eine Linie zwischen Menü und Reiter
gesetzt. Beim „rollOver“ soll diese Linie durchbrochen werden, so dass
nicht auf die eigentlich naheliegende Eigenschaft „border“ für das
„ul“-Element zurückgegriffen wird. Stattdessen wird eine 1 Pixel
hohe Grafik verwendet und mit folgender Zeile für das „ul“-Element deklariert:

background: #EEF0F2 url(t3n-linie.gif) repeat-x bottom left;

Auf diese Weise kann eine vollständig skalierbare
Reiter-Navigation realisiert werden. Als Nebeneffekt besitzt diese
sogar ein semantisch perfektes HTML-Markup und kann zurecht als
barrierefrei bezeichnet werden. Zur Einbindung in TYPO3 wird ergänzend
lediglich ein TMENU benötigt:

lib.hmenue = HMENU
lib.hmenue.1 = TMENU
lib.hmenue.1 {
   noBlur = 1
   expAll = 1
   wrap = <ul >|</ul>
   NO.wrapItemAndSub = <li>|</li>
   ACT = 1
   ACT.wrapItemAndSub = <li class="akt">|</li>       
   CUR = 1
   CUR.doNotLinkIt = 1
   CUR.wrapItemAndSub = <span>|</span>
}

Der TypoScript-Code aus Listing 16 erzeugt eine einfache Liste, in der die
aktuelle Sektion durch eine zusätzliche Klasse „akt“ markiert ist und
die aktuelle Seite nicht verlinkt wird. Um diese Stadien auch im Stylesheet abzubilden, muss kaum
noch Arbeit geleistet werden. Lediglich eine Erweiterung der Selektoren ist
erforderlich:

ul a, ul span {
   ...
}

ul a:hover, ul .akt a, ul span {
   ...
}

Durch den kreativen Einsatz von Hintergrundbildern lassen sich viele
Effekte per CSS erzeugen – so sind zum Beispiel auch Buttons oder Kästen mit
abgerundeten Ecken möglich, die mit der Schriftgröße skalieren.

Sie finden den vollständigen und kommentierten Quellcode auf www.typo3-praxis.de unter dem LinkCode 067.