Cascading Style Sheets

Allgemeines

Cascading Style Sheets sind eine tolle Methode um HTML-Seiten zu formatieren. Außer der offiziellen Dokumentation habe ich besonders die folgenden Bücher als hilfreich empfunden.

Eric A. Meyer, Cascading Style Sheets: The Definitive Guide, 2nd Edition , O'Reilly
Christopher Schmitt, CSS Cookbook , O'Reilly

Außerdem möchte auf die folgenden Seiten hinweisen die viele Anregungen bieten.

Mein Style

Man kann sich das Style Sheet für meine Seiten natürlich direkt ansehen. Im folgenden gebe ich noch einige Hinweise zu besonders interessanten Stellen.

Das Menü ist eine unnumerierte Liste. Damit die Listeneinträge nebeneinander und nicht untereinander stehen habe ich sie mit float: left formatiert. Alternativ würde auch display: inline funktionieren.

div#nav>ul {
- padding: 0.3em 0;
- margin-left: 0;
- height: 1.05em;
- border-bottom: 0.1em solid #788;
- font: bold 12pt Verdana, sans-serif;
div#nav>ul>li {
- list-style: none;
- margin: 0;
- height: 1.05em;
- float: left;
}

Die Tool-Tipps sind als span Tags in die Links eingefügt und werden durch den folgenden Code formatiert.

div#nav a>span {
- display: none;
}
div#nav a:hover>span {
- display: block;
- position: fixed; top: 3em;
- right: 3em;
- width: 14em;
- padding: 0.5em;
- margin: 1em;
- z-index: 100;
- color: black;
- background: #DD0;
- font: 10pt Verdana, sans-serif;
- text-align: center;
}

Der erste Stiel sorgt dafür, daß die Toolstips zunächst nicht angezeigt werden, der zweite sorgt für die Anzeige, so bald sich die Maus über den Menüpunkt bewegt.

Die Aufklappenden Menüs sind eine geschachtelte Liste. Damit dieser Trick klappt muß das :hover Pseudoelement auch bei beliebigen Tags interpretiert werden. Dies ist nicht unbedingt bei jedem Browser der Fall. Aber dann kann man über die Navigationsseiten gehen, so das dieses Design relativ sicher ist.

div#nav ul ul {
- display: none;
}
div#nav>ul li:hover ul {
- display: block;
- position: absolute;
- width: 20em;
- margin: 0.3em 0 0 0;
- padding: 0;
}

Das Hervorheben, des Aktuellen Links wird ebenfalls über Style Sheets gesteuert. Dazu bekommt jeder Body eine Id, wie z.B. B-V und die Links bekommen Ids der Form sub-V. Das Hervorheben geschiet dann einfach durch die folgende Definition.

#B-H li#sub-H>a,
#B-V li#sub-V>a,
#B-L li#sub-L>a,
#B-M li#sub-M>a,
#B-C li#sub-C>a {
- background: white;
- border-bottom: 0.15em solid #FFF;
}

Da ich möchte das die Kopf- und Fußzeile immer sichtbar bleiben habe ich sie mit position: fixed formatiert.

div#foot {
- display: block;
- position: fixed;
- bottom: 0;
- left: 2.5em;
- right: 2.5em;
- background: #FFF;
- border-top: 2px solid black;
- font: lighter 12pt Verdana, sans-serif;
}

Dies waren alle besonders ungewöhnlichen Stieldefinitionen. Interessant ist noch die Klasse .none

.none {
- display: none;
}

Ich benutzte diesen Stiel, um spezielle Formatierungen für nicht CSS-Browser wie lynx zu erzeugen oder die email Adresse mit NOSPAM Einschüben zu verfälschen.

Sei nett zum Internet-Explorer

Der Internet-Explorer unterstützt den CSS2 Standard kaum. Insbesondere die auf dieser Seite vor kommenden rollover Efekte und die Anweisung position: fixed bei Kopf- und Fußzeile führen zu Problemen. Man kann jedoch die fehlende Unterstützung von der fortgeschritten CSS2 Selektoren ausnutzen, um einen Fallback zu konstruieren. Bei der eher unwichtigen Fußzeile habe ich es mir besonders leicht gemacht.

body[id] div#foot {
- display: block;
- position: fixed;
- bottom: 0;
- left: 2.5em;
- right: 2.5em;
- background: #FFF;
- border-top: 2px solid black;
- font: lighter 12pt Verdana, sans-serif;
}
div#foot {
- display: none;
}