Inhaltsverzeichnis

  • Vorwort
    23
  • Teil I
    Die Einleitung
    27
  • 1
    Das Web ist nicht aus Papier
    29
    • 1.1
      Papierdenken, Webseiten und enttäuschte Erwartungen
      29
    • 1.2
      Der Autor einer Webseite hat keine Kontrolle
      30
      • 1.2.1
        »Responsiv«: Der Benutzer bringt den Bildschirm mit
        30
      • 1.2.2
        »Barrierefrei«: Der Benutzer kann die Wünsche der Webdesigner ignorieren
        31
      • 1.2.3
        Fazit: Im Web bestimmt der Benutzer, nicht der Autor
        31
    • 1.3
      Webseiten sehen bei jedem Benutzer anders aus
      32
      • 1.3.1
        Webseiten bestehen aus Quelltext
        32
      • 1.3.2
        Der Browser macht aus dem Quelltext eine sichtbare Webseite
        33
      • 1.3.3
        Die flexible Zeitung: Papierseiten sind starr, Webseiten flexibel
        34
      • 1.3.4
        Webseiten haben Schichten: HTML, CSS und JavaScript
        34
    • 1.4
      Übersicht: Eine kurze Geschichte des Weblayouts
      35
      • 1.4.1
        Fast kein Layout: Mosaic und Netscape Navigator
        35
      • 1.4.2
        Mitte der 1990er: Layouts mit HTML-Tabellen und <font>
        36
      • 1.4.3
        Das neue Jahrtausend: CSS-Layouts und responsives Webdesign
        37
      • 1.4.4
        Fazit: Die Browser bestimmen, was geht
        38
  • 2
    HTML und CSS im Schnelldurchlauf
    39
    • 2.1
      Webseiten bestehen aus rechteckigen Kästchen
      39
    • 2.2
      HTML ist der Maurer, der rechteckige Kästchen erstellt
      40
      • 2.2.1
        Die erste Webseite erstellen
        40
      • 2.2.2
        Die Kästchen der HTML-Elemente sichtbar machen
        41
    • 2.3
      CSS ist der Stylist, der die rechteckigen Kästchen gestaltet
      43
      • 2.3.1
        Das Styling für die Webseite – die erste CSS-Regel
        43
      • 2.3.2
        Ein Style für die »h1«-Überschrift
        44
    • 2.4
      Entwickler-Tools – HTML und CSS analysieren
      46
    • 2.5
      Auf einen Blick
      47
  • Teil II
    HTML-Crashkurs – Kästchen erstellen
    49
  • 3
    Das HTML-Grundgerüst
    51
    • 3.1
      HTML – Hyperlinks erstellen und »Etiketten kleben«
      51
      • 3.1.1
        HT wie Hypertext – Text mit Hyperlinks
        52
      • 3.1.2
        M wie Markup – Etiketten kleben
        52
      • 3.1.3
        L wie Language – Vokabeln und Grammatikregeln
        52
      • 3.1.4
        Missverständnisse zu HTML
        53
    • 3.2
      Das HTML-Grundgerüst ist das Skelett einer Webseite
      53
      • 3.2.1
        Eine gute Angewohnheit – <!– Kommentare –>
        53
      • 3.2.2
        Ein Grundgerüst für eine Webseite erstellen
        54
    • 3.3
      Die Dokumenttyp-Definition – <!DOCTYPE html>
      55
    • 3.4
      Das Stammelement <html>
      55
    • 3.5
      Informationen über die Webseite – <head>
      56
      • 3.5.1
        Die Angabe des Zeichensatzes – <meta charset="utf-8">
        56
      • 3.5.2
        Der Name der Seite – <title>
        57
      • 3.5.3
        Die Beschreibung für Suchmaschinen – <meta name="description">
        58
      • 3.5.4
        Weitere »meta«-Elemente
        58
    • 3.6
      Der Inhalt der Webseite – <body>
      59
    • 3.7
      HTML-Elemente im Quelltext – Anfangs-Tag, Inhalt und EndeTag
      59
    • 3.8
      Auf einen Blick
      60
  • 4
    HTML-Elemente für Überschriften, Text und Listen
    61
    • 4.1
      Das Grundgerüst für die Startseite erstellen
      62
    • 4.2
      Die Seite in Bereiche einteilen: »header«, »nav«, »main«, »footer« und »div«
      63
      • 4.2.1
        Vier Bereiche: »header«, »nav«, »main« und »footer«
        63
      • 4.2.2
        Der Schutzumschlag – <div id="wrapper">
        64
      • 4.2.3
        Die Layoutbereiche erstellen
        65
      • 4.2.4
        Visuell – schematische Darstellung der Bereiche
        65
    • 4.3
      Überschriften – »h1« bis »h6«
      66
      • 4.3.1
        Benutzen Sie Überschriften
        67
      • 4.3.2
        Überschriftenebene nicht aufgrund der Schriftgröße wählen
        67
    • 4.4
      Fließtext – Absätze und Hervorhebungen
      68
      • 4.4.1
        Absätze – »p« wie »paragraph«
        68
      • 4.4.2
        Text hervorheben – »strong« und »em«
        69
      • 4.4.3
        HTML-Elemente verschachteln – zuerst geöffnet, zuletzt geschlossen
        70
    • 4.5
      Über Block- und Inline-Elemente
      70
      • 4.5.1
        Blockelemente werden so breit, wie es geht
        70
      • 4.5.2
        Inline-Elemente werden nur so breit wie ihr Inhalt
        71
      • 4.5.3
        Die Konturen von HTML-Elementen sichtbar machen
        71
    • 4.6
      Listenkisten – Aufzählungen und Nummerierungen
      72
      • 4.6.1
        Aufzählungen – ungeordnete Listen mit »ul« und »li«
        72
      • 4.6.2
        Nummerierungen – geordnete Listen mit »ol« und »li«
        73
    • 4.7
      Verschachtelte Listen
      74
      • 4.7.1
        Eine verschachtelte Liste erstellen
        74
      • 4.7.2
        Schematische Darstellung der verschachtelten Liste
        75
    • 4.8
      Jeder Browser hat ein eingebautes Stylesheet
      76
    • 4.9
      Auf einen Blick
      77
  • 5
    HTML-Elemente für Links, Bilder und mehr
    79
    • 5.1
      Hyperlinks – das Besondere am World Wide Web
      79
      • 5.1.1
        Anatomie eines Hyperlinks
        80
      • 5.1.2
        Die Navigation – eine ungeordnete Liste mit Hyperlinks
        81
      • 5.1.3
        Links auf andere Dateien – PDF, MP3 etc.
        82
    • 5.2
      Die Wegbeschreibung zur Grafik – »img«
      83
      • 5.2.1
        Die Attribute zu »img«
        83
      • 5.2.2
        »img« – eine Grafik auf der Beispielseite einfügen
        84
      • 5.2.3
        Ein Logo als Überschrift?
        85
    • 5.3
      Weitere HTML-Elemente zur Auszeichnung von Text
      86
      • 5.3.1
        Beginne eine neue Zeile mit »br«
        86
      • 5.3.2
        »address« für Kontaktadressen
        86
      • 5.3.3
        »span« ist ein semantisch neutrales Inline-Element
        88
      • 5.3.4
        »blockquote« und »cite« für Zitate
        88
    • 5.4
      Know-how – Zeichensätze und Sonderzeichen
      89
      • 5.4.1
        UTF-8: Wissenswertes über Zeichensätze
        90
      • 5.4.2
        Character Entities – die Kodierung von Sonderzeichen
        91
    • 5.5
      Auf einen Blick
      93
  • 6
    Von der Beispielseite zur Beispielsite
    95
    • 6.1
      Stimmt die Statik? Der HTML-Validator
      95
    • 6.2
      CSS zum Ausprobieren – die W3C Core Styles
      98
    • 6.3
      Die Kontaktseite – von der Seite zur Site
      100
    • 6.4
      Auf einen Blick
      101
  • Teil III
    CSS Grundlagen – Kästchen gestalten
    103
  • 7
    CSS kennenlernen – Schriften, Farben und Hyperlinks
    105
    • 7.1
      Ein Stylesheet ist eine Sammlung von Formatvorlagen
      105
    • 7.2
      Überblick: CSS und das Gestalten der HTML-Kästchen
      106
    • 7.3
      Das erste eigene Stylesheet
      107
      • 7.3.1
        Ein Stylesheet erstellen und einen CSS-Kommentar schreiben
        107
      • 7.3.2
        Die Verbindung zwischen HTML und CSS – »link«
        108
    • 7.4
      Farben für Hintergrund und Schrift definieren
      109
      • 7.4.1
        Hintergrund- und Schriftfarbe für »body«
        109
      • 7.4.2
        Hintergrund- und Schriftfarbe für »div#wrapper«
        110
      • 7.4.3
        Hintergrund- und Schriftfarben im Kopfbereich
        112
    • 7.5
      Schriftgestaltung mit »font-family« und »font-size«
      113
    • 7.6
      Textgestaltung: Die Kontaktadresse im Fußbereich
      115
    • 7.7
      Hyperlinks gestalten
      116
      • 7.7.1
        Hyperlinks – das HTML-Element »a«
        116
      • 7.7.2
        Besuchte und nicht besuchte Hyperlinks
        117
      • 7.7.3
        Wenn die Maus darüber schwebt – »a:hover« und Kollegen
        119
      • 7.7.4
        »outline« – die Umrisslinie um Elemente mit Fokus
        120
    • 7.8
      Styles können an drei verschiedenen Stellen definiert werden
      121
      • 7.8.1
        Möglichkeit 1: Extern – CSS-Regeln in einer eigenen CSS-Datei
        121
      • 7.8.2
        Möglichkeit 2: Zwischen <head> und </head> im Element »style«
        122
      • 7.8.3
        Möglichkeit 3: Direkt im HTML-Element mit dem Attribut »style«
        122
      • 7.8.4
        Vorfahrt – welche Styles gewinnen?
        123
    • 7.9
      Auf einen Blick
      123
  • 8
    Selektoren, Einheiten und Farben in CSS
    125
    • 8.1
      Style – der Aufbau einer CSS-Regel
      125
    • 8.2
      Ein Selektor wählt das zu gestaltende Kästchen aus
      126
      • 8.2.1
        »Der Name der Kiste« – einfache Elementselektoren
        127
      • 8.2.2
        Mehrere Kästchen auf einmal – Selektoren gruppieren mit Komma
        127
      • 8.2.3
        Alle Kästchen auf der Seite – der Universalselektor »*«
        128
    • 8.3
      Überblick: Die HTML-Elemente im DOM-Baum
      128
    • 8.4
      Selektoren kombinieren – Nachfahren auswählen
      130
      • 8.4.1
        Beispiel 1: Schriftgestaltung nur für den Slogan im Kopfbereich
        130
      • 8.4.2
        Beispiel 2: Aufzählungszeichen nur in ungeordneten Listen gestalten
        131
      • 8.4.3
        Beispiel 3: Unterschiedlich nummerierte Ebenen bei geordneten Listen
        132
    • 8.5
      Eigene Namen vergeben – »id« und »class«
      132
      • 8.5.1
        Es kann nur einen geben – »id«, der Selektor mit der Raute
        133
      • 8.5.2
        Gruppenbildung – »class«, der Selektor mit dem Punkt
        133
      • 8.5.3
        ID oder Klasse – wann nimmt man was?
        135
      • 8.5.4
        Sinnvolle Namen – »id« und »class« sollten die Bedeutung des Elements beschreiben
        136
    • 8.6
      Spezifität – das Punktesystem für Selektoren
      136
      • 8.6.1
        Einer wird gewinnen – so funktioniert Spezifität
        136
      • 8.6.2
        Ein paar Beispiele für die Punktewertung
        137
      • 8.6.3
        Die Spezifität ist in Wirklichkeit eine Matrix ...
        138
      • 8.6.4
        Sparsam benutzen – »!important«
        138
    • 8.7
      Werte und Maße in CSS – die Qual der Wahl
      139
      • 8.7.1
        Grundregeln: Die Leerstelle, die Null und der Anführungsstrich
        139
      • 8.7.2
        Für den Bildschirm – relative Einheiten
        139
      • 8.7.3
        Für den Drucker – absolute Einheiten
        140
    • 8.8
      Farben definieren – hexadezimal, RGB und Namen
      141
    • 8.9
      Auf einen Blick
      143
  • 9
    Das Box-Modell
    145
    • 9.1
      Zunächst in modernen Browsern testen
      145
    • 9.2
      Das Box-Modell in der Übersicht
      146
      • 9.2.1
        Alle Boxen sind gleich – das Modell
        146
      • 9.2.2
        Der Inhaltsbereich – »width« (Breite) und »height« (Höhe)
        147
      • 9.2.3
        Der Innenabstand – »padding«
        148
      • 9.2.4
        Der Rahmen drumherum – »border« (Rahmenlinien)
        149
      • 9.2.5
        Der Außenabstand – »margin«
        149
      • 9.2.6
        Wenig intuitiv – die Gesamtbreite einer Box berechnen
        150
      • 9.2.7
        Ein interaktives Box-Modell zum Ausprobieren
        151
    • 9.3
      Kalibrierung – Abstände per Reset vereinheitlichen
      152
      • 9.3.1
        Reset – Abstände annulieren und HTML5-Elemente blocken
        152
      • 9.3.2
        Restaurierung – Abstände für die wichtigsten Elemente neu definieren
        154
    • 9.4
      Webseite zentrieren mit »width« und »margin«
      155
      • 9.4.1
        Die Breite eines Elements – »width«
        155
      • 9.4.2
        Die Seite horizontal zentrieren mit »margin: auto«
        156
    • 9.5
      Rahmenlinien erstellen – »border«
      158
    • 9.6
      Ein bisschen Abstand drumherum – »padding«
      159
      • 9.6.1
        Der erste Versuch: Ein »padding« für den Wrapper
        159
      • 9.6.2
        Besser: Ein Padding für jeden Layoutbereich
        160
    • 9.7
      Das Box-Modell und die farbliche Gestaltung
      162
      • 9.7.1
        Das Logo mitgestalten – »padding« und »border« in Aktion
        162
      • 9.7.2
        Das Box-Modell für das Logo im Entwickler-Tool des Firefox
        163
    • 9.8
      Hintergrundgrafiken per CSS
      164
      • 9.8.1
        Hintergrundgrafik einbinden – »background-image«
        164
      • 9.8.2
        Hintergrundgrafiken wiederholen – »background-repeat«
        167
      • 9.8.3
        Hintergrundgrafik positionieren – »background-position«
        167
      • 9.8.4
        Hintergrundgrafik fixieren – »background-attachment«
        168
      • 9.8.5
        Die Kurzschreibweise – »background«
        169
      • 9.8.6
        Das Box-Modell ist ein bisschen 3D
        170
    • 9.9
      Vertikale Abstände kollabieren – »collapsing margins«
      170
      • 9.9.1
        Kollabierende Außenabstände bei aufeinanderfolgenden Elementen
        171
      • 9.9.2
        Das Beispiel – ein Kopfbereich mit Überschrift und Absatz
        171
      • 9.9.3
        Collapsing margins, Teil 1: Die Überschrift im Kopfbereich
        172
      • 9.9.4
        Collapsing margins, Teil 2: Der Absatz im Kopfbereich
        174
    • 9.10
      Auf einen Blick
      175
  • 10
    Ordnung halten und aufräumen
    177
    • 10.1
      Der Kommentar am Anfang
      177
    • 10.2
      Das Stylesheet in Abschnitte unterteilen
      178
      • 10.2.1
        Teil 1: Allgemeine Styles
        179
      • 10.2.2
        Teil 2: Styles für die Layoutbereiche
        180
      • 10.2.3
        Teil 3: Sonstige Styles
        180
    • 10.3
      Verschiedene Schreibweisen für Styles
      180
      • 10.3.1
        Eine typische CSS-Regel: Eine Deklaration pro Zeile
        180
      • 10.3.2
        Kurze Styles: Alles in einer Zeile
        181
      • 10.3.3
        Kombinierte und gruppierte Selektoren
        181
    • 10.4
      Die Reihenfolge der Deklarationen im Style
      182
      • 10.4.1
        Möglichkeit 1: Die Reihenfolge orientiert sich am Aufbau der Boxen
        182
      • 10.4.2
        Möglichkeit 2: Alphabetisch sortierte Deklarationen
        183
    • 10.5
      Effektiv – Kurzschreibweisen für »padding« und »margin«
      183
      • 10.5.1
        Alle vier Seiten haben den gleichen Wert
        183
      • 10.5.2
        Die Reihenfolge entscheidet – nur eine Seite hat einen anderen Wert
        184
      • 10.5.3
        Unterschiedliche Werte für alle vier Seiten
        185
      • 10.5.4
        Paarweise – »oben = unten« und »links = rechts«
        185
    • 10.6
      Mehrere Stylesheets erstellen und zentral einbinden
      186
      • 10.6.1
        Teile und herrsche – Aufteilung der Styles
        186
      • 10.6.2
        Eines, sie zu binden – das zentrale Stylesheet »zentrale.css«
        187
      • 10.6.3
        Einen Link zum zentralen Stylesheet erstellen
        188
      • 10.6.4
        »@media« – Definition der Ausgabemedien
        188
    • 10.7
      Styles aufräumen: Die einzelnen Stylesheets
      189
      • 10.7.1
        Das zentrale Stylesheet »zentrale.css« im Überblick
        189
      • 10.7.2
        Reset und Restaurierung der Abstände – »reset.css«
        190
      • 10.7.3
        Die Gestaltung für den Bildschirm – »bildschirm.css«
        192
    • 10.8
      Dateien in Unterordnern organisieren
      194
      • 10.8.1
        Ordner erstellen und Dateien verschieben
        195
      • 10.8.2
        Die Pfadangabe zum Stylesheet ändern
        197
      • 10.8.3
        Pfadangaben zu den Grafiken ändern
        197
    • 10.9
      Der CSS-Validator
      199
    • 10.10
      Auf einen Blick
      201
  • 11
    Eine einfache horizontale Navigation
    203
    • 11.1
      Einfache horizontale Navigation mit »display: inline«
      203
      • 11.1.1
        Die Listenelemente in der Navigation selektieren
        203
      • 11.1.2
        Das Stylesheet »navi-inline.css« erstellen
        205
      • 11.1.3
        »Debuggen« – Fehler finden mit den Entwickler-Tools im Browser
        207
      • 11.1.4
        Feineinstellungen – Abstände und Hyperlinks anpassen
        208
    • 11.2
      Punktsieg – Spezifität in der Praxis
      209
      • 11.2.1
        »margin-bottom« für »ul«
        209
      • 11.2.2
        Die Farbe der Hyperlinks
        210
      • 11.2.3
        Feineinstellungen für die Hyperlinks in der Navigation
        210
    • 11.3
      Von Elementen und Boxen
      210
      • 11.3.1
        Im Quelltext »Element«, am Bildschirm »Box«
        211
      • 11.3.2
        »display« ändert nur die Box, nicht das Element
        211
    • 11.4
      Tabbed Navigation – Navigation mit Registern
      212
      • 11.4.1
        Schritt 1: Vorbereitende Maßnahmen für den Navigationsbereich
        212
      • 11.4.2
        Schritt 2: Die Hyperlinks im Navigationsbereich zu Tabs machen
        213
      • 11.4.3
        Schritt 3: Einen Rollover-Effekt für die Tabs definieren
        214
      • 11.4.4
        Schritt 4: »Sie sind hier« – aktuelle Seite hervorheben
        215
      • 11.4.5
        Standardkonform, barrierefrei und flexibel
        218
      • 11.4.6
        Optional: Abgerundete Ecken mit »border-radius«
        219
    • 11.5
      Know-how – das Box-Modell für Inliner
      220
      • 11.5.1
        Es gibt verschiedene Arten von Inline-Elementen
        220
      • 11.5.2
        Inline-Boxen sind etwas anders als Block-Boxen
        221
      • 11.5.3
        Inline-Blockboxen sind ein Mittelding
        222
    • 11.6
      Exkurs: Whitespace – der Leerstellenpakt
      223
      • 11.6.1
        Ein Zwischenraum, hindurchzuschaun ...
        223
      • 11.6.2
        Whitespace – Leerstellen, Tabulatoren und Zeilenumbrüche
        224
      • 11.6.3
        So entsteht der mysteriöse Zwischenraum
        224
      • 11.6.4
        Sechs Möglichkeiten zur Entfernung der Lücke
        225
    • 11.7
      Auf einen Blick
      227
  • 12
    Ein Kontaktformular erstellen und gestalten
    229
    • 12.1
      Schritt 1: Das HTML für das Kontaktformular
      229
      • 12.1.1
        Das Element »form« definiert ein Formular
        231
      • 12.1.2
        Beschriftung der Formularfelder mit »label«
        232
      • 12.1.3
        Ein ganz normales einzeiliges Eingabefeld
        232
      • 12.1.4
        Ein spezielles Eingabefeld für E-Mail-Adressen
        233
      • 12.1.5
        Ein mehrzeiliges Eingabefeld mit »textarea«
        234
      • 12.1.6
        Submit: Eine Schaltfläche zum Abschicken der Formulardaten
        234
    • 12.2
      Schritt 2: Das Formular per CSS gestalten
      235
      • 12.2.1
        Ein neues Stylesheet für Formulare
        235
      • 12.2.2
        Die Gestaltung des Kontaktformulars
        236
      • 12.2.3
        Kindselektoren und Attributselektoren
        239
    • 12.3
      Schritt 3: Das Formular aktivieren und testen
      240
      • 12.3.1
        Das Reiseziel für die Formulardaten festlegen
        240
      • 12.3.2
        Das fertige Formular testen
        242
    • 12.4
      Exkurs: Ein mehrspaltiges Kontaktformular
      242
    • 12.5
      Auf einen Blick
      244
  • 13
    Webfonts, Fließtext und Druckversion
    247
    • 13.1
      Webfonts – die Schriftart gleich mitliefern
      247
      • 13.1.1
        Klassische Schriftarten im Web
        247
      • 13.1.2
        Webfonts im Überblick
        248
      • 13.1.3
        Die Google Fonts – einfach und kostenlos
        249
      • 13.1.4
        Google Fonts – so geht’s
        250
      • 13.1.5
        Den Fließtext auf den Beispielseiten gestalten
        251
    • 13.2
      Fließtext gestalten
      253
      • 13.2.1
        Schriftgröße und Zeilenabstand
        253
      • 13.2.2
        Zitate gestalten
        255
      • 13.2.3
        »del« und »ins« für Änderungen am Text
        257
    • 13.3
      Eine Druckversion für die Beispielseiten
      258
      • 13.3.1
        Stylesheet nur für die Anzeige am Bildschirm
        259
      • 13.3.2
        Ein Stylesheet nur für den Ausdruck
        259
      • 13.3.3
        Grundlegende Gestaltung für die Druckversion
        260
      • 13.3.4
        URL der Hyperlinks sichtbar machen
        262
    • 13.4
      Favicon – das Minilogo für Ihre Seiten
      264
    • 13.5
      Auf einen Blick
      265
  • 14
    HTML-Tabellen erstellen und gestalten
    267
    • 14.1
      Das HTML für Tabellen
      267
      • 14.1.1
        Eine einfache Tabelle besteht aus »table«, »tr« und »td«
        267
      • 14.1.2
        Überschriften in Tabellen stehen in »th«
        269
      • 14.1.3
        Logische Bereiche in Tabellen – »thead«, »tbody« und »tfoot«
        270
      • 14.1.4
        Zellen verbinden – »colspan« und »rowspan«
        271
    • 14.2
      Tabellen gestalten per CSS – ein Beispiel
      272
      • 14.2.1
        Das HTML für die Beispieltabelle
        272
      • 14.2.2
        Die Gestaltung der Beispieltabelle per CSS
        274
      • 14.2.3
        Eine Tabelle ohne Zwischenräume – »border-collapse: collapse«
        275
    • 14.3
      Übersichtliche Tabellen – Hover und Zebrastreifen
      276
      • 14.3.1
        Eine Tabelle mit Zebrastreifen
        276
      • 14.3.2
        Tabellenzeilen mit Hover-Effekt – »tr:hover«
        278
    • 14.4
      Auf einen Blick
      279
  • 15
    Der Browser und das CSS: Kaskade, Vererbung oder Standardwert
    281
    • 15.1
      Überblick: DOM-Baum und Kaskade
      281
      • 15.1.1
        Der DOM-Baum für die Startseite
        282
      • 15.1.2
        Drei Konzepte – Kaskade, Vererbung und Standardwert
        282
      • 15.1.3
        Das Beispiel: »margin-bottom« für »ul.navmain«
        284
    • 15.2
      Kaskade – Stufe 1: Sammle alle relevanten Deklarationen
      284
      • 15.2.1
        Das Browser-Stylesheet
        285
      • 15.2.2
        Die Stylesheets des Autors – »reset.css«
        286
      • 15.2.3
        Die Stylesheets des Autors: »navi-tabs.css«
        287
    • 15.3
      Kaskade – Stufe 2: Sortiere nach Wichtigkeit
      287
      • 15.3.1
        Normal – Deklarationen ohne »!important«
        288
      • 15.3.2
        Wichtig – Deklarationen mit »!important«
        288
      • 15.3.3
        Die Sortierung nach Wichtigkeit im Überblick
        288
    • 15.4
      Kaskade – Stufe 3: Sortiere nach Spezifität
      290
    • 15.5
      Kaskade – Stufe 4: Sortiere nach Reihenfolge
      291
    • 15.6
      Die Vererbung (inheritance)
      292
      • 15.6.1
        Vererbung macht ein Stylesheet übersichtlicher
        293
      • 15.6.2
        Bestimmte Eigenschaften werden nicht vererbt
        293
      • 15.6.3
        Potenzielle Probleme bei der Vererbung relativer Werte
        294
    • 15.7
      Der Standardwert (initial value)
      295
    • 15.8
      Auf einen Blick
      295
  • Teil IV
    CSS-Positionierung – Kästchen verschieben
    297
  • 16
    Kästchen verschieben mit »position«
    299
    • 16.1
      »Flow« – die Seite ist ein langer, ruhiger Fluss
      300
      • 16.1.1
        Drei Block-Boxen im Fluss
        300
      • 16.1.2
        Drei verkürzte Boxen im Fluss
        302
    • 16.2
      Versetzt weiterfließen – »position: relative«
      303
    • 16.3
      Raus aus dem Fluss – »position: absolute«
      304
    • 16.4
      Absolute Positionierung auf der Beispielsite
      306
      • 16.4.1
        Absolute Positionierung relativ zum Rand des Browserfensters
        306
      • 16.4.2
        Absolute Positionierung mit einem umgebenden, relativ positionierten Element
        308
      • 16.4.3
        Kleine Übung zwischendurch: »Grundlagen.« eine Zeile tiefer setzen
        310
    • 16.5
      Wie ein Fels in der Brandung – »position: fixed«
      311
    • 16.6
      Positionierte Boxen und der »z-index«
      313
    • 16.7
      Auf einen Blick
      316
  • 17
    Kästchen verschieben mit »float« und »clear«
    317
    • 17.1
      Text um Bilder fließen lassen
      317
      • 17.1.1
        Die Grafik einbinden
        318
      • 17.1.2
        Die Grafik floaten mit »float:left«
        319
      • 17.1.3
        Einen Abstand zwischen Grafik und Text definieren
        320
    • 17.2
      Praktisch – CSS-Klassen zum Floaten
      321
    • 17.3
      Floats beenden mit »clear«
      323
    • 17.4
      Floats mit mehreren Boxen
      326
      • 17.4.1
        Das Beispiel: Drei Boxen ohne »float«
        326
      • 17.4.2
        Drei Kästchen nach links floaten
        327
      • 17.4.3
        Drei Kästchen nach rechts floaten
        328
      • 17.4.4
        »float drop« – zu wenig Platz im Browserfenster
        329
      • 17.4.5
        »float« und verschieden hohe Boxen
        330
    • 17.5
      Zusammenfassung: Besonderheiten beim Floaten
      331
    • 17.6
      Auf einen Blick
      332
  • 18
    Containing Floats – gefloatete Elemente umschließen
    333
    • 18.1
      Die Beispielseite zum Umschließen von Floats
      333
    • 18.2
      Das Problem: Gefloatete Elemente ragen nach unten heraus
      336
    • 18.3
      Mehrere Methoden zum Umschließen von Floats
      338
    • 18.4
      Methode 1: Zusätzliches HTML-Element und »clear«
      339
    • 18.5
      Methode 2: Set a float to fix a float
      340
    • 18.6
      Methode 3: Ohne »float« und »clear« – »overflow: hidden«
      342
    • 18.7
      Methode 4: Auch ohne »float« und »clear« – »display:table«
      344
    • 18.8
      Methode 5: Der Micro Clearfix Hack
      345
    • 18.9
      Die Galerieseite in die Beispielsite einbauen
      346
      • 18.9.1
        Die Beispielseite »galerie.html«
        348
      • 18.9.2
        Das CSS in »bildschirm.css« im Überblick
        349
    • 18.10
      Auf einen Blick
      350
  • 19
    Eine floatbasierte horizontale Navigation
    353
    • 19.1
      Vorbereitungen für die floatbasierte Navigation
      354
    • 19.2
      Schritt 1: Den Navigationsbereich gestalten
      355
    • 19.3
      Schritt 2: Die Links in der Navigation gestalten
      357
    • 19.4
      Schritt 3: Linkzustände gestalten
      358
    • 19.5
      Know-how: Lineare Farbverläufe per CSS3
      360
      • 19.5.1
        Die Farben definieren: Farbwert (»color«) und Verlaufspunkt (»stop«)
        361
      • 19.5.2
        Die Richtung definieren: Den Verlauf der Farben bestimmen
        361
    • 19.6
      Auf einen Blick
      363
  • Teil V
    Mehrspaltige Layouts mit CSS
    365
  • 20
    Media Queries – eine mobile Version erstellen
    367
    • 20.1
      Bestandsaufname: Die Beispielseiten auf einem Smartphone
      367
    • 20.2
      Schritt 1: Die feste Layoutbreite entfernen
      369
    • 20.3
      Schritt 2: Die Anweisung »meta viewport« hinzufügen
      370
    • 20.4
      Schritt 3: Den Slogan neu positionieren
      372
    • 20.5
      Schritt 4: Eine Media Query für breite Browserfenster
      373
      • 20.5.1
        Ein neues Stylesheet für breitere Browserfenster
        375
      • 20.5.2
        Das Layout der Beispielseiten für breite Browserfenster
        376
    • 20.6
      Schritt 5: Das Kontaktformular anpassen
      379
    • 20.7
      Know-how: Bilder für hochauflösende Bildschirme
      381
      • 20.7.1
        Das Problem: Hochauflösende Bildschirme benötigen mehr Pixel
        381
      • 20.7.2
        Grafiken nach Pixeldichte servieren: <img> und das Attribut »srcset x«
        382
      • 20.7.3
        Die Beispieldateien für hochauflösende Bildschirme optimieren
        383
    • 20.8
      Auf einen Blick
      385
  • 21
    Zweispaltiges Layout mit »float« und »margin«
    387
    • 21.1
      Methoden zum Layouten per CSS im Überblick
      387
      • 21.1.1
        Die Gegenwart: »display«, »position« und »float«
        387
      • 21.1.2
        Web Developer – Layoutmethoden auf Webseiten untersuchen
        388
      • 21.1.3
        Die Zukunft: Layoutmodule von CSS3
        389
    • 21.2
      Layout mit fester Breite per »float« und »margin«
      390
      • 21.2.1
        Schritt 1: Ein neues Stylesheet erstellen und einbinden
        391
      • 21.2.2
        Schritt 2: Den Navigationsbereich nach links floaten
        392
      • 21.2.3
        Schritt 3: Den Textbereich mit einem Außenabstand versehen
        394
      • 21.2.4
        Schritt 4: Die Navigationsliste gestalten
        395
      • 21.2.5
        Schritt 5: Die Hyperlinks in der Navigation gestalten
        396
      • 21.2.6
        Schritt 6: Den aktuellen Navigationspunkt hervorheben
        397
      • 21.2.7
        Schritt 7: Überschrift ausrichten und Fußbereich clearen
        398
    • 21.3
      Flexibles Layout mit fester Navigationsspalte
      400
      • 21.3.1
        Flüssig, elastisch, flexibel, frustriert ...
        400
      • 21.3.2
        So funktionieren flexible Layouts
        400
      • 21.3.3
        Das Layout flexibilisieren
        401
    • 21.4
      Flexible Layouts und das Border-Box-Modell
      403
      • 21.4.1
        Das Problem mit dem klassischen Box-Modell von CSS
        403
      • 21.4.2
        Die Lösung: Das Border-Box-Modell mit »box-sizing: border-box«
        405
    • 21.5
      Know-how: Die globale Wirkung von »clear« und der BFC
      407
      • 21.5.1
        Die globale Wirkung von »clear« ist manchmal erwünscht
        407
      • 21.5.2
        Die globale Wirkung von »clear« auf der Seite »galerie.html«
        408
      • 21.5.3
        Lösungen für die Seite »galerie.html«
        410
      • 21.5.4
        Der Block Formatting Context (BFC)
        410
    • 21.6
      Auf einen Blick
      412
  • 22
    Mehrspaltige Layouts mit »Content First«
    413
    • 22.1
      Die HTML-Elemente »aside« und »section«
      413
      • 22.1.1
        Ideal für Sidebars: das HTML-Element »aside«
        414
      • 22.1.2
        Inhalte in Abschnitte unterteilen: das HTML-Element »section«
        414
    • 22.2
      Zweispaltige Layouts: beide Bereiche mit »float«
      415
      • 22.2.1
        Schritt 1: »aside« und »section« – Infobereich im HTML hinzufügen
        415
      • 22.2.2
        Schritt 2: Die Grundformatierung in »bildschirm.css«
        417
      • 22.2.3
        Schritt 3: Desktop-Version mit zweispaltigem Layout
        418
      • 22.2.4
        Optional: Spalten umdrehen? Inhaltsbereich nach rechts floaten …
        421
      • 22.2.5
        Das feste, zweispaltige Float-Layout flexibilisieren
        422
    • 22.3
      Dreispaltige Layouts: »float« und negativer Margin
      423
      • 22.3.1
        Der Ausgangspunkt: die Startseite im Überblick
        423
      • 22.3.2
        Schritt 1: Den Inhaltsbereich floaten und negativen Margin zuweisen
        424
      • 22.3.3
        Schritt 2: Info- und Newsbereich floaten
        426
    • 22.4
      »Bäumchen wechsel dich« für die Layoutbereiche
      428
      • 22.4.1
        Möglichkeit 1: Info- und Newsbereich tauschen die Seiten
        428
      • 22.4.2
        Möglichkeit 2: Inhaltsbereich und doppelte Sidebar
        429
    • 22.5
      Auf einen Blick
      431
  • 23
    Suchfunktion, Dropdown-Menü und mobile Navigation
    433
    • 23.1
      Eine Suchfunktion für Ihre Site
      433
      • 23.1.1
        Schritt 1: Das HTML für das Suchformular
        434
      • 23.1.2
        Schritt 2: Das Suchformular per CSS positionieren
        435
      • 23.1.3
        Schritt 3: Das Suchformular per CSS gestalten
        437
      • 23.1.4
        Optional: Ein serverseitiges Suchprogramm einbinden
        439
    • 23.2
      Dropdown – horizontale Navigation zum Ausklappen
      440
      • 23.2.1
        Die Ausgangsposition: Die Beispielseiten mit zwei Navigationsebenen
        440
      • 23.2.2
        Schritt 1: Listenelemente mit »clear« untereinanderstellen
        442
      • 23.2.3
        Schritt 2: Die zweite Navigationsebene verstecken
        444
      • 23.2.4
        Schritt 3: Die zweite Navigationsebene wieder sichtbar machen
        445
      • 23.2.5
        Schritt 4: Die Links in der zweiten Navigationsebene gestalten
        446
      • 23.2.6
        Auf Touchscreens gibt es kein »:hover« …
        447
      • 23.2.7
        Dropdowns auf Touchscreens mit »Double Tap To Go«
        447
    • 23.3
      Eine mobile Navigation nur mit CSS
      449
      • 23.3.1
        Schritt 1: Einen Menü-Link auf den Webseiten einfügen
        449
      • 23.3.2
        Schritt 2: Stylesheet erstellen Menü-Link gestalten
        451
      • 23.3.3
        Schritt 3: Navigationsbereich gestalten
        453
      • 23.3.4
        Schritt 4: Den Navigationsbereich per Flexbox verschieben
        455
      • 23.3.5
        Schritt 5: Das Suchformular wieder einblenden
        457
    • 23.4
      Auf einen Blick
      459
  • 24
    Layouten mit der Flexbox: »display:flex«
    461
    • 24.1
      Flexbox: Das »CSS Flexible Box Layout Module«
      461
      • 24.1.1
        Entstehung und Browserkompatibilität
        462
      • 24.1.2
        Flexbox: Neue Möglichkeiten ohne alte Probleme
        463
      • 24.1.3
        Die Flexbox ist für eindimensionale Layouts gedacht
        463
    • 24.2
      Der erste Schritt: Flexbox definieren mit »display:flex«
      464
      • 24.2.1
        Die Flexbox basiert auf dem »Eltern-Kind-Prinzip«
        464
      • 24.2.2
        Eine Flexbox definieren: »display:flex« für das Elternelement
        465
    • 24.3
      Die Ausdehnung der Flex-Items bestimmen mit »flex«
      467
      • 24.3.1
        Alle Flex-Items sollen gleich breit sein: »flex: 1«
        467
      • 24.3.2
        »Verhältnismäßig« einfach: Flex-Items mit unterschiedlicher Breite
        468
      • 24.3.3
        Die Reihenfolge der Flex-Items ändern mit »order«
        469
    • 24.4
      »flex« ist kurz für »flex-grow«, »flex-shrink« und »flex-basis«
      470
      • 24.4.1
        Die Standardwerte für »flex-grow«, »flex-shrink« und »flex-basis«
        470
      • 24.4.2
        Die Kurzschreibweise »flex« im Detail
        471
      • 24.4.3
        Komplex: So berechnet der Browser die Größe der Flex-Items
        472
    • 24.5
      Das Box-Modell der Flexbox: Haupt- und Nebenachsen
      473
      • 24.5.1
        Das Flex-Box-Modell hat eine Haupt- und eine Nebenachse
        473
      • 24.5.2
        »flex-direction« ändert die Flussrichtung: »row« wird zu »column«
        474
      • 24.5.3
        »flex-wrap« ermöglicht eine mehrzeilige Flexbox
        475
      • 24.5.4
        »flex-flow« ist die Kurzschreibweise für »flex-direction« und »flex-wrap«
        477
    • 24.6
      Beispiel: Flexibles Kontaktformular ohne Media Query
      477
      • 24.6.1
        Schritt 1: Flexbox-Container definieren
        478
      • 24.6.2
        Schritt 2: Die Beschriftung – »label« bekommt eine feste Breite
        479
      • 24.6.3
        Schritt 3: Die Eingabefelder werden flexibel
        480
      • 24.6.4
        Schritt für Schritt: So funktioniert das flexible Formular
        482
      • 24.6.5
        »Klasse. Ab heute dann mit Flexbox?« – »Kommt drauf an …«
        483
    • 24.7
      Flexbox: Eigenschaften und Werte in der Übersicht
      484
      • 24.7.1
        Eigenschaften und Werte für die Flexibilität
        484
      • 24.7.2
        Eigenschaften und Werte für Ausrichtung und Verteilung
        485
    • 24.8
      Auf einen Blick
      487
  • Teil VI
    Patches, Werkzeuge und nützliche Websites
    489
  • 25
    Patchwork – Flicken im CSS
    491
    • 25.1
      IE und CSS – zwei Welten begegnen sich
      491
      • 25.1.1
        Eine superkurze Geschichte des Internet Explorers
        492
      • 25.1.2
        »Conditional Comments« – Styles nur für den IE
        492
    • 25.2
      Der Internet-Explorer-Countdown: 11, 10, 9 …
      493
      • 25.2.1
        Die Beispielseiten im Internet Explorer 11
        493
      • 25.2.2
        Die Beispielseiten im Internet Explorer 10
        494
      • 25.2.3
        Die Beispielseiten im Internet Explorer 9
        495
    • 25.3
      Die Beispielseiten im Internet Explorer 8
      496
      • 25.3.1
        »HTML5Shiv«: Nachhilfe per JavaScript für IE8 und älter
        497
      • 25.3.2
        Der IE8 kennt keine Media Queries
        499
    • 25.4
      Die Browserpräfixe: »-webkit-« und Co
      501
    • 25.5
      Ein Fundament für Ihr CSS: »normalize.css«
      502
    • 25.6
      Auf einen Blick
      503
  • 26
    Werkzeuge und nützliche Websites
    505
    • 26.1
      Die Browser bestimmen, was geht
      505
      • 26.1.1
        Die aktuellen Browser im Überblick
        505
      • 26.1.2
        Unentbehrlicher Helfer im Alltag: »caniuse.com«
        507
    • 26.2
      Browserzubehör – praktische Add-ons
      507
      • 26.2.1
        View Source Chart – Quelltext als »lauter little boxes«
        507
      • 26.2.2
        Web Developer – das Schweizer Offiziersmesser (Firefox/Chrome)
        508
      • 26.2.3
        ColorZilla – die Farbenwahl (Firefox und Chrome)
        509
    • 26.3
      Editoren für HTML und CSS
      509
    • 26.4
      Editoren zum Bearbeiten von Grafiken
      511
    • 26.5
      FTP – Veröffentlichen von Webseiten
      511
    • 26.6
      Referenzen und Websites zu HTML und CSS
      512
      • 26.6.1
        Nachschlagewerke zu HTML
        512
      • 26.6.2
        Nachschlagewerke zu CSS
        513
      • 26.6.3
        Immer einen Besuch wert: »css-tricks.com«
        514
  • Index
    517