Das umfassende Handbuch - Amazon S3...16 E-Mails mit CSS gestalten..... 561 17 Werkzeuge für...
75
Kai Laborenz CSS Das umfassende Handbuch
Transcript of Das umfassende Handbuch - Amazon S3...16 E-Mails mit CSS gestalten..... 561 17 Werkzeuge für...
Kai Laborenz
CSSDas umfassende Handbuch
Auf einen Blick
Auf einen Blick
1 Was sind Cascading Stylesheets? ..................................................................... 17
2 HTML und CSS ......................................................................................................... 25
3 Das erste Stylesheet – »Hallo Welt!« auf CSS .............................................. 43
4 Selektoren ................................................................................................................ 49
5 Einbinden von Stylesheets in HTML-Dateien ............................................... 89
6 Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle ........... 97
7 Positionierung mit CSS ........................................................................................ 111
8 Layout mit CSS ........................................................................................................ 133
9 Styling mit CSS ........................................................................................................ 189
10 CSS und die Browser ............................................................................................. 379
11 Effizientes Arbeiten mit CSS .............................................................................. 407
12 Arbeiten mit CSS-Frameworks .......................................................................... 451
13 Webstandards und Barrierefreiheit ................................................................ 483
14 Ajax, JavaScript und CSS ...................................................................................... 503
15 Das mobile Web – Stylesheets, Mobiltelefone und PDAs ....................... 529
16 E-Mails mit CSS gestalten ................................................................................... 561
17 Werkzeuge für CSS-Entwickler ......................................................................... 579
A CSS-Referenz ........................................................................................................... 613
B Benennungen und Werte für Stylesheets ..................................................... 769
C HTML5-Elemente ................................................................................................... 775
D DVD zum Buch ........................................................................................................ 781
Inhalt
5
Inhalt
Vorwort ................................................................................................................................................... 15
1 Was sind Cascading Stylesheets? 17
1.1 Warum sollten Sie Stylesheets nutzen? ................................................................... 18
1.2 Das CSS-Prinzip .................................................................................................................... 20
1.3 Wie sieht ein Stylesheet aus? ........................................................................................ 21
2 HTML und CSS 25
2.1 Die Grundlage – das semantische HTML-Dokument .......................................... 25
2.2 Schnelleinstieg HTML ........................................................................................................ 27
2.3 Code follows Content ....................................................................................................... 29
2.4 Sektionen einer Webseite ............................................................................................... 34
2.5 HTML5 und CSS .................................................................................................................... 37
2.5.1 HTML5 im Vergleich zu HTML 4 und XHTML .............................................. 38
2.5.2 Neue Elemente in HTML5 ................................................................................. 38
2.5.3 HTML5 in der Praxis ............................................................................................ 41
3 Das erste Stylesheet – »Hallo Welt!« auf CSS 43
4 Selektoren 49
4.1 Die verschiedenen Selektoren ...................................................................................... 50
4.1.1 Einfache Element-Selektoren .......................................................................... 50
4.1.2 Class- und ID-Selektoren ................................................................................... 52
4.1.3 Kombinierte Selektoren ..................................................................................... 59
4.1.4 Universal-Selektor ............................................................................................... 62
4.1.5 Kind-Selektoren .................................................................................................... 65
Inhalt
6
4.1.6 Folgeelement-Selektoren .................................................................................. 68
4.1.7 Attribut-Selektoren (CSS2 und CSS3) ............................................................ 70
4.1.8 Pseudo-Klassen und Pseudo-Elemente ........................................................ 73
4.1.9 Wiederholungs-Selektoren .............................................................................. 76
4.2 Vererbung .............................................................................................................................. 79
4.3 Rangfolge und Kaskade ................................................................................................... 80
4.3.1 Die Important-Anweisung ................................................................................ 88
5 Einbinden von Stylesheets in HTML-Dateien 89
5.1 Stilanweisungen im HTML-Tag .................................................................................... 89
5.2 Stilanweisungen im Dokumentenkopf .................................................................... 90
5.3 Verlinkte Stylesheets ........................................................................................................ 90
5.3.1 Individuelles Design durch alternative Stylesheets ................................. 91
5.4 Importierte Stylesheets ................................................................................................... 93
5.5 Medienspezifische Stylesheets .................................................................................... 93
5.5.1 Medienspezifische Stylesheets mit CSS3 .................................................... 96
6 Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle 97
6.1 Das Kastenmodell ............................................................................................................... 97
6.1.1 Ein neues Boxmodell .......................................................................................... 101
6.1.2 Zusammenfallende Außenabstände (Collapsing Margins) .................. 101
6.2 Elementtypen in CSS ......................................................................................................... 107
6.2.1 Blockelemente ...................................................................................................... 107
6.2.2 Eingebundene Elemente ................................................................................... 107
6.2.3 Definition des Elementtyps .............................................................................. 108
6.2.4 Weitere Elementtypen ....................................................................................... 109
6.3 Layout- und Positionierungsmodelle in CSS ........................................................... 109
Inhalt
7
7 Positionierung mit CSS 111
7.1 Die Positionierungsart (»position«) ........................................................................... 111
7.1.1 »position: static« ................................................................................................. 112
7.1.2 »position: relative« ............................................................................................. 114
7.1.3 »position: absolute« ........................................................................................... 116
7.1.4 »position: fixed« .................................................................................................. 117
7.2 »float« und »clear« ............................................................................................................ 120
7.2.1 »float« mit »clear« aufheben .......................................................................... 125
7.2.2 »clear« ohne zusätzliches Markup ................................................................. 127
7.3 Neue Möglichkeiten für die Positionierung ........................................................... 131
7.3.1 »display: table« und »display: inline-block« ............................................... 131
7.3.2 Flexibles Kastenlayout ....................................................................................... 131
8 Layout mit CSS 133
8.1 Fixiert, flexibel, oder elastisch? .................................................................................... 133
8.1.1 Vor und Nachteile ................................................................................................ 134
8.1.2 Elastische Layouts und Browserzooms ........................................................ 135
8.1.3 Auflösungsabhängige Layouts ........................................................................ 136
8.2 Der Zweispalter ................................................................................................................... 137
8.2.1 Zweispalter absolut prozentual ...................................................................... 138
8.2.2 Zweispalter mit »float« ..................................................................................... 140
8.2.3 Zweispalter im Tabellenlayout ....................................................................... 143
8.3 Der Dreispalter ..................................................................................................................... 145
8.3.1 Dreispalter flexibel mit »float« ....................................................................... 146
8.3.2 Dreispalter mit festen Spaltenbreiten rechts und links ......................... 149
8.3.3 Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der
Breiteneinheiten .................................................................................................. 153
8.3.4 Das gelöste Problem der (nicht) gleich langen Spalten .......................... 159
8.4 Responsive Layouts ............................................................................................................ 164
8.5 CSS-Layouttricks ................................................................................................................. 170
8.5.1 Zentrieren ............................................................................................................... 170
8.5.2 Minimale und maximale Breiten für flexible Layouts ............................ 176
Inhalt
8
8.6 Feststehende Bereiche und CSS-Frames ................................................................... 177
8.6.1 CSS-Frames ............................................................................................................ 178
8.7 Das flexible Kastenlayout ............................................................................................... 181
9 Styling mit CSS 189
9.1 Arbeiten mit Text ................................................................................................................ 189
9.1.1 Typografie mit CSS .............................................................................................. 196
9.1.2 Einfache Auszeichnungen ................................................................................ 197
9.1.3 Schattige Texte mit CSS3 .................................................................................. 198
9.1.4 Einbindung von Schriftarten per CSS ............................................................ 200
9.1.5 Konstruktion einer konsistenten Typografie ............................................. 217
9.1.6 Überschriften mit CSS ........................................................................................ 221
9.1.7 Initialen und Einrückungen .............................................................................. 226
9.1.8 Styling von Zitaten .............................................................................................. 233
9.2 CSS-Menüs mit Listen ....................................................................................................... 245
9.2.1 Vertikale Menüs ................................................................................................... 246
9.2.2 CSS-Flyout-Menüs ............................................................................................... 252
9.2.3 Horizontale Menüs ............................................................................................. 256
9.2.4 Menüs mit durchgehendem Hintergrund .................................................. 264
9.3 Tabellen und CSS ................................................................................................................. 267
9.4 Schönere Formulare ........................................................................................................... 280
9.4.1 Ordnung ist alles – die Struktur eines Formulars ..................................... 281
9.4.2 Pimp my Form ....................................................................................................... 290
9.4.3 Anpassen von Formular-Rahmenelementen ............................................. 294
9.4.4 Interaktionshilfen ................................................................................................ 296
9.4.5 Fehlermeldungen ................................................................................................ 298
9.5 Druckversion per CSS ........................................................................................................ 301
9.6 Arbeiten mit Transparenz ............................................................................................... 305
9.6.1 Deckkraft von Ebenen steuern ........................................................................ 305
9.6.2 Ebenentransparenz mit voll deckendem Inhalt ........................................ 306
9.6.3 PNG – Grafiken mit weichem Verlauf (Alpha-Kanal) .............................. 310
9.7 Arbeiten mit Grafiken ....................................................................................................... 311
9.7.1 Grafiken per CSS beschneiden ........................................................................ 311
9.7.2 CSS-Sprites ............................................................................................................. 312
9.7.3 Mehrfache Hintergründe (CSS3) .................................................................... 316
9.7.4 Grafiken präsentieren – die CSS-Bildergalerie ........................................... 318
Inhalt
9
9.8 CSS-Effekte ............................................................................................................................ 328
9.8.1 »Runde Ecken« ...................................................................................................... 328
9.8.2 CSS-Schatten ......................................................................................................... 329
9.8.3 Verläufe mit CSS .................................................................................................. 338
9.9 Elemente per CSS verschieben und drehen ............................................................ 348
9.10 CSS-Übergänge und Animationen .............................................................................. 350
9.10.1 Animierte Übergänge ......................................................................................... 350
9.10.2 Animationen mit Keyframes ........................................................................... 352
9.11 Stylesheet-Wechsler .......................................................................................................... 355
9.11.1 Simpler Styleswitcher ........................................................................................ 358
9.11.2 Styleswitcher mit JavaScript und Ajax ......................................................... 359
9.11.3 Browserweichen für Stylesheets .................................................................... 361
9.12 Styling mit CSS3 – der CSS3 Zen Ocean ..................................................................... 362
10 CSS und die Browser 379
10.1 Die Browserlandschaft ..................................................................................................... 379
10.1.1 Browser-Marktanteile ........................................................................................ 380
10.1.2 CSS-Unterstützung testen ................................................................................ 382
10.1.3 Browser mit WebKit-Engine
(Chrome, Safari, Konqueror, in Zukunft Opera) ........................................ 383
10.1.4 Firefox (Gecko) ...................................................................................................... 385
10.1.5 Opera (Presto) ....................................................................................................... 387
10.1.6 Opera Mini und Opera Mobile ........................................................................ 387
10.1.7 Internet Explorer (Trident) ................................................................................ 389
10.1.8 Weitere Browser .................................................................................................. 391
10.1.9 Lynx .......................................................................................................................... 392
10.1.10 Screenreader ......................................................................................................... 393
10.2 Browserweichen und -filter ........................................................................................... 394
10.2.1 Strategien für die Anwendung von Browserweichen:
»To hack or not to hack« ................................................................................... 395
10.2.2 Doctype-Switching und Browseremulationen .......................................... 396
10.2.3 Conditional Comments ..................................................................................... 398
10.2.4 Browser-Sniffer .................................................................................................... 400
10.2.5 CSS-Bugs per JavaScript beheben .................................................................. 401
10.3 Browsertesting .................................................................................................................... 401
10.3.1 Virtualisierung ...................................................................................................... 402
10.3.2 Browser online testen ........................................................................................ 404
Inhalt
10
11 Effizientes Arbeiten mit CSS 407
11.1 Arbeiten mit HTML-Vorlagen ........................................................................................ 407
11.2 Design Patterns ................................................................................................................... 410
11.2.1 Design Pattern und Quellcode von Yahoo! ................................................. 411
11.3 Objektorientiertes CSS ..................................................................................................... 413
11.4 Alles auf null – Reset-Stylesheets ............................................................................... 416
11.4.1 Normalize ............................................................................................................... 421
11.5 Kurzschreibweisen ............................................................................................................. 422
11.6 CSS-Präprozessoren ........................................................................................................... 422
11.6.1 Effizient CSS-Anweisungen schreiben mit LESS ........................................ 424
11.6.2 Arbeiten mit SASS und Compass .................................................................... 427
11.7 Stylesheets organisieren ................................................................................................. 433
11.7.1 Ordnung durch Stylesheet-Module ............................................................... 434
11.7.2 Filter-Management ............................................................................................. 435
11.7.3 Kommentieren von Stylesheets ...................................................................... 436
11.7.4 Ein Standard für CSS-Kommentare – CSSDoc ............................................ 437
11.7.5 Sprunglinks, Inhaltsverzeichnis und Farbdefinitionen ........................... 439
11.8 CSS im Entwurfsverfahren (Rapid Prototyping) .................................................... 441
11.8.1 Festlegen der Seitenstruktur in semantischem HTML ............................ 442
11.8.2 Bereiche ausrichten in Ihrem bevorzugten Browser ............................... 443
11.8.3 Einfügen der Inhalte ........................................................................................... 444
11.8.4 Dynamische Bereiche umsetzen .................................................................... 445
11.8.5 Benutzertests ........................................................................................................ 445
11.8.6 Feintuning, Browsertests und technische Optimierungen ................... 447
11.9 Fehlersuche in CSS-Dateien ............................................................................................ 447
12 Arbeiten mit CSS-Frameworks 451
12.1 Framework-Übersicht und Auswahlhinweise ....................................................... 452
12.1.1 Layoutframeworks .............................................................................................. 454
12.1.2 Applikationsframeworks ................................................................................... 464
12.1.3 Das eigene Raster ................................................................................................ 467
12.2 Aufbau eines Rasters mit YAML ................................................................................... 469
12.3 Aufbau eines Rasters mit Foundation ....................................................................... 475
12.3.1 Semantisches Raster mit Foundation ........................................................... 478
Inhalt
11
13 Webstandards und Barrierefreiheit 483
13.1 Webstandards beachten ................................................................................................. 483
13.1.1 Was ist für eine standardkonforme Webseite erforderlich? ................ 484
13.1.2 Der W3C-Validator .............................................................................................. 486
13.2 Suchmaschinenoptimierung mit CSS ........................................................................ 487
13.2.1 Schlanke Dokumente durch CSS .................................................................... 487
13.2.2 Semantik für Suchmaschinen ......................................................................... 489
13.3 Zugängliche und benutzbare Websites mit CSS ................................................... 491
13.3.1 Grundsätze für zugängliche Websites ......................................................... 493
13.3.2 Barrierefreie Sprunglinks .................................................................................. 495
13.3.3 Link-Auszeichnungen – nützlich und barrierefrei .................................... 497
13.3.4 Testen ...................................................................................................................... 499
14 Ajax, JavaScript und CSS 503
14.1 Austausch eines Stylesheets per JavaScript ........................................................... 503
14.2 Klassen zuweisen mit »className« ........................................................................... 504
14.3 Stile mit »style« zuweisen .............................................................................................. 505
14.4 Formularvalidierung mit CSS und JavaScript ......................................................... 506
14.5 Tageszeitenabhängiger Styleswitcher ...................................................................... 511
14.6 Fadenkreuz für Tabellen .................................................................................................. 514
14.7 JavaScript zur Umgehung von Browsereinschränkungen verwenden ....... 516
14.7.1 Browser- bzw. Fähigkeitserkennung ............................................................. 517
14.7.2 JavaScript zur Erweiterung der Browserfähigkeiten nutzen ................ 519
15 Das mobile Web – Stylesheets, Mobiltelefone und PDAs 529
15.1 Strategien für das mobile Web: mobilisieren statt miniaturisieren ........... 529
15.2 Mobile Standards ................................................................................................................ 530
15.3 Stylesheets für mobile Browser ausliefern ............................................................. 531
15.3.1 Stylesheets per Media Query ausliefern ...................................................... 531
15.3.2 User-Agent-Sniffing ............................................................................................ 533
Inhalt
12
15.4 CSS-Design für den mobilen Einsatz .......................................................................... 533
15.5 Einzelne Geräte .................................................................................................................... 536
15.5.1 Betriebssysteme für Mobilgeräte und Organizer ..................................... 536
15.5.2 Safari auf dem iPhone und iPad ..................................................................... 537
15.5.3 Chrome auf Android-Geräten ......................................................................... 544
15.5.4 Opera Mini und Opera Mobile ........................................................................ 546
15.5.5 Weitere mobile Browser .................................................................................... 549
15.5.6 Adobe Edge Inspect ............................................................................................. 549
15.6 Frameworks für die mobile Entwicklung ................................................................. 550
15.6.1 Mobile Boilerplate ............................................................................................... 551
15.6.2 jQuery Mobile Framework ................................................................................ 552
15.6.3 jQTouch ................................................................................................................... 557
16 E-Mails mit CSS gestalten 561
16.1 Grundsätzliche Probleme ................................................................................................ 561
16.2 Lokale E-Mail-Clients ......................................................................................................... 565
16.2.1 Microsoft Outlook ............................................................................................... 565
16.2.2 Mozilla Thunderbird ........................................................................................... 567
16.2.3 Apple Mail .............................................................................................................. 567
16.3 Webmail-Dienste ................................................................................................................ 568
16.3.1 Google Mail ........................................................................................................... 568
16.3.2 Yahoo! Mail und Outlook.com ........................................................................ 569
16.3.3 GMX ......................................................................................................................... 569
16.3.4 Web.de .................................................................................................................... 570
16.4 Strategien für E-Mail-Newsletter ................................................................................ 571
16.4.1 Techniken für mit CSS gestaltete und alle anderen E-Mails ................. 572
16.4.2 CSS-Eigenschaften im Einzelnen .................................................................... 576
17 Werkzeuge für CSS-Entwickler 579
17.1 CSS-Editoren .......................................................................................................................... 579
17.1.1 TopStyle .................................................................................................................. 579
17.2 Website-Editoren ................................................................................................................ 584
17.2.1 Adobe Dreamweaver CC ................................................................................... 584
17.2.2 Aptana Studio 3 .................................................................................................... 593
Inhalt
13
17.3 Analysewerkzeuge ............................................................................................................. 597
17.3.1 Firebug .................................................................................................................... 597
17.3.2 Web Developer Toolbar(s) ................................................................................ 600
17.3.3 Accessibility-Toolbar ........................................................................................... 601
17.3.4 Browsereigene Tools .......................................................................................... 601
17.4 Optimierungswerkzeuge ................................................................................................ 604
17.4.1 CSS-Minifier ........................................................................................................... 604
17.5 Eigene Tools herstellen: Benutzer-Stylesheets ..................................................... 607
Anhang
A CSS-Referenz ......................................................................................................................... 613
A.1 Alphabetische Übersicht ................................................................................... 613
A.2 Pseudo-Elemente und Pseudo-Formate ...................................................... 619
A.3 Inhaltserzeugung ................................................................................................ 638
A.4 Schriftformatierungen ....................................................................................... 645
A.5 Farben und Hintergründe ................................................................................. 671
A.6 Kastenformatierungen ...................................................................................... 685
A.7 Listenformatierungen ........................................................................................ 731
A.8 Anzeigemodus ...................................................................................................... 735
A.9 Tabellenformatierungen ................................................................................... 738
A.10 Benutzeroberfläche ............................................................................................ 743
A.11 Seitenlayout mit @page ................................................................................... 745
A.12 Sprachausgabe ..................................................................................................... 752
A.13 Proprietäre CSS-Eigenschaften ....................................................................... 762
B Benennungen und Werte für Stylesheets ............................................................... 769
B.1 Namen für Stylesheets, Klassen und IDs ..................................................... 769
B.2 Längen- und Größenangaben ......................................................................... 769
B.3 Prozentwerte ......................................................................................................... 771
B.4 Farben ...................................................................................................................... 771
B.5 URLs (url) ................................................................................................................. 773
B.6 Schlüsselwörter .................................................................................................... 773
B.7 CSS-Kommentare ................................................................................................ 773
C HTML5-Elemente ................................................................................................................. 775
D DVD zum Buch ..................................................................................................................... 781
Index ........................................................................................................................................................ 783
133
8
Kapitel 8
Layout mit CSS
Nachdem Sie sich lange genug mit der (wichtigen) Theorie befasst
haben, lernen Sie in diesem Kapitel konkrete Anwendungsfälle und
praktische CSS-Lösungen kennen. Beginnen möchte ich mit dem Lay-
out von Webseiten per CSS.
Lange Zeit war das Layouten mit CSS schwierig und kompliziert. Mit heutigen Brow-
sergenerationen und dem Verschwinden der »älteren Modelle« – insbesondere des
Internet Explorers 6 (inzwischen in weiten Teilen der Welt bedeutungslos) – sind die
wesentlichen Probleme beim CSS-Layout überwunden.
Die Beispiele in diesem Kapitel sollen Sie mit den grundlegenden Prinzipien und Her-
angehensweisen vertraut machen. In Kapitel 12, »Arbeiten mit CSS-Frameworks«, stelle
ich Ihnen dann einige fertige Baukästen vor, die Ihnen im Arbeitsalltag viel Kleinarbeit
abnehmen. Trotz dieser vorgefertigten Lösungen ist es wichtig, dass Sie sich mit den
Grundlagen befassen, auf denen solche Frameworks basieren. Nur so können Sie deren
Grenzen verstehen und für jeden Einsatz das passende Werkzeug wählen.
In diesem Kapitel stelle ich Ihnen einige Layoutvarianten vor, die auf Websites häufig
eingesetzt werden. Dabei handelt es sich um:
� ein zweispaltiges Layout, wie es vor allem in Blogs benutzt wird
� ein dreispaltiges Layout, das auf umfangreicheren Websites, beispielsweise Porta-
len, oft verwendet wird
Beide Grundformen kommen in einer Reihe von Varianten zum Einsatz: mit Kopf-
und/oder Fußzeile und mit unterschiedlicher Anordnung der Spalten im Quellcode.
8.1 Fixiert, flexibel, oder elastisch?
Mithilfe von Stylesheets können Sie Layouts mit festen (Maßangaben in Pixeln) oder
flexiblen (Maßangaben in Prozent) Abmessungen anlegen. Ähnlich wie bei den
Schriftgrößen hat beides seine Vor- und Nachteile:
Feste (oder »fixierte«) Layouts werden meist eingesetzt, wenn Grafiken als layoutbil-
dende Inhalte verwendet werden. Allerdings gibt es hier auch die Möglichkeit, durch
Verwendung von CSS-Hintergrundbildern flexible und grafisch reiche Designs zu
8 Layout mit CSS
134
erstellen. Müssen Layouts pixelgenau umgesetzt werden, geht es aber oft nicht ohne
feste Positionierung. Dabei wird zumindest die Gesamtbreite der Seite auf einen fes-
ten Wert in Pixeln festgelegt, der in der Regel auf eine bestimmte Bildschirmauflösung
zielt. Für 1.024 Pixel breite Bildschirme werden fixierte Layouts meist auf eine Breite
von 960 Pixeln angelegt, um Betriebssystemelementen und Scrollbars Platz zu lassen.
Bei flexiblen Layouts hingegen wird keine feste Breite vorgegeben – das Layout rich-
tet sich nach der Breite des Browserfensters. Soll für verschiedene Bildschirmgrößen
und Nutzergruppen ein Layout gestaltet werden oder ist die freie Veränderung der
Schriftgröße für den Besucher vorgesehen (Barrierefreiheit!), dann muss ein flexibles
Layout angelegt werden. Dabei werden die Layoutangaben, z.B. zur Breite der Seite, in
Prozentwerten angegeben. Das heißt: Vergrößert der Benutzer das Fenster, so
»wächst« das Layout mit.
Aufgrund neuerer CSS-Eigenschaften gibt es inzwischen noch eine weitere Option:
das auflösungsabhängige oder auch adaptive Layout. Dabei wird das Layout nicht –
wie beim flexiblen Ansatz – einfach gedehnt oder gestaucht, wenn das Browserfens-
ter kleiner oder größer ist. Stattdessen ändert sich das Layout selbst – Elemente, die
nebeneinanderlagen, werden nun untereinander dargestellt oder gar an eine andere
Position im Browserfenster verschoben.
8.1.1 Vor und Nachteile
Was den Einsatz von verschiedenen Layoutansätzen betrifft, gibt es kein absolutes
»Falsch« oder »Richtig«. Alle Layoutansätze haben Vor- und Nachteile, die Sie für
einen konkreten Einsatzzweck abwägen müssen.
Vorteile fester Layouts
� beste Übereinstimmung mit einer grafischen Designvorlage
� vergleichsweise einfach umzusetzen
� Verhältnis zwischen eingesetzten Grafiken und Gesamtlayout bleibt (meistens)
gleich.
� Bei Entwicklung für bekannte, feste Auflösungen (z.B. iPad) treten Nachteile nicht
zutage.
Nachteile fester Layouts
� Unflexibel – passt sich sehr großen und sehr kleinen Bildschirmen schlecht an.
� schlechte Zugänglichkeit
� Exaktheit ist letztlich eine Illusion, da eine Webseite kein Blatt Papier ist und prin-
zipiell immer unterschiedlich angezeigt werden kann.
8.1 Fixiert, flexibel, oder elastisch?
135
Da
8
Vorteile flexibler Layouts
� Reagieren flexibel auf Änderungen der Größe des Browserfensters oder der zur
Verfügung stehenden Bildschirmfläche (siehe Abbildung 8.1).
� Geben dem Besucher größtmögliche Kontrolle über die Anzeige.
Nachteile flexibler Layouts
� Sind meist schwerer zu beherrschen.
� Das Layout ändert sich und sieht unter Umständen deutlich anders aus als eine
grafische Vorgabe.
� Bei sehr großen und sehr kleinen Auflösungen kann es zu Problemen mit der Zei-
lenlänge kommen – hier helfen die Eigenschaften min-width und max-width weiter.
Abbildung 8.1 Immer volle Platzausnutzung mit flexiblen Layouts
8.1.2 Elastische Layouts und Browserzooms
Ein Kompromiss zwischen fest und flexibel ist die Auszeichnung in der Maßeinheit
em. Damit hat das Skalieren des Browserfensters keinen Einfluss auf das Layout, wohl
aber eine Änderung der Schriftgröße. So vermeiden Sie auch, dass Benutzer sehr gro-
ßer Bildschirme extrem lange Zeilen erhalten, die schlecht zu lesen sind. Ein solches
Layout wird oft als elastisches Layout bezeichnet.
Vorteile elastischer Layouts
� Sie erlauben die Vergrößerung der Schrift und sind damit zugänglicher.
� Durch die Vergrößerung des gesamten Layouts wird das Design nicht verändert.
8 Layout mit CSS
136
Nachteile elastischer Layouts
� Durch die Vergrößerung des gesamten Layouts kommt es recht schnell zu hori-
zontalen Scrollbalken.
Eine ähnliche Funktionalität bieten inzwischen alle modernen Webbrowser: einen
Seitenzoom. Diese Lupenfunktion vergrößert eine gesamte Webseite linear – unab-
hängig von den gewählten Einheiten im Stylesheet oder den Schrifteinstellungen des
Benutzers. Die Unterschiede der verschiedenen Layoutvarianten zeigt Tabelle 8.1.
Problematisch ist dabei, dass leider auch wieder fast alle Browser diese Funktion
etwas anders umsetzen. Aufgrund unterschiedlicher Schrittweite sieht das Ergebnis
bei Safari nach zweimaligem Zoomen schon etwas unschön aus, während Opera und
Firefox noch eine sehr layoutgetreue Umsetzung bieten. Der IE7 fällt schon deut-
licher ab und überlagert Inhalte (siehe Abbildung 8.2).
Während der Seitenzoom moderner Browser die Probleme fester Layouts zumindest
abfängt und somit elastische Layouts auf Dauer überflüssig machen wird, bietet er
doch nicht die optimale Bildschirmausnutzung flexibler Layouts.
8.1.3 Auflösungsabhängige Layouts
Noch einen Schritt mehr Adaption auf das individuelle System eines Besuchers bie-
ten auflösungsabhängige oder adaptive Layouts. Hier wird die Bildschirmgröße des
aktuellen Besuchers (per Media Query oder per JavaScript) abgefragt und ihm ein auf
seine Situation abgestimmtes Layout präsentiert. Ein Nutzer mit breitem Bildschirm
erhält dann beispielsweise ein vierspaltiges Layout, während ein Nutzer mit kleinem
Bildschirm nur zwei Spalten sieht – die restlichen Inhalte rutschen nach unten. Am
Ende dieses Kapitels gehe ich näher auf solche Layouts ein. Kombiniert mit flexiblen
Breitenangaben nennt man das dann Responsive Design.
Layout Breitenangabe
in
Veränderung der
Fenstergröße
Veränderung der
Schriftgröße
fix Pixel keine Änderung keine Änderung
flexibel Prozent Änderung der Kastenbreite keine Änderung
elastisch Zeichen (em) keine Änderung Änderung der
Kastenbreite
adaptive/
responsive
Prozent Layoutwechsel gegebenenfalls
mit Änderung der Schriftgröße
keine Änderung
Tabelle 8.1 Layoutvarianten und Skalierungsverhalten
8.2 Der Zweispalter
137
Da
8
Vorteile adaptiver Layouts
� optimales Layout für die unterschiedlichen Bildschirmgrößen
Nachteile adaptiver Layouts
� erhöhter Aufwand
Abbildung 8.2 Unterschiedliche Ansichten nach zweimal Zoomen: Firefox, Opera, IE7
(simuliert) und Safari unter Windows (von links oben nach rechts unten)
8.2 Der Zweispalter
Doch nun tatsächlich zu dem Layouts. Ein recht einfaches Layout ist der Zweispalter:
Eine – meist links angeordnete – Spalte enthält die Navigation und eine zweite, grö-
ßere die Inhalte.
Mit der Verbreitung von Blogs hat sich eine weitere Variante entwickelt: Die Inhalte
werden links angezeigt und ergänzende Navigationsinstrumente, wie eine Liste von
Artikeln oder Kommentaren oder ein Kalender der Blognachrichten, stehen rechts
davon. Bei einem solchen Design wird auf eine traditionelle Navigation ganz verzich-
tet, oder diese befindet sich horizontal über den Hauptinhalten (siehe Abbildung 8.3).
8 Layout mit CSS
138
Abbildung 8.3 Nachrichtenmagazin im klassischen Zweispaltenlayout
Ein zweispaltiges Layout lässt sich über einen positionierten Bereich mithilfe von
float oder über display: table umsetzen.
8.2.1 Zweispalter absolut prozentual
Beim Zweispalter wird die Inhaltsspalte (#main) normal positioniert und erhält einen
Außenabstand (margin), der der Breite des kleineren Bereichs (#mainnav) entspricht.
Diese Spalte wird dann mit der Positionierung absolute in diesen Abstand hineinge-
schoben.
Bei dieser Art der Positionierung ist es egal, wo im Quellcode sich die Spalte befindet,
die absolut positioniert wird. Gemäß den CSS-Spezifikationen wird ein positioniertes
Element aus der normalen Reihenfolge der Elemente entfernt und entsprechend sei-
ner Positionierung mit top, bottom, left und right platziert:
8.2 Der Zweispalter
139
Da
8
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Zweispalter absolut</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: #mainnav {9: position: absolute;10: /* left: 0; */11: right: 0;12: margin: 0;13: padding: 0 1%;14: border: 0;15: width: 18%;16: }17: #mainnav h3, #mainnav ul {18: margin: 0.3em;19: list-style: none;20: }21: #mainnav ul {22: padding-left: 0.5em;23: }24: #mainnav li {25: padding: 0.2em 0;26: }27: #main {28: margin: 0;29: padding: 0 2%;30: /* margin-left: 20%; */31: margin-right: 20%;32: border: 0;33: width: 76%;34: }35: </style>36: </head>37: <body>38: <div id="header">39: <h1>Zweispalter mit absoluter Positionierung </h1>40: </div>41: <div id="mainnav">42: <h3>Navigation</h3>43: <ul>
8 Layout mit CSS
140
44: <li><a href="#">Seite 1</a></li>45: <li><a href="#">Seite 2</a></li>46: <li><a href="#">Seite 3</a></li>47: <li><a href="#">Seite 4</a></li>48: <!--49: <li><a href="#">Seite 5</a></li>50: <li><a href="#">Seite 6</a></li>51: <li><a href="#">Seite 7</a></li>52: -->53: </ul>54: </div>55: <div id="main">56: <p>Sed ut perspiciatis unde omnis ... </p>57: </div>58: <div id="footer"> Kapitel 8 : Zweispalter </div>59: </body>60: </html>
Listing 8.1 Zweispalter mit absolut positioniertem Bereich
Diese Formatierung funktioniert ohne Änderungen im Quellcode mit einer rechts
oder links sitzenden kleinen Spalte. Wenn Sie die auskommentierten Zeilen im CSS
aktivieren und stattdessen die darunterstehenden Zeilen auskommentieren, die
jetzt aktiv sind, wandert die Spalte mit dem Menü nach rechts.
Allerdings verursacht die Verwendung von absoluter Positionierung ein Problem,
das deutlich wird, wenn Sie das Menü um die Seiten 5 – 7 erweitern: Es läuft über die
Fußleiste hinweg. Da absolut positionierte Elemente für nachfolgende Elemente
(hier die Fußleiste) nicht mehr existieren, wird auch keine Rücksicht auf ihren Platz-
bedarf genommen. Er richtet sich allein nach dem Bedarf der statisch positionierten
Spalte (#main). Wenn Sie sicher wissen, welche Spalte die längere sein wird – und zwar
immer –, stört sie das nicht. In der Praxis ist es aber meist nicht sicher, welche Spalte
das sein wird, oder es wird unterschiedlich sein.
8.2.2 Zweispalter mit »float«
Daher gibt es eine zweite – weiter verbreitete – Methode: den Einsatz von zwei gefloa-
teten Bereichen. Hierbei werden die zwei Spalten mit der Eigenschaft float neben-
einander angeordnet:
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">
8.2 Der Zweispalter
141
Da
8
5: <title>Zweispalter gefloatet</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: #mainnav {9: float: left;10: margin: 0;11: padding: 0 1%;12: border: 0;13: width: 18%;14: }
Dies ist die Navigationsleiste. Sie wird 20% der Breite des Fensters einnehmen. In die-
sem Beispiel gibt es ein padding von je 1% nach rechts und links – dieser Wert muss
nach dem Boxmodell von der Breite abgezogen werden, damit insgesamt 20% heraus-
kommen. Damit der Bereich immer links bleibt, wird ihm float: left zugewiesen.
Einem per float positionierten Kasten muss immer auch eine Breite zugewiesen
werden.
15: #mainnav h3, #mainnav ul {16: margin: 0.3em;17: list-style: none;18: }19: #mainnav ul {20: padding-left: 0.5em;21: }22: #mainnav li {23: padding: 0.2em 0;24: }25: #main {26: margin: 0;27: padding: 0 2%;28: float: left;29: border: 0;30: width: 76%;31: }
Dies ist der Inhaltsbereich. Er bekommt 76% der Seitenbreite zugewiesen – plus 2 × 2%
Innenabstand. Auch der Inhaltsbereich wird mit float: left so weit links wie mög-
lich angeordnet, was hier bedeutet, dass er direkt neben dem ersten linken Bereich
platziert wird. Da er ohnehin die gesamte Seitenbreite einnimmt, könnten Sie ihn
auch nach rechts fließen lassen (float: right).
32: #footer {33: clear: both;
8 Layout mit CSS
142
34: }35: </style>36: </head>37: <body>38: <div id="header">39: <h1>Zweispalter mit Floats </h1>40: </div>41: <div id="mainnav">42: <h3>Navigation</h3>43: <ul>44: <li><a href="#">Seite 1</a></li>45: <li><a href="#">Seite 2</a></li>46: <li><a href="#">Seite 3</a></li>47: <li><a href="#">Seite 4</a></li>48: <li><a href="#">Seite 5</a></li>49: <li><a href="#">Seite 6</a></li>50: <li><a href="#">Seite 7</a></li>51: </ul>52: </div>53: <div id="main">54: <p>Sed ut perspiciatis unde omnis iste natus ... </p>55: </div>56: <div id="footer"> Kapitel 8 : Zweispalter </div>57: </body>58: </html>
Listing 8.2 Ein mit »float« realisierter Zweispalter
Abbildung 8.4 Ein einfacher Zweispalter
8.2 Der Zweispalter
143
Da
8
Um die Navigation auf der rechten Seite des Inhalts anzuordnen, muss nur float: left
durch float: right ausgetauscht werden. Das Ergebnis sehen Sie in Abbildung 8.4.
In beiden Fällen habe ich die Spaltenbreiten mit prozentualen Werten angegeben –
die Hauptspalte hat 80% der verfügbaren Seitenbreite, das Menü 20%. Es ist natür-
lich genauso möglich, stattdessen Werte in Pixeln anzugeben oder em zu verwenden.
In der Praxis ist es sinnvoll, eine prozentuale Seitenbreite mit Maximal- und Mini-
malwerten abzusichern – dazu schreibe ich in Abschnitt 8.5.2, »Minimale und maxi-
male Breiten für flexible Layouts«, noch etwas.
8.2.3 Zweispalter im Tabellenlayout
Nein, ich will nicht das alte Tabellenlayout aufwärmen – natürlich nicht. Wozu auch,
wenn uns CSS inzwischen die Mittel gibt, ein entsprechendes Verhalten ohne seman-
tisch falsches Markup zu erreichen.
Die passende Eigenschaft ist display. Hier gibt es den Wert table, der von allen Brow-
sern – auch dem Internet Explorer ab Version 8 – verstanden wird (Internet Explorer 7
und Vorgänger behandeln die Elemente so, wie ihr natürlicher display-Status es vor-
gibt). Um sie einzusetzen, benötigen Sie einen weiteren Kasten, der um die Spalten
gelegt wird. Diesem können Sie dann die Eigenschaft display: table zuweisen. Den
einzelnen Spalten weisen Sie display: table-cell zu – die Zeilen (Reihen) der Tabelle
werden vom Browser »dazugedacht«. Im Beispiel sieht das dann so aus (Ergebnis
siehe Abbildung 8.5):
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Zweispalter mit display:table</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: #wrapper {9: display:table;10: }11: #mainnav {12: margin: 0;13: padding: 0 1%;14: border: 0;15: width: 18%;16: display:table-cell;17: background-color:#cff;18: }19: #mainnav h3, #mainnav ul {
8 Layout mit CSS
144
20: margin: 0.3em;21: list-style: none;22: }23: #mainnav ul {24: padding-left: 0.5em;25: }26: #mainnav li {27: padding: 0.2em 0;28: }29: #main {30: margin: 0;31: padding: 0 2%;32: border: 0;33: display:table-cell;34: background-color:#ffc;35: }36: #footer {37: clear: both;38: }39: </style>40: </head>41: <body>42: <div id="header">43: <h1>Zweispalter mit display: table </h1>44: </div>45: <div id="wrapper">46: <div id="mainnav">47: <h3>Navigation</h3>48: <ul>49: <li><a href="#">Seite 1</a></li>50: <li><a href="#">Seite 2</a></li>51: <li><a href="#">Seite 3</a></li>52: <li><a href="#">Seite 4</a></li>53: <li><a href="#">Seite 5</a></li>54: <li><a href="#">Seite 6</a></li>55: <li><a href="#">Seite 7</a></li>56: <li><a href="#">Seite 8</a></li>57: <li><a href="#">Seite 9</a></li>58: </ul>59: </div>60: <div id="main">61: <p>Sed ut perspiciatis ... explicabo.</p>62: <h2>Unterüberschrift H2</h2>
8.3 Der Dreispalter
145
Da
8
63: <p>Nemo enim ipsam ... nesciunt.</p>64: </div>65: </div>66: <div id="footer"> Kapitel 8 : Zweispalter </div>67: </body>68: </html>
Listing 8.3 Zweispalter im CSS-»Tabellenlayout«
Im Unterschied zum Float-Layout müssen Sie der zweiten Spalte keine Weite mehr
zuweisen, da in einer Tabelle mit zwei Spalten der Platz, der nicht einer Spalte zuge-
wiesen wurde, von der anderen in Anspruch genommen wird.
Abbildung 8.5 Mit »display: table« werden gleich lange Spalten zum Kinderspiel.
Sehen Sie einen weiteren Vorteil der Nutzung von display: table? Wenn nicht, war-
ten Sie – ich komme gleich noch darauf zurück!
8.3 Der Dreispalter
Das im Web wohl am häufigsten verwendete Layout besitzt drei Spalten: Eine Spalte
beherbergt die Navigation, eine den Inhalt und eine zusätzliche Informationen, Links
oder Ähnliches (siehe Abbildung 8.6). Hierzu gibt es eine schon nicht mehr über-
schaubare Vielfalt an Möglichkeiten, je nach Anwendungsfall und Wünschen:
� Sollen die Spaltenbreiten fest oder flexibel sein?
� Müssen die Spalten gleich lang sein?
8 Layout mit CSS
146
� Haben die Spalten Hintergrundfarben, oder sollen gar Grafiken als Hintergrund
der Spalten verwendet werden?
� Hat das Layout eine Kopf- oder Fußzeile?
� Soll eine bestimmte Reihenfolge der Spalten erreicht werden?
� Ist ein möglichst sparsamer Markup-Code wichtig?
Abbildung 8.6 Klassisches Dreispalten-Layout
8.3.1 Dreispalter flexibel mit »float«
In einer einfachen Form hat sich gegenüber dem Zweispalter gar nicht viel geändert
(die Bereiche sind im Code fett markiert). Hinzugekommen ist ein Bereich #margin
(Marginalie), der per float: right an den rechten Rand gerückt wird. Ansonsten ist
nur die Breite des Inhaltsbereichs auf 60% geschrumpft (siehe Abbildung 8.7).
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Dreispalter gefloatet</title>
8.3 Der Dreispalter
147
Da
8
6: <link href="basis.css" rel="stylesheet" media="all">7: <style>8: #main, #content, #margin {9: margin: 0;10: padding: 0;11: border: 0;12: }13: #mainnav {14: float: left;15: margin: 0;16: padding: 0 1%;17: border: 0;18: width: 18%;19: }20: #mainnav h3, #margin h3, #margin p, #mainnav ul {21: margin: 0.5em;22: list-style: none;23: }24: #mainnav ul {25: padding-left: 0.5em;26: }27: #mainnav li {28: padding: 0.2em 0;29: }30: #main {31: margin: 0;32: padding: 0%;33: float: left;34: width: 59.5%;35: }36: #margin {37: float: right;38: width: 20%;39: }
Hier wird der zusätzliche Bereich #margin im CSS definiert. Er erhält eine Breite von
20%, die beim Hauptbereich abgezogen wird.
40: #footer {41: clear: both;42: }43: </style>44: </head>
8 Layout mit CSS
148
45: <body>46: <div id="header">47: <h1>Dreispalter mit Floats </h1>48: </div>49: <div id="mainnav">50: <h3>Navigation</h3>51: <ul>52: <li><a href="#">Seite 1</a></li>53: <li><a href="#">Seite 2</a></li>54: <li><a href="#">Seite 3</a></li>55: <li><a href="#">Seite 4</a></li>56: <li><a href="#">Seite 5</a></li>57: <li><a href="#">Seite 6</a></li>58: <li><a href="#">Seite 7</a></li>59: </ul>60: </div>61: <div id="main">62: <p>Sed ut perspiciatis unde omnis ... </p>63: </div>64: <div id="margin">65: <h3>Marginalie </h3>66: <p>In der Marginalie werden zusätzliche Inhalte dargestellt</p>67: </div>
Das ist die Marginalie im Quellcode. Je nach Float-Richtung von #main sitzt sie rechts
oder links des Hauptbereichs.
68: <div id="footer"> Kapitel 8 : Dreispalter </div>69: </body>70: </html>
Listing 8.4 Dreispaltiges Layout mit »float«
Wo die Marginalie angezeigt wird, entscheidet die Float-Richtung des Hauptbereichs.
Wenn dieser – wie im Code gewählt – nach links floatet, wird die Marginalie rechts
angezeigt. Setzen Sie die Anweisung bei #main auf float: right, wandert der Bereich
nach rechts, und die Marginalie wird links angezeigt.
Ein generelles Problem beim Arbeiten mit flexiblen Bereichen und Floats ist das Ein-
färben bzw. Stylen von Spalten. Grundsätzlich werden – im Gegensatz zu Tabellenzel-
len – CSS-Kästen nur so »tief«, wie es für den Inhalt erforderlich ist. Die Marginalie
beispielsweise endet also direkt unter dem Text »Inhalte dargestellt«. Probieren Sie
es einmal aus, indem Sie der Marginalie eine Hintergrundfarbe zuweisen. Es ist zwar
theoretisch möglich, über prozentuale Höhenzuweisungen Spalten auch in der Höhe
8.3 Der Dreispalter
149
Da
8
auf die Seite zu beziehen, aber in der Praxis ist das ziemlich kompliziert und funktio-
niert nur in Ausnahmefällen sicher (Sie müssen dazu alle vertikalen Dimensionen
von <html> an deklarieren).
Abbildung 8.7 Einfacher Dreispalter
Wie Sie trotzdem Spalten einfärben oder zumindest einen entsprechenden Eindruck
erzielen, erfahren Sie gleich und im weiter unten stehenden Abschnitt »Weitere
Methoden für gleich lange Spalten«.
8.3.2 Dreispalter mit festen Spaltenbreiten rechts und links
Das Auszeichnen der seitlichen Bereiche in Prozent hat einen Nachteil: Da sie ohne-
hin recht klein sind, besteht die Gefahr, dass bei einer insgesamt sehr schmalen Seite
die Navigationsspalte einfach zu klein wird, um die dort befindlichen Texte aufzu-
nehmen. Es kommt zu unschönen Überlagerungen oder unlesbaren Inhalten (was
bei der Navigation besonders schlecht ist). Um das zu verhindern, können Sie die
Breite dieser Spalten in Pixeln angeben – dann bleibt sie immer gleich, egal, wie groß
oder klein das Browserfenster ist. Den restlichen Bereich für den Inhalt setzen Sie
dann so ein, dass er automatisch den verfügbaren Platz einnimmt. Er ist in der Regel
ja deutlich größer angelegt und verkraftet eine Verkleinerung besser.
Außerdem lässt sich bei fest bemaßten Spalten sehr viel einfacher der Eindruck einer
durchgehenden Spalte mit Hintergrundgrafiken erzeugen.
Dieses Layout erfordert Hintergrundgrafiken, um die seitlichen Spalten abzugren-
zen. Außerdem ist die Reihenfolge der Spalten vorgegeben. Das Layout soll aussehen
wie in Abbildung 8.8.
8 Layout mit CSS
150
Abbildung 8.8 Dreispalter mit festen Bereichen rechts und links und Spaltensimulation
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Dreispalter mit fixen Spalten rechts und links</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: body, div {9: margin: 0;10: padding: 0;11: border: 0;12: }
Abstände und Rahmen aller Bereiche und des <body> werden auf null gesetzt, um ein
ganzseitiges Layout zu erreichen.
13: #wrapper {14: margin: 0;15: padding: 0;16: background: url(../assets/bg_rechts1.gif) repeat-y top right;17: }
Dieses zusätzliche Element #wrapper ist erforderlich, um eine zweite Hintergrundgra-
fik einzusetzen. Mit CSS3 könnte er entfallen, da dann mehrere Hintergründe pro Ele-
ment möglich sind (ab Internet Explorer 9). In Zeile 16 wird der Hintergrund in
8.3 Der Dreispalter
151
Da
8
Kurzschreibweise definiert (mehr zur Kurzschreibweise der Background-Eigenschaf-
ten finden Sie in Anhang A, »CSS-Referenz«, und in Abschnitt 11.5, »Kurzschreibwei-
sen«).
18: #header, #footer {19: background: #efefef;20: padding: 10px;21: }22: #mainnav {23: float: left;24: margin: 0;25: border: 0;26: width: 150px;27: }
Die Breite der Navigation wird auf 150px festgelegt – das entspricht der Breite der
Hintergrundgrafik.
28: #mainnav h3,29: #margin h3,30: #margin p,31: #mainnav ul {32: margin: 0.5em;33: list-style: none;34: }35: #mainnav ul {36: padding-left: 0.5em;37: }38: #mainnav li {39: padding: 0.2em 0;40: }41: #main {42: margin: 0;43: padding: 0%;44: background: url(../assets/bg_links1.gif) repeat-y top left;45: overflow: auto;46: }
Auch der Hauptbereich bekommt eine Hintergrundgrafik und simuliert damit die
zweite Spalte (mehr zu dieser Technik, die Faux Columns genannt wird, schreibe ich
etwas weiter unten). Außerdem wird er mit overflow: auto »ausgedehnt«. Sie erin-
nern sich – Bereiche um gefloatete Bereiche werden nicht automatisch um diese aus-
8 Layout mit CSS
152
gedehnt. Da hier die Bereiche #mainnav und #margin gefloatet sind, würde der
Hauptbereich nicht »länger«, wenn eine der beiden Spalten mehr Inhalt hätte als er.
Um den Effekt zu sehen, nehmen Sie das overflow: auto einmal heraus und verän-
dern die Inhaltsmenge in den äußeren Spalten. Vergleichen Sie das Verhalten mit
overflow: auto und vermehrten Inhalten.
47: #content {48: margin-right: 155px;49: margin-left: 155px;50: }
Alle Inhalte befinden sich in diesem Bereich. Seine Breite ist nicht festgelegt – nur die
Abstände nach rechts und links. Hier hinein passen die beiden Spalten (mit 5 Pixeln
»Luft«).
51: #margin {52: float: right;53: width: 150px;54: color: white;55: }
Auch die Marginalie ist 150 Pixel breit. Der Nutzer kann hierbei die Breite des Brow-
serfensters ändern – die Hauptspalte nimmt sich immer den noch verfügbaren
Raum.
56: #footer {57: clear: both;58: }59: </style>60: </head>61: <body>62: <div id="wrapper">63: <div id="header">64: <h1>Dreispalter mit fixen Spalten rechts und links </h1>65: </div>
Für dieses Beispiel habe ich eine etwas andere Struktur des HTML gewählt. Neben
dem allumfassenden #wrapper ist jetzt #main der Container für die Spalten #mainnav
(war vorher neben #main), #content und #margin.
66: <div id="main">67: <div id="mainnav">68: <h3>Navigation</h3>69: <ul>
8.3 Der Dreispalter
153
Da
8
70: <li><a href="#">Seite 1</a></li>71: <li><a href="#">Seite 2</a></li>72: <li><a href="#">Seite 3</a></li>73: <li><a href="#">Seite 4</a></li>74: <li><a href="#">Seite 5</a></li>75: <li><a href="#">Seite 6</a></li>76: <li><a href="#">Seite 7</a></li>77: </ul>78: </div>79: <div id="margin">80: <h3>Marginalie </h3>81: <p>In der Marginalie werden zusätzliche Inhalte dargestellt</p>82: <p> </p>83: </div>84: <div id="content">85: <p>Sed ut perspiciatis unde ... </p>86: </p>87: </div>88: </div>89: <div id="footer"> Kapitel 8 : Dreispalter </div>90: </div>91: </body>92: </html>
Listing 8.5 Ein Dreispalter mit fester Breite der seitlichen Spalten und »Autoclearing«
8.3.3 Dreispalter mit flexibler Spaltenaufteilung und freier Wahl
der Breiteneinheiten
Nun gibt es noch zwei Wünsche, die bislang offenblieben:
� ein flexibles oder elastisches Layout für den Dreispalter
� die freie Wahl der Spaltenreihenfolge
Mit dem folgenden Layout können Sie auch diese beiden Wünsche erfüllen.
Obwohl es logisch ein wenig fragwürdig erscheint, erlaubt CSS für die Angabe der
Außenabstände auch negative Werte. Das Element rutscht dann um den entspre-
chenden Betrag nach außen.
Sie beginnen mit einer einfachen HTML-Struktur (der besseren Übersicht halber
habe ich die Spalten mit den wenig semantischen Bezeichnungen a–c versehen; in
der Praxis sollten Sie das natürlich nicht machen, sondern die Bereiche nach ihren
Funktionen benennen.)
8 Layout mit CSS
154
<div id="spalte-a">...</div><div id="spalte-b">...</div><div id="spalte-c">...</div>
Als Beispiel wählen Sie ein flexibles Layout mit prozentualen Breiten. Der Ansatz
funktioniert genauso gut mit festen Breiten und in einem elastischen Layout in em.
Beispiel 1: Spalte A steht im Quelltext vorn und optisch in der Mitte,
Spalte B sitzt links und Spalte C rechts (B – A – C)
Alle Spalten werden nach links gefloatet und erhalten Breitenangaben in Prozent-
werten:
1: #spalte-a {2: float: left;3: width: 50%;4: margin-left: 20%;5: background: #99ccff;6: }
Spalte A (Inhalt) wird auf 50% der Breite gesetzt und bekommt einen positiven linken
Außenabstand, in den Spalte B hineinpasst.
7: #spalte-b {8: float: left;9: width: 20%;10: margin-left: -70%;11: background: #ccccff;12: }
Spalte B für die Navigation – im Quelltext nach Spalte A notiert – wird um ihre eigene
Breite und die Breite von Spalte A (bzw. um die Breite von Spalte A und deren linken
Abstand) nach links versetzt. Damit landet sie am linken Rand der Seite.
13: #spalte-c {14: float: left;15: width: 30%;16: background: #ffffcc;17: }
Listing 8.6 CSS für Anordnung B – A – C
Spalte C kann dann ganz normal nach Spalte A platziert werden (siehe Abbildung 8.9).
8.3 Der Dreispalter
155
Da
8
Abbildung 8.9 Variante B – A – C
Komplett sieht es dann so aus:
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Dreispalter mit freier Wahl der Spalten</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: body, div {9: margin: 0;10: padding: 0;11: border: 0;12: }13: #header, #footer {14: background: #efefef;15: padding: 10px;16: }17: #spalte-a {18: float: left;19: width: 50%;20: margin-left: 20%;21: background:#99CCFF;22: display: inline;23: }24: #spalte-b {
8 Layout mit CSS
156
25: float: left;26: width: 20%;27: margin-left: -70%;28: background:#CCCCFF;29: }30: #spalte-c {31: float: left;32: width: 30%;33: background:#FFFFCC;34: }35: #footer {36: clear: both;37: }38: </style>39: </head>40: <body>41: <div id="header">42: <h1>Dreispalter mit freier Wahl der Spalten </h1>43: </div>44: <div id="spalte-a">45: <p>Spalte A: Inhalte</p>46: <p> </p>47: </div>48: <div id="spalte-b"> Spalte B: Navigation49: <p> </p>50: <p> </p>51: <p> </p>52: <p> </p>53: </div>54: <div id="spalte-c">55: <p>Spalte C: Marginalie</p>56: <p> </p>57: <p> </p>58: <p> </p>59: </div>60: <div id="footer"> Footer</div>61: </body>62: </html>
Listing 8.7 Kompletter Quellcode für das flexible Layout (B – A – C)
Wenn Sie nun das Layout in einer anderen Reihenfolge haben wollen, brauchen Sie
im Quellcode nichts zu verändern, wie die folgenden Abschnitte zeigen.
8.3 Der Dreispalter
157
Da
8
Beispiel 2: Spalte A steht im Quelltext und optisch vorn,
Spalte B sitzt in der Mitte und Spalte C rechts (A – B – C)
Dies ist die normale Reihenfolge im Code und entspricht unseren bereits besproche-
nen Beispielen, stellt somit also kein Problem dar (siehe Abbildung 8.10). Der Voll-
ständigkeit halber hier der CSS-Code:
1: #spalte-a {2: float: left;3: width: 20%;4: background:#99CCFF;5: }6: #spalte-b {7: float: left;8: width: 50%;9: display: inline;10: background:#CCCCFF;11: }12: #spalte-c {13: float: left;14: width: 30%;15: background:#FFFFCC;16: }
Listing 8.8 Der CSS-Code für die zweite Variante eines
flexiblen Dreispalters (A – B – C) – Ausschnitt
Abbildung 8.10 A – B – C entspricht der Reihenfolge im Code und erfordert keine besonde-
ren Maßnahmen.
8 Layout mit CSS
158
Beispiel 3: Die erste Spalte in der Mitte, die zweite Spalte rechts und
die dritte Spalte links (C – A – B)
Als weitere Variante könnte auch die Anordnung (C – A – B) in Frage kommen (siehe
Abbildung 8.11).
1: #spalte-a {2: float: right;3: width: 50%;4: margin-left: -80%;5: margin-right: 30%;6: background:#99CCFF;7: display: inline;8: }
Der negative Abstand wird hier gleich der ersten Spalte A mitgegeben. Sie wird per
float: right ganz nach rechts geschoben mit einem Abstand von 30%, und ihr linker
Abstand (wo der nächste Kasten beginnt) wird um 80% nach rechts verschoben (der
linke Abstand mit negativem Vorzeichen weist nach rechts).
9: #spalte-b {10: float: right;11: width: 30%;12: margin-right: 0;13: background:#CCCCFF;14: }
Dort landet Spalte B mit 30% der Breite.
15: #spalte-c {16: float: left;17: width: 20%;18: background:#FFFFCC;19: }
Spalte C wird nun nach links gefloatet und nimmt den dort vorhandenen Platz von
20% ein.
20: #footer {21: background: #efefef;22: }23: p {24: margin: 0;25: }
Listing 8.9 Anordnung (C – A – B)
8.3 Der Dreispalter
159
Da
8
Abbildung 8.11 Auch C – A – B ist möglich – alles, ohne den HTML-Code zu verändern.
Ein lesenswerter Artikel zum »Arbeiten mit negativen Abständen« von Ryan Brill
wurde im Magazin »A List Apart« veröffentlicht: http://www.alistapart.com/articles/
negativemargins/ (Linkcode 0536).
Sie können diese Technik auch mit fixen oder elastischen Breitenangaben verwen-
den. Allerdings müssen Sie allen Spalten explizit Breiten zuweisen, was zu einem
unflexiblen Layout (in Bezug auf Veränderungen der Browserfenstergröße) führt.
8.3.4 Das gelöste Problem der (nicht) gleich langen Spalten
Ein Problem, mit dem viele CSS-Einsteiger anfangs zu kämpfen haben: Die Spalten
gehen nicht bis zum Seitenende oder sind nicht gleich lang. Bei einfarbigem Hinter-
grund ist das nicht so schlimm – wenn aber Spalten farbig sein sollen, ist das recht
unangenehm. Die CSS-Eigenschaft height hilft Ihnen meist nicht weiter, weil Sie ja
nicht wissen, wie groß das Browserfenster sein wird.
Die einfachste Variante ist die Verwendung der display-Eigenschaft, mit der Sie bei
allen moderneren Browsern (ab Internet Explorer 8) ein tabellenartiges Verhalten
erzeugen können.
Wenn Sie also den Container für Ihre Spalten als Tabelle mit einer Tabellenzeile ver-
stehen und die einzelnen Spalten als Zellen definieren, sorgt CSS dafür, dass alle drei
Spalten (»Zellen«) gleich hoch werden.
1: <!DOCTYPE html>2: <html>3: <head>
8 Layout mit CSS
160
4: <meta charset="utf-8">5: <title>Dreispalter mit display: table </title>6: <style>7: html {8: font-family: Verdana, Geneva, sans-serif;9: font-size: 62.5%;10: line-height: 180%;11: color: #666;12: }13: body {14: font-size: 1.4em;15: margin: 0;16: padding: 0;17: }18: h1 {19: font-family: "Courier New", Courier, monospace;20: font-size: 200%;21: margin: 0;22: }23: #main, #content, #margin {24: margin: 0;25: padding: 0;26: border: 0;27: }28: #mainnav {29: margin: 0;30: padding: 0 1%;31: border: 0;32: width: 18%;33: background: lightgray;34: display: table-cell;35: }
Sie müssen nur die einzelnen Spalten als »tabellenzellenartig« definieren.
36: #mainnav h3, #margin h3, #margin p, #mainnav ul {37: margin: 0.5em;38: list-style: none;39: }40: #mainnav ul {41: padding-left: 0.5em;42: }43: #mainnav li {44: padding: 0.2em 0;
8.3 Der Dreispalter
161
Da
8
45: }46: #main {47: margin: 0;48: padding: 0%;49: background:#FFC;50: display: table;51: }
Dem umgebenden Container weisen Sie Tabelleneigenschaften zu. Die Tabellenzeile
wird vom Browser automatisch »dazugedacht«.
52: #content {53: padding: 10px;54: }55: #margin {56: width: 20%;57: background: lightgray;58: display: table-cell;59: }
Auch die Marginalie verhält sich wie eine Tabellenzelle.
60: #header, #footer {61: padding: 10px;62: }63: #footer {64: clear: both;65: border-top: 1px solid grey;66: background-color: #efefef;67: text-align: center;68: }69: </style>70: </head>71: <body>72: <div id="header">73: <h1>Dreispalter mit display: table </h1>74: </div>75: <div id="main">76: <div id="mainnav">77: <h3>Navigation</h3>78: <ul>79: <li><a href="#">Seite 1</a></li>80: <li><a href="#">Seite 2</a></li>81: ...
8 Layout mit CSS
162
82: </ul>83: </div>84: <div id="content">85: <p>Sed ut perspiciatis unde omnis iste ... </p>86: </div>87: <div id="margin">88: <h3>Marginalie </h3>89: <p>In der Marginalie werden zusätzliche Inhalte dargestellt</p>90: </div>91: </div>92: <div id="footer"> Kapitel 8 : Dreispalter </div>93: </body>94: </html>
Listing 8.10 So einfach – »display: table« für den Dreispalter
Die Nutzung von display: table hat noch andere Vorteile. Sie müssen nicht alle Spal-
ten mit Breitenangaben versehen – die Spalten ohne Angaben nehmen sich den ver-
fügbaren Raum – und können für jede Spalte andere Einheiten nutzen.
Leider beherrscht der Internet Explorer diese nützliche Technik erst ab der Version 8.
Vorher können Sie sich mit einem JavaScript-Hilfsmittel behelfen, das die Funktion
im IE8 nachrüstet. Solche Helfer nennt man Polyfills und ich werde Ihnen im Laufe
des Buches weitere vorstellen.
Laden Sie sich die Bibliothek unter http://tanalin.com/en/projects/display-table-htc/
(Linkcode 0754) herunter, und binden Sie sie an das Element, das die Tabelleneigen-
schaft haben soll. Im Beispiel ist es der Bereich #main:
#main { behavior: url(display-table.min.htc); }
Nun können Sie mit
#mainnav, #margin {-dt-display: table-cell;
}
den Tabellenmodus auch für den Internet Explorer 8 aktivieren. display: table
selbst müssen Sie hier gar nicht mehr notieren, die Bibliothek macht das automa-
tisch. Nur wenn Sie die Bibliothek an das <body>-Element binden, müssen Sie für den
Tabellenkörper auch
#main { -dt-display: table; } festlegen.
8.3 Der Dreispalter
163
Da
8
Weitere Methoden für gleich lange Spalten
Mit der Idee, durch die Angabe height: 100% alle Bereiche auf 100% der Seitenhöhe zu
setzen, kommen Sie leider nur zum Ziel, falls die Seiteninhalte kein Scrollen erfor-
dern.
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Die Höhe</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: html, body { height: 100%; }9: #mainnav {10: float: left;11: margin: 0;12: padding: 0 1%;13: border: 0;14: width: 18%;15: height: 100%;16: background: lightgray;17: }18: ...19: #main {20: margin: 0;21: padding: 0 2%;22: float: left;23: border: 0;24: width: 76%;25: }26: </style>27: </head>28: <body>29: <div id="mainnav">30: <h3>Navigation</h3>31: <ul>32: <li><a href="#">Seite 1</a></li>33: ...34: </ul>35: </div>36: <div id="main">37: <h1> Höhe 100% </h1>
8 Layout mit CSS
164
38: <p>Sed ut perspiciatis unde omnis iste natus ... </p>39: </div>40: </body>41: </html>
Listing 8.11 Höhe 100% bezieht sich auf den sichtbaren Bereich.
Verkleinern Sie das Browserfenster des oben gezeigten Beispiels (die vollständige
Datei finden Sie auf der DVD), bis ein vertikaler Scrollbalken erscheint. Der Hinter-
grund der Navigation #mainnav wird nur bis zum Ende des Browserfensters (View-
port) gefärbt. Wenn Sie auch #main: 100% vergeben, passiert dort dasselbe.
JavaScript
Sie können auch per JavaScript die Höhe der längsten Spalte ermitteln und die ande-
ren Spalten dynamisch anpassen. Die beiden folgenden Quellen befassen sich mit
der Methode im Detail:
� http://www.paulbellows.com/getsmart/balance_columns/
(Linkcode 0054; umfassend dokumentiert)
� http://www.saila.com/attic/sandbox/set-height.html
(Linkcode 0055; elegante Methode zur Ermittlung der Höhe eines Kastens)
8.4 Responsive Layouts
Eine durch CSS Media Queries (Teil von CSS3) neu aufgelebte Technik ist das auflö-
sungsabhängige oder adaptive Layout – oft auch unter dem Schlagwort Responsive
Design bekannt.
Was früher nur unter Zuhilfenahme von JavaScript funktionierte, geht jetzt auch mit
CSS allein: das Abfragen der aktuellen Bildschirmbreite und Ausliefern eines daran
angepassten Stylings.
Der Unterschied zwischen adaptiven und Responsive Layouts
Das adaptive Layout ist im Prinzip ein festes Layout, das aber in mehreren Versionen
existiert. Je nach verfügbarem Platz »springt« das Layout bei unterschiedlichen Bild-
schirmbreiten um. Zwischen diesen Schwellenwerten verhält es sich wie ein festes
Layout – es bewegt sich nicht. Das Responsive Layout verfügt ebenfalls über Schwel-
lenwerte, ab denen das Layout sich deutlich ändert. Dazwischen aber verhält es sich
wie ein fluides Layout. Zusätzlich ist es mit skalierbaren Inhalten ausgestattet – Bilder
passen sich ebenfalls dem verfügbaren Platz an.
8.4 Responsive Layouts
165
Da
8
Media Queries können dabei einerseits die festen Eigenschaften eines Displays, also
die maximalen Bildschirmabmessungen oder die Auflösung, abfragen oder anderer-
seits die aktuellen Bildschirmabmessungen – und dabei auch auf Änderungen reagie-
ren. Bei der Abfrage der festen Eigenschaften werden die Eigenschaften max-device-
width oder min-device-width genutzt. Solche Abfragen verwende ich in Kapitel 15,
»Das mobile Web – Stylesheets, Mobiltelefone und PDAs«, um ein eigenes Stylesheet
für das iPhone auszuliefern.
Jetzt geht es mir um die Abfrage der aktuellen Eigenschaften des Browserfensters,
um dem Ergebnis entsprechend das Layout anzupassen. Stellen Sie sich ein vierspal-
tiges Layout vor (siehe Abbildung 8.12). Mit den Erkenntnissen aus diesem Kapitel
können Sie es leicht in Prozenten anlegen:
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Adaptives Layout</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: #main {9: overflow: auto;10: }11: div div {12: width: 21%;13: float: left;14: margin: 1%;15: padding: 10px 1%;16: background: #efefef;17: border: none;18: }19: </style>20: </head>21: <body>22: <div id="header">23: <h1>Adaptives Layout</h1>24: </div>25: <div id="main">26: <div id="k1">27: <h2>Kasten 1</h2>28: ...29: </div>30: <div id="k2">
8 Layout mit CSS
166
31: <h2>Kasten 2</h2>32: ...33: </div>34: ...35: </div>36: <div id="footer"> Kapitel 8 : Adaptives Layout </div>37: </body>38: </html>
Listing 8.12 Ein fluides Layout passt sich der Bildschirmgröße an ...
Abbildung 8.12 ... sinnvoll ist das allerdings nur in Grenzen.
Bis zu einer gewissen Bildschirmgröße funktioniert das gut – danach werden die
Spalten einfach zu klein. Sie könnten natürlich mittels min-width: 800px für den
umgebenden Container #main einfach eine Grenze für die Skalierung setzen – dann
würde ab dieser Größe nicht weiter skaliert, und ein Scrollbalken würde erscheinen.
Auch nicht sehr elegant. Besser ist es da schon, den einzelnen Kästen eine minimale
Breite mitzugeben und durch die float-Eigenschaft einfach die Kästen herunterrut-
schen lassen. Dazu schreiben Sie einfach zu den Kästen (ab Zeile 12):
8.4 Responsive Layouts
167
Da
8
min-width: 150px;
So erreichen Sie einen Umbruch der Kästen, sobald die Breite der Seite nicht mehr
ausreicht (siehe Abbildung 8.13).
Abbildung 8.13 Schon besser – mit »float«-Eigenschaften und »min-width« verhindern Sie
die Zerstörung des Layouts.
Noch besser ist es jedoch, wenn Sie explizit auf die Bildschirmbreite mit einem ver-
änderten Layout reagieren können. Dazu verwenden Sie Media Queries. Statt der
Anweisung für div div setzen Sie folgenden Block ein:
1: @media screen and (min-width: 801px) {2: div div {3: width: 21%;4: float: left;5: margin: 1%;6: padding: 10px 1%;7: background: #efefef;
8 Layout mit CSS
168
8: border: none;9: }10: }
Der erste Block greift bei einer Fenstergröße von mehr als 800 Pixeln. Dann werden
alle Kästen wie gehabt nebeneinander dargestellt.
11: @media screen and (max-width: 800px) and (min-width: 401px) {12: #k1, #k4 {13: border: 1px solid gray;14: clear: left;15: padding 5px 10px;16: }17: #k2, #k3 {18: width: 42%;19: float: left;20: margin: 2%;21: padding: 10px 2%;22: background: #efefef;23: border: none;24: }25: }
Bei kleineren Bildschirmen werden die beiden äußeren Kästen über die gesamte
Seite gestreckt, die mittleren teilen sich die Breite.
26: @media screen and (max-width: 400px) {27: div div {28: padding: 10px;29: background: #efefef;30: border: 1px dashed black;31: }32: }
Listing 8.13 Auflösungsabhängiges Bildschirmlayout für drei Bildschirmgrößen
Bei kleinen Bildschirmen passt nur noch ein Kasten in die Seite – alles wird unterein-
ander angeordnet (siehe Abbildung 8.14).
Jeffrey Zeldman beschreibt in seinem Blog weitere Möglichkeiten für adaptives Lay-
out: http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/ (Link-
code 0614). Insbesondere für den Einsatz von unterschiedlichen Grafiken ist der
Ansatz sehr interessant.
8.4 Responsive Layouts
169
Da
8
An dieser Stelle muss allerdings noch erwähnt werden, dass der Internet Explorer lei-
der erst ab Version 9 nativ mit Media Queries umgehen kann. Es gibt aber glücklicher-
weise auch eine JavaScript-Bibliothek (http://code.google.com/p/css3-mediaqueries-
js/ – Linkcode 0615), die ältere IEs für Media Queries aufrüstet. Lesen Sie dazu auch
Abschnitt 14.7.2, »JavaScript zur Erweiterung der Browserfähigkeiten nutzen«.
Abbildung 8.14 Mit einem auflösungsabhängigen Layout liefern Sie für unterschiedliche
Bildschirmgrößen das passende Design.
Die Website des Projekts »320 and up« von Andy Clarke ist auch ein gutes Beispiel,
wie sich durch geschickte Anordnung und passende Grafiken ein Layout entwickeln
lässt, das an unterschiedliche Auflösungen angepasst ist und immer gut aussieht
(siehe Abbildung 8.15). Inzwischen wurde »320 and up« durch ein neues Projekt abge-
löst: »Rock Hammer« (http://stuffandnonsense.co.uk/projects/rock-hammer/ – Link-
code 0791).
8 Layout mit CSS
170
Abbildung 8.15 Passt auf jeden Screen – die Website zu »320 and up«.
8.5 CSS-Layouttricks
Oft klappt beim Layouten mit CSS nicht alles auf Anhieb so, wie man es sich vorstellt.
Deshalb beschreibe ich im Folgenden ein paar typische Probleme und ihre Lösung.
8.5.1 Zentrieren
Eine immer wieder benötigte Funktion ist das Zentrieren eines Inhaltsbereichs in der
Mitte des Browserfensters, horizontal sowie auch vertikal.
8.5 CSS-Layouttricks
171
Da
8
Beim Zentrieren gibt es mehrere Varianten, die zum Teil unterschiedliches Vorgehen
erfordern:
� horizontales Zentrieren mit festgelegter Breite (die meistbenötigte Variante)
� horizontales Zentrieren mit festgelegten Abständen zum Rand (und damit vari-
able Breite des Inhalts)
� vertikales Zentrieren mit festgelegter Breite
� vertikales Zentrieren mit festgelegten Abständen zum Rand
Möglich ist auch eine Kombination von vertikal und horizontal zentrierten Inhalten.
Horizontal zentrieren
Die einfachste Variante ist das horizontale Zentrieren mit festgelegter Breite. Diese
kann dabei durchaus in Prozentwerten oder em notiert sein.
Eigentlich genügt es hierbei, die äußeren (horizontalen) Abstände eines Kastens auf
auto zu setzen, um ihn horizontal zu zentrieren. Dabei wird die Größe des verfügba-
ren Platzes (also Browserfensterbreite minus Breite des Kastens) gleichmäßig auf
beide Seiten verteilt – der Kasten sitzt in der Mitte.
Die Eigenschaft text-align hingegen ist für Kästen ungeeignet, da sie sich auf die
Ausrichtung von Text innerhalb von Absätzen bezieht. Früher konnte man nur mit
text-align: center auch Blockelemente im Internet Explorer zentrieren. Ab dem
Internet Explorer 7 reicht die nachfolgend beschriebene Methode.
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Zentrieren horizontal</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: #main {9: width: 600px;10: margin: 0 auto;
Hier wird die Zentrierung erreicht.
margin: 0 auto ist eine Kurzschreibweise für
margin-top: 0; margin-bottom: 0;margin-left: auto; margin-right: auto;
Dabei gilt der erste Wert für die vertikalen Abstände und der zweite für links und
rechts.
8 Layout mit CSS
172
11: }12: </style>13: </head>14: <body>15: <div id="header">16: <h1>Zentrieren horizontal</h1>17: </div>18: <div id="main">19: <p>Sed ut perspiciatis unde omnis iste natus ... </p>20: </div>21: <div id="footer"> Kapitel 8 : Zentrieren </div>22: </body>23: </html>
Listing 8.14 Einfaches Zentrieren
Um einen flexibel großen Kasten mit einem festen Abstand zu den Seiten zu errei-
chen, können Sie mit einem Innenabstand für das übergeordnete Element – z.B. den
<body> – arbeiten. Wenn nur ein Teil zentriert werden soll, benötigen Sie einen
umschließenden Container für den Abstand:
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Zentrieren horizontal</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: #wrapper {9: padding: 0 60px;10: border: 0;11: }12: </style>13: </head>14: <body>15: <div id="header">16: <h1>Zentrieren horizontal</h1>17: </div>18: <div id="wrapper">19: <div id="main">20: <p>Sed ut perspiciatis unde omnis iste natus ... </p>21: </div>22: </div>
8.5 CSS-Layouttricks
173
Da
8
23: </div>24: <div id="footer"> Kapitel 8 : Zentrieren </div>25: </body>26: </html>
Listing 8.15 Horizontal zentriert mit festem Abstand
Vertikal zentrieren
Vertikales Zentrieren ist schon etwas schwieriger. Da keine CSS-Anweisung existiert,
die für das vertikale Zentrieren von Blockelementen geeignet ist, gibt es verschie-
dene Ansätze, die aber alle Nachteile haben.
Was macht eigentlich »vertical-align«?
Ein Studium der CSS-Eigenschaften führt schnell zur Eigenschaft vertical-align, die
auf den ersten Blick für die vertikale Anordnung von Elementen geeignet zu sein
scheint. Leider stimmt das nur zum Teil.
Die Eigenschaft vertical-align kann auf zwei Arten von Elementen angewandt wer-
den: auf eingebundene (Inline-)Elemente, wie beispielsweise Bilder, sowie auf Tabel-
len. Je nach Anwendung wirkt sie komplett unterschiedlich:
� Wenn Sie vertical-align auf eine Tabellenzelle anwenden,
<td style="vertical-align: middle;">Inhalt</td>dann wirkt vertical-align auf die Elemente im Innern der Zelle (und zentriert
diese vertikal auf Basis der Zellenhöhe).
� Wenden Sie vertical-align jedoch auf Inline-Elemente an, z.B. eine Grafik,
<img style="vertical-align: middle;">dann bestimmt sie, wie sich das damit ausgezeichnete Element in Bezug auf seine
Umgebung (die Textlinie) verhält.
Im Prinzip könnten Sie dieses Verhalten auch für die vertikale Positionierung von
Blockelementen nutzen, indem Sie
div {display: table-cell;vertical-align: middle;
}
definieren und damit einem normalen Blockelement die Eigenschaften einer Tabel-
lenzelle verleihen. Sie ahnen es vermutlich schon – dieses Verhalten wird vom Inter-
net Explorer (zumindest bis zur Version 7) nicht unterstützt. Mehr zur Eigenschaft
vertical-align und Beispielbilder zur Ausrichtung finden Sie in der Referenz im
Anhang.
8 Layout mit CSS
174
Grundsätzlich ist es mit CSS nicht möglich, ein Element vertikal so zu zentrieren,
dass die äußeren Abstände vorgegeben werden und sich der innere Kasten anpasst.
Das liegt daran, dass Kästen grundsätzlich immer nur so hoch werden, wie der vor-
handene Inhalt oder explizit die Eigenschaft height vorgeben. Wenn Sie aber nicht
wissen, wie hoch der Kasten ist (weil er sich ja nach der Höhe des Browserfensters
richten soll), klappt das nicht. Hier hilft nur, die Höhe des Fensters per JavaScript
abzufragen und dem Element dynamisch eine passende Höhe zuzuweisen. Wie CSS-
Zuweisungen per JavaScript aussehen, beschreibe ich in Kapitel 14, »Ajax, JavaScript
und CSS«.
Was aber geht, ist, eine Box mit bekannter Höhe vertikal zu zentrieren. Horizontal
können Sie sich aussuchen, ob die Box eine feste Breite haben soll oder feste Außen-
abstände (was vertikal gar nicht möglich ist, ist horizontal einfach).
Der Trick besteht darin, ein Hilfselement zu verwenden, dass per absoluter Positio-
nierung in die vertikale Mitte der Seite geschoben wird. Darin befindet sich wie-
derum ein absolut positioniertes Element, das um 50% der Seitenbreite eingerückt
wird. Das Element beginnt nun genau in der Mitte der Seite – allerdings mit seiner
linken oberen Ecke. Daher müssen Sie es nun noch um jeweils die Hälfte seiner Höhe
und Breite wieder zurückschieben.
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>Zentrieren vertikal mit festen Abmessungen</title>6: <style type="text/css">7: html {8: font-family: Verdana, Geneva, sans-serif;9: font-size: 62.5%;10: line-height: 180%;11: color: #666;12: }13: body {14: margin: 0;15: font-size: 1.4em;16: }17: h1 {18: font-family: "Courier New", Courier, monospace;19: font-size: 200%;20: margin: 0;21: padding: 20px;22: }
8.5 CSS-Layouttricks
175
Da
8
23: #zentrierhilfe {24: text-align: center;25: position: absolute;26: top: 50%;27: left: 0px;28: width: 100%;29: height: 1px;30: overflow: visible;31: visibility: visible;32: }
Zunächst brauchen Sie ein Hilfselement zum Zentrieren. Es wird per absoluter Posi-
tionierung um 50% der Seitenhöhe nach unten gesetzt und auf »nicht sichtbar«
geschaltet. Die Höhe ist 1px, aber durch overflow: visible werden darin befindliche
Elemente nicht abgeschnitten.
33: #inhalt {34: text-align: left;35: background-color: #dedede;36: border: 1px dashed black;37: margin-left: -20em;38: position: absolute;39: top: -10em;40: left: 50%;41: width: 40em;42: height: 20em;43: }
Der Inhalt muss um die Hälfte seiner Dimensionen (hier 40 × 20 em – das geht aber
natürlich auch mit Pixeln) zurückgeschoben werden.
44: #inhalt p {45: padding: 1em;46: }47: </style>48: </head>49: <body>50: <div id="zentrierhilfe">51: <div id="inhalt">52: <h1>Vertikal Zentrieren</h1>53: <p>Dieser Bereich wird horizontal und vertikal zentriert.<br>54: Der Text bleibt linksbündig.</p>55: </div>
8 Layout mit CSS
176
56: </div>57: </body>58: </html>
Listing 8.16 Horizontale und vertikale Zentrierung
8.5.2 Minimale und maximale Breiten für flexible Layouts
Layouts, die sich der Breite des Browserfensters anpassen, sind in ihrer Flexibilität
pixelbasierten Layouts überlegen. In einigen Fällen wünscht man sich jedoch eine
Möglichkeit, diese Flexibilität zu beschränken.
So ist es auf der einen Seite meist nicht erwünscht, wenn auf sehr breiten Bildschir-
men die Zeilen des Inhalts »unendlich« lang werden. Die optimale Leselänge von
Textzeilen beträgt etwa 60 bis 70 Zeichen. Werden die Zeilen länger, hat das Auge
Schwierigkeiten, beim Übergang zur nächsten Zeile den Anschluss zu finden. Auf der
anderen Seite lassen sich Layouts nicht beliebig verkleinern. Bei drei- oder vierspalti-
gen Layouts ist es bei weniger als 800 Pixeln Breite nur schwer möglich, Überlage-
rungen zu vermeiden.
Die CSS-Spezifikation trägt dem durch die Eigenschaften min-width und max-width
(und auch min-height und max-height) Rechnung (siehe Abbildung 8.16).
Abbildung 8.16 Box mit Sicherheitsnetz für minimale und maximale Abmessungen
8.6 Feststehende Bereiche und CSS-Frames
177
Da
8
Mit
#main {width: 80%;min-width: 800px;max-width: 60em;
}
erzeugen Sie einen Kasten, der sich auf 80% der Seitenbreite ausdehnt, solange diese
nicht kleiner ist als 800px und nicht größer als 60em.
Der Internet Explorer kann ab der Version 7 auch mit diesen Eigenschaften etwas
anfangen – für den Fall, dass Sie auch den Internet Explorer 6 noch unterstützen
müssen, können Sie die JavaScript-Bibliothek von Dean Edwards verwenden, die
neben verschiedenen anderen Hilfen auch einen Ersatz für die fehlenden Eigenschaf-
ten bereithält: http://dean.edwards.name/ie7 (Linkcode 0007).
Einen ähnlichen Ansatz verfolgt Andrew Clover, der allerdings nur für dieses spezi-
elle Problem ein kleines JavaScript anbietet: http://www.doxdesk.com/software/js/
minmax.html (Linkcode 0115).
8.6 Feststehende Bereiche und CSS-Frames
Oft ist es wünschenswert, bestimmte Bereiche einer Webseite, z.B. die Navigations-
elemente, immer im Sichtbereich des Besuchers zu belassen, während die Inhalte ge-
scrollt werden. Die bekannteste Methode, dies mit HTML zu erreichen, verwendet
hierzu Frames. Allerdings haben Frames einige gravierende Nachteile:
� Seiten, die aus mehreren Frames aufgebaut sind, können nicht ohne Weiteres als
Favoriten bzw. Lesezeichen gespeichert werden.
� Seiten lassen sich schlecht ausdrucken.
� Nicht alle Browser beherrschen Frames. Inzwischen unterstützen zwar alle übli-
chen Desktop-Webbrowser Frames, anders ist das hingegen oftmals bei Browsern
für WebTV, PDAs oder Mobiltelefone.
� Auch für Suchmaschinen sind Frames-Konstruktionen eher ungeeignet und erfor-
dern zumindest einigen zusätzlichen Aufwand bei der Optimierung.
� Sie können nicht sicher sein, dass immer die komplette Seite angezeigt wird (auf-
grund von Links direkt in das Frameset).
Letztlich verstößt die Verwendung von Frames auch gegen das Konzept von HTML,
dass ein Dokument eine Ausgabeseite repräsentieren soll. Die Bedienung mit alter-
8 Layout mit CSS
178
nativen Geräten (Screenreader oder Mobiltelefone) wird durch die Verwendung von
Frames ebenfalls erschwert.
Feststehende Menüs ohne die Nachteile von Frames
Mit CSS ist es jedoch möglich, einen festen Navigationsbereich auf einer Seite anzu-
bieten, ohne Frames zu verwenden. Um dies für alle üblichen Browser einigermaßen
gleichartig hinzubekommen, müssen wir allerdings wieder auf Tricks zurückgreifen.
Im Prinzip ist es ganz einfach: Die Angabe position: fixed für den Bereich, der das
Menü enthält, sollte alles regeln. In allen aktuellen Browsern (dies schließt auch den
Internet Explorer 7 ein) genügt das auch.
1: <style type="text/css">2: body {3: font-family: Arial, Helvetica, sans-serif;4: font-size: 12px;5: color: black;6: margin: 0;7: }8: #menue {9: position: fixed;10: background-color: #dedede;11: left: 0px;12: top: 0px;13: width: 100px;14: height: 200px;15: padding: 10px;16: border: 1px solid black;17: }18: #inhalt {19: position: static;20: width: 400px;21: margin: 0px 20px 20px 120px;22: padding: 10px;23: }24: </style>
8.6.1 CSS-Frames
Mit CSS lassen sich auch komplette Layouts erstellen, die wie Frames-Konstrukte aus-
sehen, ohne deren Nachteile aufzuweisen. Sie haben allerdings eine eigene Ein-
schränkung: Sie können in die einzelnen Bereiche (mit normalen Links) keine neuen
8.6 Feststehende Bereiche und CSS-Frames
179
Da
8
Inhalte laden, da es sich ja um Bestandteile eines einzigen Dokuments handelt. Statt-
dessen ist es nur möglich, neue Inhalte über das DOM und JavaScript in das Doku-
ment zu schreiben (Ajax).
In standardkonformen Browsern ist die Konstruktion wieder recht geradlinig. Wir
verwenden dazu drei Bereiche (#header, #main und #footer), die untereinander ange-
zeigt werden sollen. Der mittlere Bereich soll scrollbar sein (siehe Abbildung 8.17).
1: <!DOCTYPE html>2: <html>3: <head>4: <meta charset="utf-8">5: <title>CSS Frames</title>6: <link href="basis.css" rel="stylesheet" media="all" type="text/css">7: <style>8: html {9: /* IE */10: overflow: hidden;11: }
Dieser Abschnitt ist nur im Internet Explorer erforderlich, um den leeren Standard-
scrollbalken abzuschalten.
12: html, body, div {13: margin: 0;14: padding: 0;15: }16: #header, #footer {17: position: fixed;18: width: 100%;19: height: 3em;20: }21: h1, h2, p {22: margin: 10px;23: }24: div div {25: margin: 10px;26: height: 10em;27: overflow: auto;28: }
Kopf- und Fußzeile werden fixiert und auf 100% Breite gesetzt (Sie erinnern sich, bei
absoluter und fixer Positionierung verlieren die Elemente ihre Auto-Ausdehnung).
8 Layout mit CSS
180
Der #header soll bei top: 0 beginnen – das können Sie weglassen, da es der Standard-
wert ist.
29: #footer {30: bottom: 0;31: }
Den #footer müssen Sie aber explizit auf bottom: 0 setzen.
32: #main {33: position: fixed;34: width: 100%;35: top: 3em;36: bottom: 3em;37: overflow: auto;38: /* IE7-Problem: bei Angabe von padding funktioniert Scrollen nicht mehr */39: /* padding: 0 10px; */40: border: 0;41: }
Der Inhaltsbereich wird so angelegt, dass er oben und unten den Platz freihält, der für
Kopf- und Fußzeile benötigt wird. Im IE7 führt die Angabe eines padding dazu, dass
keine Scrollbalken mehr erscheinen ...
42: </style>43: </head>44: <body>45: <div id="header">46: <h1>CSS-Frames</h1>47: </div>48: <div id="main">49: <p>Sed ut perspiciatis unde omnis iste ... </p>50: </div>51: <div id="footer"> Kapitel 8 : CSS-Frames </div>52: </body>53: </html>
Listing 8.17 CSS-Frames
Indem Sie alle drei Bereiche festlegen, erscheint der Scrollbalken nur neben dem
Bereich, der auch gescrollt werden kann, und es entsteht ein echter »Frames-Effekt«.
Der gleiche Effekt lässt sich natürlich für alle Kästen erreichen, indem Sie eine Höhe
festlegen, die kleiner ist als die Inhalte, und overflow: auto (Standardwert) setzen.
Seit CSS3 können Sie im Übrigen auch overflow-x und overflow-y getrennt setzen.
8.7 Das flexible Kastenlayout
181
Da
8
Abbildung 8.17 Frames powered by CSS von Firefox bis Internet Explorer (ab 7)
8.7 Das flexible Kastenlayout
Letztlich befriedigen alle bislang vorgestellten Methoden nicht völlig. Die Verwen-
dung von float für komplette Layouts ist eher ein Workaround und hat diverse
Nebenwirkungen (Boxausdehnung), die mit weiteren Workarounds kompensiert
werden müssen. display: table funktioniert recht gut, lässt aber Funktionen ver-
missen (z.B. vertikale Ausrichtung) und ist eigentlich auch nicht zum Layouten
gedacht.
Daher hat sich das W3C ein neues Layoutsystem namens Flexbox einfallen lassen
und stellt damit eine Reihe von Eigenschaften und Werten zur Verfügung, die tat-
sächlich zum Layouten gedacht sind. Den Dreispalter aus den vorherigen Beispielen
können Sie mit diesem System sehr einfach umsetzen. Der HTML-Code bleibt dabei
unangetastet:
1: <div id="header">2: <h1>Dreispalter mit flexiblem Kastenlyout</h1>3: </div>4: <div id="wrapper">5: <div id="spalte-a">6: <p>Spalte A: Navigation</p>7: <p> </p>
8 Layout mit CSS
182
8: </div>9: <div id="spalte-b"> 10: <p>Spalte B: Inhalte</p>11: </div>12: <div id="spalte-c">13: <p>Spalte C: Marginalie</p>14: <p> </p>15: <p> </p>16: <p> </p>17: </div>18: </div>19: <div id="footer"> Kapitel 8 : Dreispalter mit Flex-Layout </div>20: </body>21: </html>
Listing 8.18 Dreispalter mit Flexbox
Alles, was Sie tun müssen, um ein Spaltenlayout zu erreichen, sind diese beiden
Zeilen:
#wrapper { display: flex; }#wrapper div { flex: 1; }
Dabei sorgt die erste Anweisung für das Initiieren des Layoutmodus, und die zweite
Zeile dehnt die Flexkästen zu gleichen Teilen in der Breite über die gesamte zur Ver-
fügung stehende Fläche.
Leider ist die Unterstützung etwas kompliziert. Während Chrome schon die aktuelle
Syntax unterstützt (allerdings mit dem Präfix -webkit-), versteht Firefox in der aktu-
ellen Version 19 eine ältere Version (auch mit Präfix), und der Internet Explorer nutzt
eine wiederum unterschiedliche Zwischensyntax (mit Präfix) ... Die Einzelheiten ent-
nehmen Sie Tabelle 8.2.
display: -webkit-box Safari 3-6, iOS 6, Android
display: -moz-box Firefox bis 19
display: -ms-flexbox Internet Explorer 10
display: -webkit-flex Chrome
display: flex Opera 12.1, Firefox ab 20, Internet Explorer 11
Tabelle 8.2 Übersicht der Flexbox-Syntax
8.7 Das flexible Kastenlayout
183
Da
8
Der Code muss also in der freien Wildbahn browserübergreifend so lauten:
1: #wrapper { 2: display: -webkit-box;3: display: -moz-box;4: display: -webkit-flex;5: display: -ms-flexbox;6: display: flex;7: }8: #wrapper div { 9: -webkit-box-flex: 1;10: -moz-box-flex: 1;11: -webkit-flex: 1;12: -ms-flex: 1;13: flex: 1;14: }
Listing 8.19 Browserübergreifende Flexbox-Syntax
Um die Beispiele nicht zu kompliziert zu machen, werde ich im Folgenden die aktu-
elle Syntax verwenden, die in Firefox 20 (oder in den 19-Nightlies) und mit -webkit-
in Chrome funktioniert.
Einen Artikel zur Microsoft-Syntax finden Sie hier: http://msdn.microsoft.com/de-de/
library/ie/hh673531(v=vs.85).aspx (Linkcode 0755), und die »alte« Firefox-Syntax ist von
Paul Irish beschrieben: http://www.html5rocks.com/en/tutorials/flexbox/quick/ (Link-
code 0756).
Aber genug der Unerfreulichkeiten – sehen Sie sich einmal an, was mit Flexbox so
alles möglich ist. Im Moment sind die drei Spalten gleich breit – in der Regel soll aber
die Inhaltsspalte breiter werden als die übrigen. Sie können nun einzelnen Spalten
konkrete Werte zuweisen – z.B. 50% für die mittlere Spalte. Dann teilen sich die bei-
den übrigen Spalten den Rest. Aber auch das Teilungsverhältnis lässt sich definieren
– im Prinzip haben Sie es schon getan, indem Sie allen Spalten mit
#wrapper div { flex: 1; }
gleichermaßen einen Platzbedarf von 1 zugewiesen haben. Weisen Sie mit
1: #spalte-a {2: flex: 1;3: }4: #spalte-c {5: flex: 2;6: }
8 Layout mit CSS
184
zu, so wird der Platz im Verhältnis 1:2 auf die Spalten aufgeteilt. Das funktioniert
natürlich auch, wenn Sie alle Spalten relativ zueinander definieren oder zwei Spalten
explizit Größen zuweisen (dann bleibt der dritten Spalte der restliche Platz).
Auch die Reihenfolge ist völlig unabhängig von der Notierung im Code. Sie können die
Reihenfolge durch die Eigenschaft order bestimmen – niedrigere Nummern stehen in
der Richtung des Layouts vorn. Apropos Richtung, auch die lässt sich ändern. Mit
flex-direction: row-reverse drehen Sie die Reihenfolge der Elemente einfach um.
Wenn Sie row-reverse lesen, ahnen Sie möglicherweise schon, dass es auch ein flex-
direction: column gibt. Und tatsächlich lässt sich ein horizontales Layout mit einem
einzigen Befehl in ein vertikales umwandeln.
Ich habe in der Navigationsspalte nun ein kleines Menü untergebracht, das aus einer
ungeordneten Liste besteht:
1: ul {2: list-style: none;3: padding: 0;4: width: 90%;5: }6: li {7: border: 1px solid #224499;8: background-color: #bbddff;9: padding: 4px;10: margin: 2px 0;11: }
Soweit nichts Besonderes. Wenn Sie die Liste im Flexbox-Layout definieren, ändert
sich nicht viel:
ul { display: flex; flex-direction: column; }
Sie haben ja schon etwas über auflösungsabhängiges Design gelesen. Stellen Sie sich
vor, Sie möchten auf einem kleineren Bildschirm die Navigation nach oben setzen
und in die Horizontale verlegen. Kein Problem mit Flexbox.
Zunächst definieren Sie für die #spalte-a eine Breite von 100% und für die Spalten b
und c entweder automatische Platzvergabe oder Sie teilen ihnen eigene Weiten zu –
z.B. 70% und 30%.
1: #wrapper {2: display: flex;3: flex-flow: row wrap;
8.7 Das flexible Kastenlayout
185
Da
8
4: }5: #spalte-a {6: width: 100%;7: order: 1;8: background: #99CCFF;9: }10: #spalte-b {11: flex: auto;12: order: 2;13: background:#CCCCFF;14: }15: #spalte-c {16: flex: auto;17: order: 3;18: background:#FFFFCC;19: }
Zusätzlich legen Sie für den umgebenden Flexkasten fest, dass die Inhalte auch
umbrochen werden dürfen (flex-flow: row wrap). Für das Menü ersetzen Sie flex-
direction: row durch flex-direction: column, und schon liegt es in der Horizonta-
len (siehe Abbildung 8.18).
Abbildung 8.18 Mit zwei Handgriffen entsteht ein Layout für kleine Bildschirme.
Ein bisschen gedrängt sieht es allerdings noch aus. Aber auch hier gibt es passende
Eigenschaften (siehe Abbildung 8.19). Mit justify-content: space-between verteilen
Sie die Menüpunkte auf die zur Verfügung stehende Fläche – beachten Sie, dass der
Platz tatsächlich nur auf die Flächen zwischen den Menüpunkten verteilt wird
(justify-content: space-around würde auch die Außenbereiche mit einbeziehen).
8 Layout mit CSS
186
Abbildung 8.19 Verteilung des Raums um die Menüpunkte
justify-content kennt noch die Werte center, sowie flex-start und flex-end –
damit würde das Menü in der Mitte zentriert bzw. nach vorn und hinten (start und
end beziehen sich immer auf die Flexrichtung, das heißt, bei einer horizontalen
Anordnung ist start links, bei einer vertikalen oben und, wenn Sie die Richtung mit
reverse umdrehen, eben unten und rechts).
Wollen Sie das Menü auf die gesamte Breite durch Verbreiterung der einzelnen
Menüpunkte dehnen, benötigen Sie wieder die schon besprochene Eigenschaft
flex: 1, die sie den Listenelementen zuweisen. Dann müssen Sie sich allerdings
selbst um die Abstände kümmern.
1: li {2: flex: 1;3: border: 1px solid #224499;4: background-color: #bbddff;5: padding: 4px;6: margin: 2px 4px;7: text-align: center;8: }
flex ist eigentlich eine Kurzschreibweise, die die Eigenschaften flex-grow, flex-
shrink und flex-basis vereint. flex-grow kennen Sie ja schon – damit wird der ver-
fügbare Platz relativ zu den Elementen verteilt – wenn alle Elemente 1 zugeordnet
haben, dehnen sie sich gleichmäßig aus. Wird z.B. einem Element 2 zugewiesen und
den anderen 1, dann nimmt dieses Element doppelt so viel Platz ein wie die anderen
jeweils. flex-shrink funktioniert im Prinzip genauso, nur gib es an, wie weit Ele-
mente verkleinert werden, wenn zu wenig Platz verfügbar ist (und kein Umbruch
stattfinden soll). Interessant ist wiederum flex-basis. Damit können Sie steuern, ob
die Platzvergabe absolut stattfindet (alle Menüpunkte bekommen den gleichen Platz,
unabhängig von ihrem Inhalt) oder relativ. Dann nämlich orientiert sich die Platzver-
gabe an der Länge der Inhalte der einzelnen Menüelemente (siehe Abbildung 8.20).
8.7 Das flexible Kastenlayout
187
Da
8
Abbildung 8.20 Ausdehnung der Menüpunkte
Sie sehen, mit dem Flexlayout lassen sich viele Probleme sehr einfach und elegant
lösen, die mit anderen Mitteln nur sehr mühevoll und weniger robust umsetzbar
sind.
Schade, dass der Internet Explorer diese nützliche Eigenschaft auch in der aktuellen
(Stand: Mai 2013) Version 10 noch nicht versteht. Aber hier hilft ein wenig JavaScript
weiter. Unter https://github.com/doctyper/flexie (Linkcode 0753) hat Richard Herrera
ein JavaScript veröffentlicht, das die Funktion des Flexlayouts auch für ältere Inter-
net Explorer nachrüstet (mithilfe von Floats). Um Flexie zu nutzen, müssen Sie das
Skript vor dem schließenden </body> nach einer JavaScript-Bibliothek (z.B. jQuery)
einbinden:
...<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script><script src="flexie.js" type="text/javascript"></script></body>
Flexie »spricht« die alte Flexsyntax, und es sind nicht alle Eigenschaften und Werte
des Flexlayouts implementiert. Da ältere Internet Explorer auch mit Floats so ihre
Probleme haben und moderne Selektoren nicht verstehen, sollten Sie sich vor dem
Einsatz das Readme und die Einschränkungen auf der Github-Seite sorgfältig durch-
lesen und Ihr Ergebnis sorgfältig testen.
Index
783
Index
!important .............................................................82, 88
(X)HTML .................................................................25, 33
valides .................................................................... 484
*-Selektor.................................................................... 417
:not ..................................................................................75
@import.............................................................. 93, 434
@import � Stylesheet
importiertes ............................................................93
@media ............................................................... 95, 539
3D-Effekt..................................................................... 272
960 Grid System ..................................................... 454
A
A List Apart ................................................................ 359
<abbr title=...> .......................................................... 493
Absolute Einheiten ................................................ 770
Absolute Positionierung...................................... 110
Abstand
negativer ......................................................153, 158
Abstand � margin ................................................. 685
Abwärtskompatibilität ......................................... 494
Accessibility .....................................................499, 609
Accessibility-Toolbar............................................. 601
addClass...................................................................... 506
aDesigner ................................................................... 493
Adobe .......................................................................... 593
Ajax .....................................................................494, 503
Akronym .................................................................... 493
Aktenreiter ................................................................ 258
all...................................................................................... 94
Allgemeiner Folgeelement-Selektor ..................68
Alpha-Kanal .....................................................310, 772
Alternatives Stylesheet ........................................ 356
Alternativtexte ........................................................ 572
Alt-Finder ................................................................... 608
Analysewerkzeuge ................................................. 597
Android..............................................................385, 545
Android-Emulator .................................................. 546
Anführungszeichen ............................ 234, 632, 638
Angabe
gemischte .............................................................. 194
relative ................................................................... 192
Animationen ...................................................299, 350
animierte Übergänge ....................................... 350
mit Keyframes ..................................................... 352
Anweisung
Wertigkeit.................................................................82
Anzeigemodus � display.................................... 735
Apple Mail.........................................................562, 567
Aptana ......................................................................... 593
Browservorschau ............................................... 594
Selektorenbaum ................................................. 594
Subversion ...................................................594, 596
Validierung........................................................... 595
Asterisk ..........................................................................62
Attribut ..........................................................................71
Attribut-Selektor .............................................. 70, 608
Auflösungsabhängiges Layout .......................... 164
aural ................................................................................94
Ausrichtung .............................................................. 665
Außenabstand.............................................................98
Äußerer Abstand � margin ........................ 98, 685
B
background ............................................................... 567
Barrierefreiheit ........................................................ 586
Testprogramme .................................................. 499
Basisschriftgröße .................................................... 217
Baumstruktur..............................................................65
Benutzerkennung................................................... 548
Benutzeroberfläche ............................................... 743
Benutzer-Stylesheet............................................... 607
Benutzertest.............................................................. 445
Bereich
feststehender ....................................................... 177
Berners-Lee, Tim ........................................................25
BIENE ........................................................................... 501
Bildergalerie ....................................................... 30, 318
Bildschirm ....................................................................94
Bildschirmgröße ............................................533, 538
Bildschirmtastatur ................................................. 538
Bildunterschrift ..............................................320, 639
BITV .....................................................................491, 492
Blackberry .................................................................. 549
Blindenschrift .............................................................94
Blindows ..................................................................... 394
Blockelement............................................51, 107, 735
blockquote........................................................233, 236
Bloglayout.................................................................. 137
Body-ID ..........................................................................62
Index
784
Boilerplate
Mobile Boilerplate ............................................. 551
Bookmarklet ............................................................. 607
Bootstrap.................................................................... 464
border ..........................................................98, 567, 695
border-bottom .................................................... 695
border-bottom-color ........................................ 690
border-bottom-radius ...................................... 694
border-bottom-style ......................................... 691
border-bottom-width ....................................... 689
border-color ......................................................... 690
border-left ............................................................. 695
border-left-color ................................................. 690
border-left-radius............................................... 694
border-left-style .................................................. 691
border-left-width ................................................ 689
border-radius .................................... 258, 328, 521
border-right .......................................................... 695
border-right-color .............................................. 690
border-right-radius ........................................... 694
border-right-style............................................... 691
border-right-width ............................................ 689
border-style .......................................................... 691
border-top ............................................................. 695
border-top-color ................................................. 690
border-top-radius .............................................. 694
border-top-style .................................................. 691
border-top-width................................................ 689
border-with........................................................... 689
border-radius ........................................................... 694
bottom ................................................................. 98, 111
Boxmodell � Kastenmodell
box-shadow .....................................................299, 334
braille..............................................................................94
Breadcrumbs ...............................................................31
Breite
maximale .............................................................. 176
minimale ......................................................143, 176
Breite � width .................................................. 98, 697
Brotkrumen-Navigation .........................................31
Browser Sniffing...................................................... 400
Browserbugs ............................................................. 516
Browsererkennung .......................................518, 533
Sniffing ................................................................... 533
Browserfenster ........................................................ 116
Browserhack ....................................................394, 397
Browserkennung .................................................... 537
Browserreferenzkarte ..............................................52
Browsershots ............................................................ 404
Browser-Sniffer........................................................ 400
Browserspezifisch................................................... 348
Browserstatistik....................................................... 381
Browser-Stylesheet ...................................................36
Browsertest ............................................................... 447
Browsertesting......................................................... 401
Browserweichen ................................... 361, 394, 395
C
Campaign Monitor................................................. 574
canvas .............................................................................40
caption ........................................................................ 268
Cascading Stylesheets
Definition .................................................................17
Chrome ....................................................................... 383
cite .......................................................................233, 243
Clarke, Andy .................................................................87
class .................................................................................52
className .................................................................. 504
Class-Selektor ..............................................................52
clear ........................................ 111, 120, 125, 127, 567
ohne zusätzliches Markup ............................. 127
Clearen � clear........................................................ 127
clip ................................................................................ 311
Collapsing Margins .......................................101, 218
color ............................................................................. 567
Conditional Comment... 391, 395, 396, 398, 400,
435, 532
Cookie.......................................................................... 359
CSS
drucken .....................................................................95
Elementtyp ........................................................... 107
Kommentar .......................................................... 773
mobiles ......................................................................95
CSS Mobile Profile .................................................. 530
CSS Zen Garden...........................................................18
CSS3 PIE....................................................................... 524
CSS-Checker .............................................................. 580
CSSDoc ...............................................................437, 441
CSS-Frame .........................................................177, 178
CSS-Framework........................................................ 451
CSS-Icon ...................................................................... 498
CSS-Liste ..................................................................... 258
CSS-Menü ................................................................... 245
CSS-Präprozessor .................................................... 422
CSS-Sprite ................................................................... 249
CSS-Sprites ................................................................. 312
CSS-Validator ............................................................ 499
cursive � Kursivschrift........................................ 645
Index
785
D
Dark side........................................................................ 86
Deckkraft.................................................................... 305
Definitionsliste ........................................................ 318
Deklaration ...........................................................24, 49
Design Pattern ......................................................... 410
Developer Toolbar � Web Developer
Toolbar ................................................................... 600
DIN A4 ......................................................................... 746
display ...................................................... 108, 111, 735
div ....................................................................................50
Doctype..........................................................................27
Doctype-Switching................................................. 396
Document Object Model ........................................29
Dokument
schlankes ............................................................... 487
DOM ...................................................................... 29, 503
Doppeltapp................................................................ 541
Dreamweaver CC ...........................................582, 584
Erweiterungen ..................................................... 586
Siteverwaltung .................................................... 593
Stil anlegen ........................................................... 587
Subversion ............................................................ 593
Tag-Inspektor ...................................................... 587
Vorlagen ................................................................ 591
3D-Effekt..................................................................... 272
Dreispalter � Dreispaltiges Layout ................ 145
Dreispaltiges Layout.............................................. 145
display:table ........................................................ 159
flexibel .................................................................... 146
gleich lange Spalten mit JavaScript............ 164
mit festen Spaltenbreiten ............................... 149
Drucken ......................................................................... 95
Druckversion...................................................301, 355
E
Easy Clearing ............................................................ 127
Eclipse.......................................................................... 593
eCSStender ................................................................ 525
EDGE ............................................................................ 535
Eigenschaft ............................................................24, 49
Eingebundenes Element � Inline-
Element.........................................................107, 735
Einheiten
absolute ................................................................. 770
relative ................................................................... 770
Einrückung................................................................ 226
Elastisches Layout .........................................136, 153
elementName .......................................................... 505
Element-Selektor .......................................................50
Eltern ..............................................................................27
em .............................................................. 264, 494, 770
Emacspeak ................................................................. 394
E-Mail ........................................................................... 561
Acid-Test ................................................................ 563
mit CSS ................................................................... 561
Newsletter testen................................................ 574
sichere Eigenschaften ....................................... 576
Tabellenlayout .................................................... 574
teilweise Unterstützung .................................. 576
Email Standards Project ....................................... 563
E-Mail-Newsletter ................................................... 571
embossed ......................................................................94
Entwurfsverfahren ................................................. 441
Ersetztes Element � Replaced Element ........ 109
ex ................................................................................... 770
Eye-Tracking ............................................................. 446
F
Farbdefinition .......................................................... 439
Farbe ...................................................................671, 771
Dezimalwerte .............................................307, 771
hexadezimale Angabe...................................... 771
Prozentwerte........................................................ 771
Schlüsselwörter ................................................... 772
Farbwert ..................................................................... 769
Faux Columns .......................................................... 151
Feature Detection ................................................... 401
Fehlersuche ............................................................... 484
Fernschreiber ..............................................................94
Festes Layout ............................................................ 134
Feststehender Bereich .......................................... 177
Filter .......................................................... 310, 394, 764
Gradient........................................................308, 343
Shadow..........................................................335, 337
Filter-Management ................................................ 435
Firebug ...............................................................597, 599
Firefox ......................................................................... 385
first-letter ..........................................................226, 229
first-line ...................................................................... 226
Fixe Positionierung ............................................... 110
Flash-Animation ..................................................... 494
Flexbox ....................................................................... 181
Flexibles Layout ................................... 135, 137, 181
Flexibles Menü � Aktenreiter .......................... 258
float ..................... 111, 120, 125, 128, 141, 229, 567
Drop......................................................................... 129
Modell ..................................................................... 121
Index
786
Flyout-Menü ....................................................252, 535
focus............................................................................. 496
Folgeelement-Selektor ............................................68
allgemeiner .............................................................68
font ............................................................................... 567
size ........................................................................... 191
variant.................................................................... 647
weight ..................................................................... 648
Formular ...........................................................280, 282
Fehlermeldung .................................................... 298
für Mobilgeräte ................................................... 543
Formularelement ................................................... 280
Foundation.......................................................466, 475
Frame � CSS-Frame .............................................. 178
Frameworks
mobile Frameworks .......................................... 550
Funktionsbereich ................................................... 442
G
Galerie
gruppierte ............................................................. 321
Gecko ........................................................................... 256
Gemischte Angabe ................................................. 194
Gleich lange Spalten .............................................. 159
Glider-/Levin-Methode ........................................ 224
GMX ....................................................................562, 569
Google ......................................................................... 491
Google Mail ......................................................562, 568
GPRS............................................................................. 535
Graceful Degradation............................................ 243
gradient ...................................................................... 341
linear-gradient ...........................................248, 341
radial-gradient.................................................... 344
Größenangaben ...................................................... 769
Grundlinie ................................................................. 667
GSM .............................................................................. 534
H
Hack ............................................................................. 394
Hack-Management ................................................ 435
Hallo Welt!.................................................................... 43
Handheld ..................................................... 93, 94, 548
Handy .............................................................................94
hasLayout .................................................................. 128
height ................................................ 98, 111, 567, 698
max-height ........................................................... 698
min-height ............................................................ 698
Hintergrund.............................................................. 671
mehrfache Hintergründe .......................316, 333
Hintergrundgrafik .................................................. 248
in Thunderbird .................................................... 567
Hochformat .............................................................. 746
Höhe � height............................................................98
Horizontales Menü ................................................ 256
hover...................................................................491, 622
href ............................................................................... 304
HTML .......................................................................25, 27
semantisches ....................................................... 484
valides..................................................................... 484
HTML5 ............................................................................37
HTML5-Doctor ............................................................25
HTML-Kommentar................................................. 399
I
ID-Selektor ....................................................................52
Image Map ................................................................. 444
Image-Replacement............................................... 225
<img>........................................................................... 488
import .................................................................. 93, 434
important ..............................................................82, 88
Important-Anweisung .............................................88
Importiertes Stylesheet...........................................93
Inhaltsverzeichnis .................................................. 439
Inheritance � Vererbung ......................................79
Initial................................................223, 226, 228, 629
Inline-Block ............................................................... 109
Inline-Element ................................................107, 735
Inline-Styles .................................... 89, 570, 572, 574
Innenabstand ..............................................................98
Innerer Rahmen � padding..................................98
Internet Explorer ...........................................121, 389
Internet Explorer 7 ........................................311, 520
Internet Explorer 8................................................. 311
iPhone .........................................................96, 534, 537
Bildschirmtastatur ............................................ 542
Designansätze ..................................................... 538
Human Interface Guidelines ......................... 543
Touchscreen ......................................................... 542
Zoom ....................................................................... 541
iPhone-Emulator .................................................... 544
Index
787
J
Java-Applet ................................................................ 494
JavaScript ............................. 164, 235, 359, 401, 503
Austausch eines Stylesheets .......................... 503
Browsereinschränkungen umgehen .......... 516
debuggen............................................................... 600
Formularvalidierung ........................................ 506
Klassen zuweisen ............................................... 504
Stile mit »style« zuweisen............................... 505
Überprüfung der Textlänge ........................... 508
JAWS.................................................394, 491, 499, 500
Jesse, Dirk ................................................................... 455
jQTouch ...................................................................... 557
jQuery....................................................... 506, 511, 515
jQuery Mobile .......................................................... 552
Themen .................................................................. 556
jQuery-UI-Framework........................................... 585
K
Kapitälchen ............................................................... 647
Kaskade..........................................................................80
Kastenmodell ..............................................................97
Keith, Jeremy ............................................................ 401
Kerning ....................................................................... 661
Keyframes.........................................................299, 352
Kickstart ..................................................................... 409
Kind-Selektor........................................................27, 65
Klassen
mehrere ..................................................................... 57
visueller Klassenname ........................................58
Kombinierte Selektoren ............................... 59, 252
Kommentar .............................................................. 106
Konqueror ................................................................. 383
Kursivschrift ............................................................. 645
Kurzschreibweise............................................. 54, 422
L
Längen- und Größenangaben............................ 769
Zoll ........................................................................... 770
Layout
auflösungsabhängiges .................................... 164
Blog- ........................................................................ 137
dreispaltiges......................................................... 145
elastisches ....................................................136, 153
festes ....................................................................... 134
flexibles .........................................................135, 137
Responsive ............................................................ 164
zweispaltiges........................................................ 137
Layoutmodell ..............................................................97
Layoutvarianten...................................................... 133
left .......................................................................... 98, 111
LESS .............................................................................. 423
Linealhintergrund .................................................. 443
linear-gradient ......................................................... 258
<link> ..............................................................................92
link ......................................................................... 91, 619
Link-Auszeichnung ................................................ 497
Linker Abstand � left ..............................................98
Linkvergrößerung .................................................. 543
Liste
als Menü ................................................................ 245
Listenelement .................................................109, 735
Lotus Notes ............................................................... 562
Lynx ............................................................................. 392
M
Madmanimation..................................................... 354
margin.........................................................98, 567, 685
margin-bottom ................................................... 685
margin-left............................................................ 685
margin-right ........................................................ 685
margin-top ........................................................... 685
max-height � height...................................176, 698
max-width � width............................................... 697
media .................................................................... 95, 539
Media Query ................................... 96, 531, 538, 548
media-Attribut............................................................93
Medienspezifisches Stylesheet ............................93
Medientypen ..................................................... 95, 301
Menü
flexibles � Aktenreiter .................................... 258
horizontales ......................................................... 256
mit Liste ................................................................. 245
verschachteltes ................................................... 251
vertikales ............................................................... 246
Meyer, Eric ................................................................. 417
Microformat ............................................................. 485
Microsoft Outlook .................................................. 565
Millimeter .................................................................. 770
min-height � height.......................... 111, 176, 698
min-width � width
Mobile Chrome........................................................ 544
Mobile Safari............................................................. 537
Index
788
Mobiles CSS ..................................................................95
Mobiles Web ............................................................. 529
Einschränkungen ............................................... 529
Standards .............................................................. 530
Mobilgeräte
Marktanteile ........................................................ 536
Modernizr .................................................................. 517
Moll, Cameron ......................................................... 530
monospace � Monospace-Schrift .................. 645
Mozilla ........................................................................ 385
Mozilla-Stiftung .........................................................25
MS Word ..................................................................... 565
N
Nachbarschafts-Selektor.........................................68
Negativer Abstand.........................................153, 158
Netrenderer .............................................................. 404
Nicht ersetztes Element � Non-replaced
Element.................................................................. 109
Non-replaced Element.......................................... 109
Normalize .................................................................. 421
not....................................................................................75
Notationsreihenfolge............................................ 433
Nummerierung ....................................................... 731
O
Oberer Abstand � top.............................................98
Object Detection ..................................................... 400
Objekthierarchie ........................................................28
Online-Screenshot-Dienst .................................. 404
opacity ...............................................................305, 310
Opera ..................................................................387, 394
Opera Mini............................................................ 387
Opera Mobile ....................................................... 387
Opera Mini .......................................................546, 548
Opera Mobile ............................................................ 546
Organisation............................................................. 433
outline...................................................... 696, 762, 764
color ........................................................................ 696
style ......................................................................... 696
width ....................................................................... 696
Outlook ....................................................................... 562
overflow .................................................. 128, 129, 699
overflow-x � overflow
overflow-y � overflow......................................... 699
Overheadprojektor ................................................... 94
P
padding .......................................................98, 567, 688
padding-bottom ................................................. 688
padding-left.......................................................... 688
padding-right ...................................................... 688
padding-top ......................................................... 688
Paged Media.............................................................. 303
Parallels....................................................................... 402
Phase 5......................................................................... 582
PHP ............................................................................... 585
debuggen............................................................... 600
Pica ............................................................................... 770
Pixel.....................................................................193, 770
PNG............................................................................... 310
position..............................................................109, 111
absolute ................................................................. 116
fixed...................................................... 117, 120, 178
relative ................................................................... 114
static........................................................................ 112
Positionierung .............................111, 704, 707, 716
absolute ................................................................. 110
fixe ........................................................................... 110
relative ................................................................... 110
statische................................................................. 110
Premailer.................................................................... 574
print ................................................................................94
Progressive Enhancement .........................243, 300
projection .....................................................................94
Proprietär................................................................... 348
Prototyping ............................................................... 445
Prozentuale Angabe............................................... 769
Prozentwert .............................................................. 771
Pseudo-Element ............................................... 73, 619
Pseudo-Format ........................................................ 619
Pseudo-Klasse .............................................................73
Pull Quote � Textauszug.................................... 239
Punkt ..................................................................193, 770
px .................................................................................. 770
Q
Qualitätssicherung................................................. 484
Quellcode ................................................................... 582
Quellenverweis ........................................................ 243
Querformat ............................................................... 746
Quote ........................................................................... 233
Index
789
R
Rahmen � border ..................................................... 98
Rahmeneigenschaften � border ..................... 695
Rand
äußerer ...................................................................... 98
Rangfolge ...............................................................80, 85
Rapid Prototyping .................................................. 441
Rechter Abstand � right ........................................98
Registerhaltigkeit ................................................... 220
Reiter
skalierbarer .......................................................... 263
Relative Angabe....................................................... 192
Relative Einheiten .................................................. 770
Relative Positionierung ....................................... 110
removeClass ............................................................. 506
Rendering-Engines................................................. 383
Rendering-Modi ...................................................... 397
Replaced Element ................................................... 109
Reset-Stylesheet .............................................416, 418
Responsive Design ................................................. 164
Responsive Grid System ...................................... 462
Responsive Layouts ............................................... 164
Ressource
externe ................................................................... 769
RGBA ......................................................... 306, 310, 772
richness ...................................................................... 758
right....................................................................... 98, 111
Rollover-Effekt ......................................................... 491
rotate ........................................................................... 349
Runde Ecken ............................................................. 328
Kreise ...................................................................... 328
S
Safari ............................................................................ 383
sans-serif � Serifenlose Schrift ........................ 645
SASS.............................................................................. 423
scale.............................................................................. 349
Schlüsselwörter .................................... 192, 769, 773
Schnittmarkierungen ........................................... 747
Schrift
Größe in Pixel ...................................................... 191
kursive .................................................................... 645
serifenlose ............................................................. 645
Schriftart .................................................................... 645
Schriftfamilie
generische ............................................................. 645
Schriftgröße ........................ 189, 191, 195, 303, 355
gemischte .............................................................. 194
relative ................................................................... 192
Schriftschnitt............................................................ 646
Schriftstil .................................................................... 646
scope ............................................................................ 269
Screen .......................................................................... 548
screen .............................................................................94
Screenreader ................................... 94, 393, 491, 500
Seitenlayout.............................................................. 745
Seitenstruktur .................................................442, 490
Seitenzoom ............................................................... 136
Sektion ........................................................................ 436
Selectivizr................................................................... 519
Selektor .....................................................23, 49, 71, 82
Allgemeiner Folgeelement-Selektor...............68
Attribut-Selektor ...................................................70
Element-Selektor ...................................................50
Folgeelement-Selektor ........................................68
Kind-Selektor ..........................................................65
kombinierter ................................................. 59, 252
Universal-Selektor ................................................62
Wiederholungs-Selektor .....................................76
Selektoren-Wizard .................................................. 582
Selenium .................................................................... 402
SelfHTML.......................................................................25
Semantic..................................................................... 458
Semantik ...........................................................445, 489
serif � Serifenschrift ............................................ 645
Serifenlose Schrift .................................................. 645
Serifenschrift ............................................................ 645
Simovic, Vladimir ................................................... 409
Sinnesbehinderung ............................................... 491
Skalierbar ................................................................... 258
Skalierungsfunktion .............................................. 537
Skeleton ...................................................................... 457
Skin ............................................................................... 355
Sliding Door � Reiter, skalierbarer ................. 263
Small-Screen-Modus ............................................. 547
Spalte
gleiche Länge ....................................................... 159
Spaltenreihenfolge................................................. 153
Spamming ................................................................. 491
span .................................................................................50
Spezifität
Spezifität von Pseudo-Klassen und
-Elementen ..........................................................86
Sprachausgabe ......................................................... 752
Sprunglink ................................................................. 439
barrierefreier ........................................................ 495
Index
790
Standards ................................................................... 586
Standardvorlage ...................................................... 409
Stapelung ................................................................... 115
Star Wars ....................................................................... 86
Statische Positionierung ..................................... 110
Sternchen-Hack ....................................................... 395
sternselektor............................................................. 417
Stilrichtung ............................................................... 355
style .............................................................................. 505
Stylesheet
alternatives ............................................ 91, 92, 356
Benennungen ...................................................... 769
dauerhaftes .............................................................92
einbinden .................................................................89
für mobile Browser ............................................ 531
importiertes ............................................................93
iPhone..................................................................... 537
kommentieren..................................................... 436
medienspezifisches............................................... 93
Standard- .................................................................92
Stilanweisung im Dokumentenkopf ............. 90
verlinktes ..................................................................90
Werte ....................................................................... 769
Stylesheet-Modul ................................................... 434
Stylesheet-Wechsler .............................................. 355
Styleswitcher ............................................................ 358
tageszeitenabhängiger .................................... 511
Suchmaschinenoptimierung............................. 487
Symbian ..................................................................... 536
Syntax-Highlighting.....................................582, 594
T
Tabelle ......................................................................... 514
Datentabelle ........................................................ 267
Tabellenspalte .......................................................... 736
Tabellenzeile............................................................. 736
table.............................................................................. 109
Template-Generator .............................................. 409
Textauszug ................................................................ 239
Textfarbe .................................................................... 671
Textlänge ................................................................... 509
text-shadow .............................................................. 337
Thinderbox ............................................................... 409
Thumbnail ................................................................. 318
Thunderbird ....................................................562, 567
Tidy............................................................................... 582
top.......................................................................... 98, 111
TopStyle................................................... 433, 579, 591
Touchscreen.............................................................. 542
Tourtoise .................................................................... 593
transform ................................................................... 348
Transformationsmodus....................................... 350
Transparenz .............................................................. 305
Trennung ......................................................................41
tty .....................................................................................94
tv.......................................................................................94
TV-Gerät ........................................................................94
TYPO3 .......................................................................... 361
Typografie.................................................................. 196
Typografische Ordnung ....................................... 217
U
Umrandung � outline ................................762, 764
UMTS ........................................................................... 535
Unicode..............................................................234, 654
Universal-Selektor ..............................................62, 65
Unsemantic............................................................... 463
Unterer Abstand � bottom ..................................98
Unterstreichung...................................................... 303
URL ............................................................ 654, 769, 773
User-Agent................................................................. 361
User-Agent � Browserkennung....................... 537
User-Agent-Sniffing ............................................... 533
V
Validator � W3C-Validator ................................ 486
Vererbung .....................................................................79
Verläufe .............................................................248, 338
lineare ..................................................................... 341
radiale..................................................................... 344
Verlinktes Stylesheet................................................90
Verschachteltes Menü .......................................... 251
vertical-align ............................................................. 173
Vertikaler Rhythmus ............................................. 220
Vertikales Menü ...................................................... 246
Videobeamer ...............................................................94
Viewport ..................................96, 116, 540, 541, 545
Viewport-Meta-Tag ........................................... 542
VirtualBox ................................................................. 404
Virtualisierung......................................................... 402
VirtualPC .................................................................... 403
Virtuelle Pixel........................................................... 538
visited .......................................................................... 621
VMWare Server ........................................................ 403
Index
791
W
W3C..................................................................................37
W3C-Validator .......................................................... 486
Währungsbezeichnungen ................................... 631
WAI ......................................................................492, 501
Web Accessibility Initiative � WAI................. 492
Web Content Accessibility Guidelines ........... 492
Web Developer Toolbar........................................ 600
Web.de................................................................562, 570
WebKit......................................................................... 383
Mobile WebKit..................................................... 385
Webkrauts.................................................................. 485
Website
standardkonforme ............................................ 483
Webstandard ...................................................483, 485
Werbebanner ausblenden................................... 609
Wert.................................................................................24
Wertigkeit ..................................................................... 82
width.................................................. 98, 111, 567, 697
max-width ............................................................ 697
min-width ............................................................. 697
Wiederholungs-Selektor .........................................76
Windows Eyes .......................................................... 394
Windows Live Mail ................................................. 569
Windows Mobile 8.................................................. 549
WML ............................................................................. 530
X
XHTML .......................................................... 25, 33, 585
valides .................................................................... 484
Y
Yahoo! ......................................................................... 419
Yahoo! Mail ......................................................562, 569
YAML......................................................... 434, 455, 469
YUI-Bibliothek.......................................................... 419
Z
Zähler ........................................................................... 639
Zeilenhöhe................................................................. 664
Zen Grids .................................................................... 460
Zentimeter................................................................. 770
Zentrieren .................................................................. 170
horizontal ............................................................. 171
vertikal ................................................................... 173
z-index ........................................................................ 114
Zitat .....................................................................233, 236
Zoll ................................................................................ 770
Zugänglichkeit ................................................484, 485
Zusammenfallende Außenabstände .............. 101
Zweispaltiges Layout ............................................. 137
![Kapitel WT:III (Fortsetzung)...Cascading Stylesheets CSS [W3C status, reports, css home] Historie 1996 CSS Level 1. Recommendation. 2011 CSS Level 2 R1. Recommendation. 2016 CSS Level](https://static.fdokument.com/doc/165x107/5fc4c0e6cd2700396b14acce/kapitel-wtiii-fortsetzung-cascading-stylesheets-css-w3c-status-reports.jpg)
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis · Links formatieren & Pseudoklassen/Elemente CSS 3 Download Schlusswort Vorwort CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML](https://static.fdokument.com/doc/165x107/5f16244122e1e162b77f14cc/guide-css-css-3-inhaltsverzeichnis-links-formatieren-pseudoklassenelemente.jpg)
