Kai Laborenz CSS. Das umfassende Handbuch

Transkript

1 Kai Laborenz CSS Das umfassende Handbuch

2 Auf einen Blick Auf einen Blick 1 Was sind Cascading Stylesheets? HTML und CSS Das erste Stylesheet»Hallo Welt!«auf CSS Selektoren Einbinden von Stylesheets in HTML-Dateien Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle Positionierung mit CSS Layout mit CSS Styling mit CSS CSS und die Browser Effizientes Arbeiten mit CSS Arbeiten mit CSS-Frameworks Webstandards und Barrierefreiheit Ajax, JavaScript und CSS Das mobile Web Stylesheets, Mobiltelefone und PDAs s mit CSS gestalten Werkzeuge für CSS-Entwickler A CSS-Referenz B Benennungen und Werte für Stylesheets C HTML5-Elemente D DVD zum Buch

3 Inhalt Inhalt Vorwort Was sind Cascading Stylesheets? Warum sollten Sie Stylesheets nutzen? Das CSS-Prinzip Wie sieht ein Stylesheet aus? HTML und CSS Die Grundlage das semantische HTML-Dokument Schnelleinstieg HTML Code follows Content Sektionen einer Webseite HTML5 und CSS HTML5 im Vergleich zu HTML 4 und XHTML Neue Elemente in HTML HTML5 in der Praxis Das erste Stylesheet»Hallo Welt!«auf CSS 43 4 Selektoren Die verschiedenen Selektoren Einfache Element-Selektoren Class- und ID-Selektoren Kombinierte Selektoren Universal-Selektor Kind-Selektoren

4 Inhalt Folgeelement-Selektoren Attribut-Selektoren (CSS2 und CSS3) Pseudo-Klassen und Pseudo-Elemente Wiederholungs-Selektoren Vererbung Rangfolge und Kaskade Die Important-Anweisung Einbinden von Stylesheets in HTML-Dateien Stilanweisungen im HTML-Tag Stilanweisungen im Dokumentenkopf Verlinkte Stylesheets Individuelles Design durch alternative Stylesheets Importierte Stylesheets Medienspezifische Stylesheets Medienspezifische Stylesheets mit CSS Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle Das Kastenmodell Ein neues Boxmodell Zusammenfallende Außenabstände (Collapsing Margins) Elementtypen in CSS Blockelemente Eingebundene Elemente Definition des Elementtyps Weitere Elementtypen Layout- und Positionierungsmodelle in CSS

5 Inhalt 7 Positionierung mit CSS Die Positionierungsart (»position«) »position: static« »position: relative« »position: absolute« »position: fixed« »float«und»clear« »float«mit»clear«aufheben »clear«ohne zusätzliches Markup Neue Möglichkeiten für die Positionierung »display: table«und»display: inline-block« Flexibles Kastenlayout Layout mit CSS Fixiert, flexibel, oder elastisch? Vor und Nachteile Elastische Layouts und Browserzooms Auflösungsabhängige Layouts Der Zweispalter Zweispalter absolut prozentual Zweispalter mit»float« Zweispalter im Tabellenlayout Der Dreispalter Dreispalter flexibel mit»float« Dreispalter mit festen Spaltenbreiten rechts und links Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten Das gelöste Problem der (nicht) gleich langen Spalten Responsive Layouts CSS-Layouttricks Zentrieren Minimale und maximale Breiten für flexible Layouts

6 Inhalt 8.6 Feststehende Bereiche und CSS-Frames CSS-Frames Das flexible Kastenlayout Styling mit CSS Arbeiten mit Text Typografie mit CSS Einfache Auszeichnungen Schattige Texte mit CSS Einbindung von Schriftarten per CSS Konstruktion einer konsistenten Typografie Überschriften mit CSS Initialen und Einrückungen Styling von Zitaten CSS-Menüs mit Listen Vertikale Menüs CSS-Flyout-Menüs Horizontale Menüs Menüs mit durchgehendem Hintergrund Tabellen und CSS Schönere Formulare Ordnung ist alles die Struktur eines Formulars Pimp my Form Anpassen von Formular-Rahmenelementen Interaktionshilfen Fehlermeldungen Druckversion per CSS Arbeiten mit Transparenz Deckkraft von Ebenen steuern Ebenentransparenz mit voll deckendem Inhalt PNG Grafiken mit weichem Verlauf (Alpha-Kanal) Arbeiten mit Grafiken Grafiken per CSS beschneiden CSS-Sprites Mehrfache Hintergründe (CSS3) Grafiken präsentieren die CSS-Bildergalerie

7 Inhalt 9.8 CSS-Effekte »Runde Ecken« CSS-Schatten Verläufe mit CSS Elemente per CSS verschieben und drehen CSS-Übergänge und Animationen Animierte Übergänge Animationen mit Keyframes Stylesheet-Wechsler Simpler Styleswitcher Styleswitcher mit JavaScript und Ajax Browserweichen für Stylesheets Styling mit CSS3 der CSS3 Zen Ocean CSS und die Browser Die Browserlandschaft Browser-Marktanteile CSS-Unterstützung testen Browser mit WebKit-Engine (Chrome, Safari, Konqueror, in Zukunft Opera) Firefox (Gecko) Opera (Presto) Opera Mini und Opera Mobile Internet Explorer (Trident) Weitere Browser Lynx Screenreader Browserweichen und -filter Strategien für die Anwendung von Browserweichen:»To hack or not to hack« Doctype-Switching und Browseremulationen Conditional Comments Browser-Sniffer CSS-Bugs per JavaScript beheben Browsertesting Virtualisierung Browser online testen

8 Inhalt 11 Effizientes Arbeiten mit CSS Arbeiten mit HTML-Vorlagen Design Patterns Design Pattern und Quellcode von Yahoo! Objektorientiertes CSS Alles auf null Reset-Stylesheets Normalize Kurzschreibweisen CSS-Präprozessoren Effizient CSS-Anweisungen schreiben mit LESS Arbeiten mit SASS und Compass Stylesheets organisieren Ordnung durch Stylesheet-Module Filter-Management Kommentieren von Stylesheets Ein Standard für CSS-Kommentare CSSDoc Sprunglinks, Inhaltsverzeichnis und Farbdefinitionen CSS im Entwurfsverfahren (Rapid Prototyping) Festlegen der Seitenstruktur in semantischem HTML Bereiche ausrichten in Ihrem bevorzugten Browser Einfügen der Inhalte Dynamische Bereiche umsetzen Benutzertests Feintuning, Browsertests und technische Optimierungen Fehlersuche in CSS-Dateien Arbeiten mit CSS-Frameworks Framework-Übersicht und Auswahlhinweise Layoutframeworks Applikationsframeworks Das eigene Raster Aufbau eines Rasters mit YAML Aufbau eines Rasters mit Foundation Semantisches Raster mit Foundation

9 Inhalt 13 Webstandards und Barrierefreiheit Webstandards beachten Was ist für eine standardkonforme Webseite erforderlich? Der W3C-Validator Suchmaschinenoptimierung mit CSS Schlanke Dokumente durch CSS Semantik für Suchmaschinen Zugängliche und benutzbare Websites mit CSS Grundsätze für zugängliche Websites Barrierefreie Sprunglinks Link-Auszeichnungen nützlich und barrierefrei Testen Ajax, JavaScript und CSS Austausch eines Stylesheets per JavaScript Klassen zuweisen mit»classname« Stile mit»style«zuweisen Formularvalidierung mit CSS und JavaScript Tageszeitenabhängiger Styleswitcher Fadenkreuz für Tabellen JavaScript zur Umgehung von Browsereinschränkungen verwenden Browser- bzw. Fähigkeitserkennung JavaScript zur Erweiterung der Browserfähigkeiten nutzen Das mobile Web Stylesheets, Mobiltelefone und PDAs Strategien für das mobile Web: mobilisieren statt miniaturisieren Mobile Standards Stylesheets für mobile Browser ausliefern Stylesheets per Media Query ausliefern User-Agent-Sniffing

10 Inhalt 15.4 CSS-Design für den mobilen Einsatz Einzelne Geräte Betriebssysteme für Mobilgeräte und Organizer Safari auf dem iphone und ipad Chrome auf Android-Geräten Opera Mini und Opera Mobile Weitere mobile Browser Adobe Edge Inspect Frameworks für die mobile Entwicklung Mobile Boilerplate jquery Mobile Framework jqtouch s mit CSS gestalten Grundsätzliche Probleme Lokale -Clients Microsoft Outlook Mozilla Thunderbird Apple Mail Webmail-Dienste Google Mail Yahoo! Mail und Outlook.com GMX Web.de Strategien für -Newsletter Techniken für mit CSS gestaltete und alle anderen s CSS-Eigenschaften im Einzelnen Werkzeuge für CSS-Entwickler CSS-Editoren TopStyle Website-Editoren Adobe Dreamweaver CC Aptana Studio

11 Inhalt 17.3 Analysewerkzeuge Firebug Web Developer Toolbar(s) Accessibility-Toolbar Browsereigene Tools Optimierungswerkzeuge CSS-Minifier Eigene Tools herstellen: Benutzer-Stylesheets Anhang A CSS-Referenz A.1 Alphabetische Übersicht A.2 Pseudo-Elemente und Pseudo-Formate A.3 Inhaltserzeugung A.4 Schriftformatierungen A.5 Farben und Hintergründe A.6 Kastenformatierungen A.7 Listenformatierungen A.8 Anzeigemodus A.9 Tabellenformatierungen A.10 Benutzeroberfläche A.11 Seitenlayout 745 A.12 Sprachausgabe A.13 Proprietäre CSS-Eigenschaften B Benennungen und Werte für Stylesheets B.1 Namen für Stylesheets, Klassen und IDs B.2 Längen- und Größenangaben B.3 Prozentwerte B.4 Farben B.5 URLs (url) B.6 Schlüsselwörter B.7 CSS-Kommentare C HTML5-Elemente D DVD zum Buch Index

12 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 Layout von Webseiten per CSS. 8 Lange Zeit war das Layouten mit CSS schwierig und kompliziert. Mit heutigen Browsergenerationen 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 Herangehensweisen 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 Portalen, oft verwendet wird Beide Grundformen kommen in einer Reihe von Varianten zum Einsatz: mit Kopfund/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 layoutbildende Inhalte verwendet werden. Allerdings gibt es hier auch die Möglichkeit, durch Verwendung von CSS-Hintergrundbildern flexible und grafisch reiche Designs zu 133

13 8 Layout mit CSS erstellen. Müssen Layouts pixelgenau umgesetzt werden, geht es aber oft nicht ohne feste Positionierung. Dabei wird zumindest die Gesamtbreite der Seite auf einen festen Wert in Pixeln festgelegt, der in der Regel auf eine bestimmte Bildschirmauflösung zielt. Für 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 richtet 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 Browserfenster 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 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 prinzipiell immer unterschiedlich angezeigt werden kann. 134

14 8.1 Fixiert, flexibel, oder elastisch? 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. Da 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 Zeilenlänge kommen hier helfen die Eigenschaften min-width und max-width weiter. 8 Abbildung 8.1 Immer volle Platzausnutzung mit flexiblen Layouts 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. 135

15 8 Layout mit CSS Nachteile elastischer Layouts Durch die Vergrößerung des gesamten Layouts kommt es recht schnell zu horizontalen Scrollbalken. Eine ähnliche Funktionalität bieten inzwischen alle modernen Webbrowser: einen Seitenzoom. Diese Lupenfunktion vergrößert eine gesamte Webseite linear unabhängig von den gewählten Einheiten im Stylesheet oder den Schrifteinstellungen des Benutzers. Die Unterschiede der verschiedenen Layoutvarianten zeigt Tabelle 8.1. 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 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 deutlicher 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 Auflösungsabhängige Layouts Noch einen Schritt mehr Adaption auf das individuelle System eines Besuchers bieten 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. 136

16 8.2 Der Zweispalter Vorteile adaptiver Layouts optimales Layout für die unterschiedlichen Bildschirmgrößen Nachteile adaptiver Layouts erhöhter Aufwand Da 8 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 verzichtet, oder diese befindet sich horizontal über den Hauptinhalten (siehe Abbildung 8.3). 137

17 8 Layout mit CSS 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 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 hineingeschoben. 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 seiner Positionierung mit top, bottom, left und right platziert: 138

18 8.2 Der Zweispalter 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> Da 8 139

19 8 Layout mit CSS 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 Platzbedarf 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 Zweispalter mit»float«daher gibt es eine zweite weiter verbreitete Methode: den Einsatz von zwei gefloateten Bereichen. Hierbei werden die zwei Spalten mit der Eigenschaft float nebeneinander angeordnet: 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8"> 140

20 8.2 Der Zweispalter 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 diesem 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% herauskommen. Damit der Bereich immer links bleibt, wird ihm float: left zugewiesen. Einem per float positionierten Kasten muss immer auch eine Breite zugewiesen werden. Da 8 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öglich 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; 141

21 8 Layout mit CSS 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 142

22 8.2 Der Zweispalter 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ürlich genauso möglich, stattdessen Werte in Pixeln anzugeben oder em zu verwenden. Da In der Praxis ist es sinnvoll, eine prozentuale Seitenbreite mit Maximal- und Minimalwerten abzusichern dazu schreibe ich in Abschnitt 8.5.2,»Minimale und maximale Breiten für flexible Layouts«, noch etwas Zweispalter im Tabellenlayout 8 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 semantisch falsches Markup zu erreichen. Die passende Eigenschaft ist display. Hier gibt es den Wert table, der von allen Browsern 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 vorgibt). 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 { 143

23 8 Layout mit CSS 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> 144

24 8.3 Der Dreispalter 63: <p>nemo enim ipsam... nesciunt.</p> 64: </div> 65: </div> 66: <div id="footer"> Kapitel 8 : Zweispalter </div> 67: </body> 68: </html> Da 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 zugewiesen wurde, von der anderen in Anspruch genommen wird. 8 Abbildung 8.5 Mit»display: table«werden gleich lange Spalten zum Kinderspiel. Sehen Sie einen weiteren Vorteil der Nutzung von display: table? Wenn nicht, warten 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 überschaubare Vielfalt an Möglichkeiten, je nach Anwendungsfall und Wünschen: Sollen die Spaltenbreiten fest oder flexibel sein? Müssen die Spalten gleich lang sein? 145

25 8 Layout mit CSS 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 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> 146

26 8.3 Der Dreispalter 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: } Da 8 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> 147

27 8 Layout mit CSS 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 Einfärben bzw. Stylen von Spalten. Grundsätzlich werden im Gegensatz zu Tabellenzellen 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 148

28 8.3 Der Dreispalter auf die Seite zu beziehen, aber in der Praxis ist das ziemlich kompliziert und funktioniert nur in Ausnahmefällen sicher (Sie müssen dazu alle vertikalen Dimensionen von <html> an deklarieren). Da 8 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« Dreispalter mit festen Spaltenbreiten rechts und links Das Auszeichnen der seitlichen Bereiche in Prozent hat einen Nachteil: Da sie ohnehin recht klein sind, besteht die Gefahr, dass bei einer insgesamt sehr schmalen Seite die Navigationsspalte einfach zu klein wird, um die dort befindlichen Texte aufzunehmen. 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 abzugrenzen. Außerdem ist die Reihenfolge der Spalten vorgegeben. Das Layout soll aussehen wie in Abbildung

29 8 Layout mit CSS 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 Hintergrundgrafik einzusetzen. Mit CSS3 könnte er entfallen, da dann mehrere Hintergründe pro Element möglich sind (ab Internet Explorer 9). In Zeile 16 wird der Hintergrund in 150

30 8.3 Der Dreispalter Kurzschreibweise definiert (mehr zur Kurzschreibweise der Background-Eigenschaften finden Sie in Anhang A,»CSS-Referenz«, und in Abschnitt 11.5,»Kurzschreibweisen«). 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: } Da 8 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 erinnern sich Bereiche um gefloatete Bereiche werden nicht automatisch um diese aus- 151

31 8 Layout mit CSS 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ändern 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 Browserfensters ä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> 152

32 8.3 Der Dreispalter 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> Da 8 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 entsprechenden 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.) 153

33 8 Layout mit CSS <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 Prozentwerten: 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). 154

34 8.3 Der Dreispalter 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 { 155

35 8 Layout mit CSS 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: Navigation 49: <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. 156

36 8.3 Der Dreispalter 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 besprochenen Beispielen, stellt somit also kein Problem dar (siehe Abbildung 8.10). Der Vollstä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: } Da 8 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 besonderen Maßnahmen. 157

37 8 Layout mit CSS 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) 158

38 8.3 Der Dreispalter 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: negativemargins/ (Linkcode 0536). Sie können diese Technik auch mit fixen oder elastischen Breitenangaben verwenden. Allerdings müssen Sie allen Spalten explizit Breiten zuweisen, was zu einem unflexiblen Layout (in Bezug auf Veränderungen der Browserfenstergröße) führt 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 Hintergrund 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 verstehen 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> 159

39 8 Layout mit CSS 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; 160

40 8.3 Der Dreispalter 45: } 46: #main { 47: margin: 0; 48: padding: 0%; 49: background:#ffc; 50: display: table; 51: } Da 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: } 8 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:

41 8 Layout mit CSS 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 Spalten mit Breitenangaben versehen die Spalten ohne Angaben nehmen sich den verfü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 (Linkcode 0754) herunter, und binden Sie sie an das Element, das die Tabelleneigenschaft 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 automatisch. Nur wenn Sie die Bibliothek an das <body>-element binden, müssen Sie für den Tabellenkörper auch #main { -dt-display: table; } festlegen. 162

42 8.3 Der Dreispalter 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 erfordern. 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> Da 8 163

43 8 Layout mit CSS 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 Hintergrund der Navigation #mainnav wird nur bis zum Ende des Browserfensters (Viewport) 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 anderen Spalten dynamisch anpassen. Die beiden folgenden Quellen befassen sich mit der Methode im Detail: (Linkcode 0054; umfassend dokumentiert) (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. 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 Bildschirmbreiten um. Zwischen diesen Schwellenwerten verhält es sich wie ein festes Layout es bewegt sich nicht. Das Responsive Layout verfügt ebenfalls über Schwellenwerte, 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. 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. 164