CSS Tutorials: Layout, Navigation, Gestaltung – Schritt für Schritt

Layout mit CSS

Blöcke zentrieren, mehrspaltige Layouts ohne Tabellen, flexible und feste Breiten, Druck- und Handheld-Stylesheets.

1. Zentrieren eines Block-Level-ElementsZentrierung eines Block- Level- Elements8 min
2. CSS-Layouts basiert auf PositionierungenCSS-Layouts basiert auf Positionierungen13 min
3. CSS-Layouts basiert auf FloatierungCSS-Layouts, basiert auf float und clear11 min
4. Flexible Layouts mit CSS-PositionierungenFlexible Layouts mit CSS-Positionierungen8 min
5. Denken außerhalb des DesigngridsDenken außerhalb des Designgrids9 min
6. CSS-TabellenlayoutsTabellen-Layout mit CSSArchiv
7. Drucklayouts mit CSSDruck-Layouts mit CSS13 min
8. CSS-Layouts für KleinbildschirmeLayouts für KleinbildschirmeArchiv
9. HTML-Attribute durch CSS ersetzenHTML-Elemente und Attribute durch CSS ersetzen15 min
10. Praxisgerechter Aufbau von Style-SheetsTipps zum praxisgerechten Aufbau von Stylesheets10 min
11. 12 Lektionen12 Lektionen für alle, die Angst haben vor CSS und Webstandards12 min

Navigation aus Listen

Die Serie zu Listen als Navigation: horizontal, vertikal, mit Reitern, mit Ausklappmenüs und als Sitemap.

1. Site-Navigation mit ListenSite-Navigation mit Listen – Grundaufbau8 min
2. Site-Navigation mit ListenSite-Navigation mit Listen – Erweiterungen12 min
3. Horizontal-Navigation mit gleitenden HintergründenHorizontal-Navigation mit gleitenden Hintergründen16 min
4. Horizontal-Navigation mit gleitenden HintergründenHorizontal-Navigation mit gleitenden Hintergründen, Teil 212 min
5. Hybride CSS MenüsHybride CSS Menüs8 min
6. Komplex-dynamische ListenKomplex-dynamische Listen6 min
7. Sitemap-Formatierung mit CSSSitemap-Formatierung mit CSS21 min

Gestaltung und Effekte

Rahmen, Schatten, Farben, Formulare, Text und die optische Täuschung, die nur aus CSS besteht.

1. Abgerundete EckenAbgerundete Ecken2 min
2. Rahmen einmal andersRahmen einmal anders4 min
3. Schatten mit CSS3D-Wirkung mit CSSArchiv
4. CSS-OktagonCSS-Oktagon2 min
5. Gut aussehende zugängliche WebformulareOnline-Formulare - schön und zugänglich11 min
6. Optische TäuschungOptische Täuschung2 min
7. Dynamische Pseudoklassen und benannte AnkerDynamische Pseudoklassen und benannte Anker5 min

Aus dem Archiv: Techniken ihrer Zeit

Artikel zu Browsern und Techniken, die heute keine Rolle mehr spielen, aber die Entwicklung von CSS dokumentieren. Jeder trägt eine Einordnung.

1. Cascading Style Sheets : Artikel : Internet Explorer 7Internet Explorer 7 – Hacks und NeuerungenArchiv
2. fixed für IE/Winposition: fixed für IE/Win 6Archiv
3. CSS-Hacks am Box-ModellCSS-Hacks am Box- ModellArchiv
4. Tatsachen und Beurteilung der FIR-TechnikDie FIR-Technik: Tatsachen und BeurteilungArchiv
5. Text dynamisch ersetzenText dynamisch ersetzenArchiv
6. Serverseitige Konstanten für CSSServerseitige Konstanten für CSSArchiv
7. Einfacher Style-Sheet-WechslerEinfacher Stylesheet-WechslerArchiv
8. CSS wird 10 - WebfontsCSS wird Zehn - Was nun?Archiv

Aufbau eines Tutorials

Ein Tutorial beantwortet eine Aufgabe, keine Eigenschaft. Es beginnt mit der Situation – ein Block soll mittig stehen, eine Liste soll zur Navigationsleiste werden, eine Seite soll sich drucken lassen –, zeigt den Weg dorthin in Schritten und endet mit dem vollständigen Code. Die Beispiele stehen dabei nicht als Bild auf der Seite, sondern werden im Browser gerendert: Was zu sehen ist, ist das Ergebnis des daneben abgedruckten Codes und nicht eine Abbildung davon.

Wo eine Eigenschaft im Detail gebraucht wird, verweist das Tutorial in die Vollreferenz, statt sie noch einmal zu erklären. Umgekehrt verweisen die Referenzseiten auf die Tutorials, in denen ihre Eigenschaft eine Rolle spielt. Diese Aufteilung hält beide Seiten kurz: Die Referenz beantwortet, was eine Eigenschaft tut, das Tutorial, wie man mit ihr zu einem Ergebnis kommt.

Was aus dem Archiv stammt

Ein Teil der Tutorials stammt aus den Jahren 2004 bis 2007 und beschreibt Techniken, die damals notwendig waren: Spalten aus umflossenen Elementen, Zentrierung über negative Außenabstände, Schatten aus Hintergrundgrafiken, Konstanten, die es in CSS noch nicht gab. Diese Texte sind unverändert erhalten und als solche gekennzeichnet, weil sie zwei Dinge leisten, die eine Neufassung nicht leisten würde.

Erkennbar sind diese Texte an der Kennzeichnung über der Überschrift und an einer kurzen Einordnung in der Randspalte, die sagt, was seit der Erstveröffentlichung geschehen ist. Am Text selbst wurde nichts geglättet – auch die Einschätzungen zur Browserunterstützung stehen so da, wie sie damals zutrafen.

Erstens sind sie die Erklärung für Stylesheets, die es noch gibt: Wer heute auf ein Layout aus umflossenen Elementen stößt, findet hier, warum es so gebaut ist. Zweitens machen sie sichtbar, welches Problem die späteren Module gelöst haben – die Modulseiten unter CSS 3 und neuer nennen jeweils den direkten Weg und verweisen auf den Umweg zurück. Wer nur den direkten Weg kennt, hält ihn für selbstverständlich; wer den Umweg gesehen hat, versteht, warum es das Modul gibt.