Dirk Jesse. CSS-Layouts. Praxislösungen mit YAML 3.0 Inkl. Einsatz in TYPO3

Transkript

1 Dirk Jesse CSS-Layouts Praxislösungen mit YAML 3.0 Inkl. Einsatz in TYPO3

2 Auf einen Blick 1 Philosophie guten Webdesigns Der Weg zu robusten und flexiblen Layouts Abseits des Standards Umgang mit Parsing- und CSS-Bugs Das YAML-Framework Layoutentwicklung mit YAML Tipps und Tricks Integration von YAML in TemplaVoilà YAML und xt:commerce A Inhalt der DVD-ROM B Die Referenzkarte Index

3 Inhalt Geleitwort des Fachgutachters Vorwort zur zweiten Auflage Philosophie guten Webdesigns Einleitung Modernes Webdesign mit (X)HTML und CSS Arbeiten nach Webstandards Webseiten sind nicht aus Papier Alles ist variabel, nichts ist fix Trennung von Inhalt, Layout und Dynamik »Design for our future selves« Die Welt der Browser Internet Explorer 5.x und Internet Explorer 5/Mac Internet Explorer Die Mozilla-Familie: Firefox, Netscape und Co Opera Safari und Konqueror Textbasierte Webbrowser Screenreader Entwurfskonzepte zur Layouterstellung Graceful Degradation Progressive Enhancement Welcher Weg ist nun der bessere? (X)HTML und Doctype Darstellungsmodi Semantischer Code Standard-CSS der Browser Die Arbeit mit dem Buch Verwendung des Pixelrasters Aufbau der Codebeispiele Hinweise zu den Browserbug-Beispielen in Kapitel Hinweise zum YAML-Framework, Kapitel 4 und Hinweise zum TYPO3-Template Hinweise zur Weiterentwicklung und zur Buch-DVD

4 Inhalt 2 Der Weg zu robusten und flexiblen Layouts Der Weg ist das Ziel Strukturiertes Arbeiten mit CSS Einbinden der Stylesheets Medienspezifische Stildefinitionen Mehr Ordnung durch funktionale Gliederung Kaskade und Spezifität Die vier Stufen der Kaskade Die Spezifität eines Selektors CSSDOC Ein Weg zu gut kommentierten Stylesheets Ansatz für den CSSDOC-Standard Grundlagen Übersicht der am häufigsten verwendeten Tags Reset CSS Eric Meyers Reset CSS Ein alternatives Reset CSS Fazit Das Box-Modell Das Box-Modell des Internet Explorers Der Box-Modell-Hack Anwendungsgrenzen des Box-Modell Hacks Einschränkungen des Box-Modells Das Kombinationsmodell für flexible Breiten Die Problemstellung: Mischung von Einheiten Die Lösung: Verschachtelte Container Was ändert sich mit CSS 3? Die Elementtypen in CSS Elementtypen und ihre Eigenschaften Die CSS-Eigenschaft display Längen- und Größenangaben Absolute Einheiten Relative Einheiten Relative und absolute Bezüge in CSS Prozentwerte Die CSS-Eigenschaft position position:static position:relative position:absolute position:fixed position:relative + position:absolute Zwei Spalten mit absoluter Positionierung

5 Inhalt Zwei Spalten mit Fußzeile Drei Spalten mit Kopf- und Fußzeile ein Meilenstein Die CSS-Eigenschaft float Grundlagen im Umgang mit floats Zwei Spalten mit Footer Drei Spalten mit Footer Globale und lokale Wirkung der Eigenschaft clear Markup-freies Clearing von floats Die Clearfix-Methode Die Overflow-Methode Clearing mittels eines zusätzlichen floats Clearing mit display:table Flexible Layouts mit floats Beeinflussung der Spaltenreihenfolge Gleichlange Spalten Strukurunabhängige Layoutgestaltung Grid Layouts ein Gestaltungskonzept Allgemeines Flexible Grids statt fixer Breiten Fazit Gestaltung von Inhaltselementen Schriftgestaltung mit relativen Einheiten Basisschriftgröße und Skalierung Umrechnungstabelle für relative Schriftgrößen Menügestaltung mit Navigationslisten Vertikale Listennavigation Horizontale Listennavigation Abseits des Standards Umgang mit Parsing- und CSS-Bugs Browserunterstützung für CSS 2.x Internet Explorer und die Eigenschaften min-height/max-height und min-width/max-width Internet Explorer und die Pseudo-Elemente :before und :after Browserweichen Trickreiche Kommentare für den Internet Explorer/Mac Conditional Comments Parser-Bugs des Internet Explorers

6 Inhalt Stern-Selektor Escape-Zeichen Der Child-Selektor Gezielte Zugriffe auf alle Internet-Explorer-Versionen Anwendungsbeispiel: Browsertest haslayout das interne Layoutkonzept des Internet Explorers Ärger programmiert Grundlagen für die Vergabe von haslayout CSS-Bugs des Internet Explorers Internet Explorer Float-Modell-Bug Internet Explorer/Win Guillotine-Bug Internet-Explorer Peekaboo-Bug IE/Win Unscrollable-Content-Bug Internet-Explorer Doubled-Float-Margin-Bug IE/Win Escaping-Floats-Bug IE/Win 3-Pixel-Jog-Bug IE/Win Italics-Bug Internet Explorer Expanding-Box-Problem IE/Win Disappearing-List-Background-Bug Internet Explorer Extreme-Font-Size-Bug IE Float-Clearing-Bug Internet Explorer 7 overflow:auto im Print-Layout CSS-Bugs in Mozilla, Opera und Co Firefox 2.x overflow:hidden auto im Print-Layout Mozilla und Firefox Clearing-Bug Netscape 7: Probleme mit overflow:hidden Opera Prozentrechnung nur mit ganzen Zahlen Opera Weitere CSS-Bugs Was bedeutet der Internet Explorer 7 für Webentwickler? Neue Funktionen für den Nutzer Seitenzoom des Internet Explorers Änderungen in der Rendering Engine Das YAML-Framework Vorüberlegungen Gestaltung kontra Bugfixing Lösungen für Standardaufgaben Wiederverwendbare Bausteine Freiheit und Kontrolle Die wichtigsten Features

7 Inhalt 4.3 Das Framework im Detail Der Aufbau des Download-Pakets Das XHTML-Grundgerüst Die Struktur des Quelltextes Die Reihenfolge der Spalten Das Clearing von #col Grafikfreie Spaltentrennlinien und Spaltenhintergründe im Basislayout Skip-Link-Navigation Die CSS-Bausteine Das Konzept Baustein-Klassen und Namenskonventionen Einbindung der CSS-Bausteine in den XHTML-Quelltext Das zentrale Stylesheet Das Basis-Stylesheet base.css CSS-Anpassungen für den Internet Explorer Die Erstellung des Screen-Layouts Navigationselemente Gestaltung der Inhalte Die Erstellung eines Drucklayouts Layouterweiterung: Subtemplates Struktureller Aufbau von Subtemplates Alternatives Layoutkonzept mit Subtemplates Layoutentwicklung mit YAML Konzepte der Layoutentwicklung Das Bottom-Up-Prinzip im Webdesign Das Top-Down-Prinzip des YAML-Frameworks Vom Rohbau zum fertigen Layout Empfohlene Projektstruktur Das Basislayout Festlegung einiger Bezeichnungen Vorgaben für das Layout 3col_standard Erstellung des Screen-Layouts Gestaltung der Hauptnavigation Gestaltung der Inhalte Einbinden einer Druckvorlage Anpassungen für den Internet Explorer Grundvariationen des Basislayouts Layoutvariationen mit drei Spalten

8 Inhalt Layoutvariationen mit zwei Spalten Freie Verwendung der Content-Spalten Freie Spaltenanordnung Spalten in beliebiger Reihenfolge Spaltenanordnungen und Spaltenanordnungen und Spaltenanordnung und (neue Vorgehensweise) Spaltenanordnung und (alte Vorgehensweise) Das Feintuning des Layouts Festlegung der Layoutbreite Zentrierung des Layouts Festlegen der Spaltenbreiten Hinweise für robuste und flexible Layouts Grafikfreie Gestaltung der Spalten Faux-Columns-Technik Grafische Umrandungen flexibler Layouts Ausgewählte Beispiellayouts Layoutentwurf 2col_left_seo Layoutentwurf 3col_fixed_seo Layoutentwicklung mit Subtemplates Layoutentwurf»flexible Grids« Aufbereiten der Inhalte Markup-freies float-clearing in Spalte #col Beispiele zum Clearing mit.floatbox Optimierungen für den Praxiseinsatz Anpassen des Quelltextes Optimieren der Stylesheets Was tun, wenn s klemmt? Valider Code Prüfen von Pfadangaben Kaskaden- und Spezifitätskonflikte in den Stildefinitionen CSS-Unterstützung und Browser-Bugs Einbinden von YAML in ein Content-Management-System Tipps und Tricks Debugging-Stylesheet Kontrollautomatik für iehacks.css Pixelraster für Positions- und Geometriekontrolle

9 Inhalt Hervorheben von Elementen Bearbeitungshilfen für Dreamweaver Dreamweaver MX 2004 (V7.0) Dreamweaver JavaScript-Hilfen Dynamisch generierte Blindtexte Unterstützung für min-width/max-width im Internet Explorer Praktische Tipps zum Grafikeinsatz Skalierbare Bilder mit CSS Image-Replacement-Techniken Tipps für Browsertests Mozilla und Firefox Netscape und Opera Internet Explorer Browsertests unter Windows Vista Tools zur Webseitenentwicklung Web Developer Extension Firebug Das Allround-Tool zur Webentwicklung Web Accessibility Toolbar und Developer Toolbar für den Internet Explorer Web Developer Toolbar für Opera 8 und Die Firefox-Erweiterung HTML-Validator Screenshot-Generatoren Integration von YAML in TemplaVoilà Begriffsbestimmungen Alles ist Template Von der HTML-Vorlage zur Datenstruktur Erzeugen der Datenstruktur (Mapping) Mapping der Header-Teile Template-Objekte Icons für die Datenstruktur und das Template-Objekt TypoScript-Bibliotheken config-array temp.buildheaderdata page-objekt lib.header lib.nav lib.teaser lib.selectorbox

10 Inhalt lib.submenu lib.footer Änderungen an css_styled_content Image Replacement TypoScript anpassen TypoScript Object Browser (TSOB) Elemente verändern Constant Editor YAML-Beispiele Mehrsprachigkeit Template einsprachig machen Eine Sprache aus dem Template entfernen Reihenfolge der Flaggen ändern Zusätzliche Sprachen hinzufügen Asiatische, arabische und hebräische Sprachen Flexible Content-Elemente (FCE) FCEs und Mehrsprachigkeit Weitere Tips zur Verwendung von FCEs YAML und xt:commerce Template-Erstellung für xt:commerce etwas Theorie Die Template Engine Smarty Arbeiten mit Smarty Struktur von xt:commerce Templates Integration von YAML Smarty-Variablen in der Datei index.html xt:commerce-templates mit YAML erstellen Installation Bestandteile des Screenlayouts Layout anpassen Shop mit 2-Spalten-Layout Verwendung von Subtemplates im xt:commerce-template Anhang A Inhalt der DVD-ROM B Die Referenzkarte Index

11 Attraktives, modernes und barrierearmes Webdesign sollte das Ziel jeder heutigen Entwicklungsarbeit sein. 1 Philosophie guten Webdesigns 1.1 Einleitung Bücher über (X)HTML und CSS gibt es reichlich. Es sind zumeist Fachbücher, die die Regeln für die Erstellung von Webseiten erklären. Genauso wie zu jedem Spiel eine Anleitung gehört, die die Spielregeln erläutert. Sie sind wichtig, denn sonst macht das Spiel keinen Spaß. Und doch lernen wir bereits im Kindesalter, dass nicht immer der gewinnt, der nach den Regeln spielt. Da gibt es einen größeren und kräftigeren Jungen, der das Spiel im Sandkasten gelegentlich mit unfairem Körpereinsatz für sich entscheidet. Bei der Gestaltung von Webseiten mit Cascading Style Sheets (CSS) ist es nicht viel anders. Auch hier gelten Spielregeln. Und auch hier gibt es Ärger, wenn sich jemand nicht an diese Regeln hält. Nur sind die größeren Jungs jetzt die Webbrowser, und anstatt ihre Muskeln spielen zu lassen, erschweren sie uns durch ihr zum Teil fehlerhaftes Verständnis der Spielregeln (Browser-Bugs) das Leben. Im Sandkasten sind wir gezwungen, uns anzupassen. Es macht keinen Sinn, sich ins Kinderzimmer einzuschließen und zu schmollen. Was hätten wir davon außer Langeweile? Genauso wenig können wir es uns leisten, die Jungs zu ignorieren. Ignoranz kann gelegentlich auch sehr schmerzhaft sein. Wir müssen ganz einfach den Umgang mit ihnen lernen, ihnen gegebenenfalls aus dem Weg gehen beziehungsweise angemessen reagieren. Und damit komme ich zum Webdesign. Nennen wir das Kind beim Namen: den Internet Explorer. Seit vielen Jahren ist er der Standardbrowser für die Arbeit im Internet. Er liegt jeder Windows-Installation bei und ist durch diese Art der Verbreitung bis heute der unangefochtene Marktführer. Man kann ihn also nicht ignorieren. Der sichere Umgang mit (X)HTML und CSS ist eine Grundvoraussetzung für die Entwicklung moderner Webseiten. CSS zu erlernen beziehungsweise es effektiv einzusetzen, ist jedoch nur möglich, wenn man die Fallstricke kennt. 21

12 1 Philosophie guten Webdesigns 1.2 Modernes Webdesign mit (X)HTML und CSS Arbeiten nach Webstandards Das klassische Tabellenlayout hat ausgedient. Es entspricht weder dem Stand der Technik noch erfüllt es die Anforderungen an modernes, barrierearmes Webdesign. Der Einsatz von Tabellen zur Gestaltung von Webseiten stammt aus der Kinderzeit des Internets, in der Browser mit CSS 1.0 Unterstützung kaum zu mehr in der Lage waren, als die Schriftfarbe zu verändern. Diese Zeiten liegen jedoch bereits mehr als ein halbes Jahrzehnt zurück. Alle heute verfügbaren Browser bieten eine hinreichend gute CSS-Unterstützung, um moderne, CSS-basierte Webseiten zu erstellen. Trotz der zahlreichen Argumente für CSS und gegen Tabellen tun sich viele Designer und Webentwickler schwer damit, sich endgültig vom Tabellenlayout zu verabschieden. Zum Teil liegt die Ursache hierfür in der sehr unterschiedlichen Qualität der CSS-Unterstützung durch die Browser. Ungenaue Interpretationen der W3C-Standards und fehlerhafte Implementationen, vor allem älterer Browserversionen, führen immer wieder zu Problemen. Oft ist dies der Grund, zu einfacheren und vertrauten Techniken zu greifen. Aber auch in der mangelnden Information über die Weiterentwicklung des Browsermarktes und den Möglichkeiten der Standards ist das Verweilen begründet. Einmal gelernte Techniken aus den frühen Tagen des Webs werden als gegeben hingenommen und nicht mehr hinterfragt. Mit diesem Buch möchte ich daher einen etwas anderen Weg verfolgen und mehr als nur die Spielregeln beschreiben. Mein Ziel ist es, praktische Lösungen zur Erstellung moderner Webseiten nach Webstandards zu entwickeln, die in allen Browsern auch im Internet Explorer fehlerfrei funktionieren Webseiten sind nicht aus Papier Bücher, Zeitschriften und Tageszeitungen bestehen aus Papier. Es ist seit Jahrhunderten unser wichtigster Informationsträger. Papier ist recht einfach herzustellen und lässt sich in beinahe jedes beliebige Format bringen. Das klassische Printdesign baut auf bekannten Größen auf, zum Beispiel dem Seitenverhältnis und den Abmessungen definierter Blattformate. Elemente des Layouts können daher für den Druck millimetergenau ausgerichtet werden. Die dazu verwendete Technik hat eine mehr als hundertjährige Entwicklungszeit hinter sich und ist in vielen Bereichen zu einem Optimum gereift. Im Resultat sind daraus feste Gestaltungsregeln hervorgegangen, die einen ungestörten Lesefluss und eine gute Übersichtlichkeit auch bei längeren Texten und unterschiedlichen Themen garantieren. 22

13 Modernes Webdesign mit (X)HTML und CSS 1.2 Vergleichen Sie einmal verschiedene Tageszeitungen in Bezug auf ihr Layout. Alle Zeitungen verwenden den Spaltensatz. Schriftgrößen, Zeilenlängen und Zeilenabstände unterscheiden sich nur geringfügig voneinander. Hier greifen die seit langem bewährten Regeln des Schriftsatzes und des Printdesigns. Und trotz aller Gemeinsamkeiten hat jede Zeitung ihr eigenes Gesicht. Die Seitenaufteilung, die Gestaltung von Überschriften und Bildern und vieles andere bieten unzählige Gestaltungsmöglichkeiten, die in der Summe das individuelle Erscheinungsbild prägen. Das Layout ist optimal an das verwendete Blattformat angepasst. Keine Redaktion ändert ihr Layout für einen überlangen Artikel. Stattdessen wird die Relevanz der Informationen vorab bewertet. Ist der Artikel ein Knüller, so wird er für die Titelseite geschrieben. Das bedeutet, er wird bis aufs Wort in seiner Länge an den auf der Titelseite vorhandenen Platz angepasst. Alle weiteren Beiträge müssen entsprechend knapp und prägnant formuliert werden, um in einer Seitenspalte auf einer der anderen Seiten mit einer festgelegten Anzahl von Zeilen auszukommen. Das World Wide Web (WWW) entwickelte sich erst am Ende der neunziger Jahre zu einem Massenmedium. Zu Beginn als Informationsmedium für einen kleinen Forscherkreis entwickelt, hat es sich zum weltweit wichtigsten Informationsmedium unserer Zeit entwickelt und dies in dem kurzem Zeitraum von nur 15 Jahren Alles ist variabel, nichts ist fix Das Internet als elektronisches Medium eröffnet eine völlig neue Welt. Zwar gelten prinzipiell ähnliche Gesetzmäßigkeiten für ein ausgewogenes Layout wie beim Print, aber die Randbedingungen unterscheiden sich vollständig von denen anderer Medien. Der größte Trugschluss ist der Glaube, als Webdesigner eine vollständige Kontrolle über das Medium zu besitzen. Geprägt von unseren täglichen Erfahrungen mit Büchern, Zeitungen und Zeitschriften sind wir mit konstanten Größen vertraut. Auch am eigenen Rechner setzt sich diese Konstanz fort zumindest aus dem eigenen Blickwinkel, denn wir arbeiten in der Regel über Jahre mit demselben Betriebssystem, mit demselben Monitor und der gleichen Bildschirmauflösung. Verschiedene Browser, verschiedene Optik Allein schon aus der großen Anzahl verschiedener Browser und den unterschiedlichen Browserversionen ergeben sich Unterschiede in der Darstellung einer Webseite. Jeder Browser besitzt eigene Stylesheets, um»unformatierte«inhalte 23

14 1 Philosophie guten Webdesigns in bestmöglicher Qualität darzustellen. Allerdings unterscheiden sich diese Stylesheets von einem Browser zum anderen stark. Ebenso ist auch nicht jeder Browser auf jedem Betriebssystem verfügbar. Standards bieten den Browsern ein festes Regelwerk, an das sie sich halten können. Der Webseitenersteller hat eine Vorstellung davon, wie der Browser reagiert, wenn dieser in standardisierter Form angesprochen wird. Wenn wir allerdings anfangen, Webseiten nach eigenen Regeln zu gestalten, kann der Browser nur»raten«, was wir wollen. Feste Regeln erleichtern also auf beiden Seiten die Arbeit. Das ist wie beim Print. Durch standardisierte Papiergrößen müssen sich nicht alle Beteiligten ständig auf neue Formate einigen und jeder kann planen, wie groß eine Papierrolle sein muss, aus der dann später Geschenkpapier oder Papier für den Laserdrucker wird. Aus dieser Vielfalt ergibt sich eine Verantwortung des Seitenerstellers, möglichst standardkonforme Webseiten zu erstellen. Denn nur dann ist ein weitgehend einheitliches Erscheinungsbild in allen Browsern wahrscheinlich. Das Ausgabemedium, das unbekannte Wesen Als Webentwickler wissen wir nicht, über welches Ausgabemedium der Nutzer auf die Informationen einer Webseite zugreift. Sicherlich steht hier an erster Stelle der Monitor, doch denken Sie auch an mobile Endgeräte wie an PDAs oder die neue Handy-Generation. Auch auf diesen Geräten sollten Webseiten ohne Einschränkungen benutzbar sein. In diesem Bereich sind die Unsicherheiten hinsichtlich der Auflösung und der CSS-Unterstützung besonders groß. Und nicht zuletzt hat jeder Nutzer die Möglichkeit, Webseiten auszudrucken. Gerade längere Texte mag fast niemand gerne am Bildschirm lesen. Die Aufbereitung des Layouts und der Seiteninhalte für den Druck erfordert wiederum besondere Sorgfalt, damit keine Informationen verlorengehen. Bildschirmauflösung und Viewport Das Standard-Ausgabemedium für Informationen aus dem Internet ist der Bildschirm. Die Bildschirmauflösung bezeichnet allgemein die Aufteilung des Bildschirms in einzelne Bildpunkte (Pixel). Sie sagt jedoch nichts über die Größe eines Pixels aus, denn neben der Bildschirmauflösung ist diese auch noch von der Größe des Bildschirms selbst abhängig. Ein Pixel ist also eine relative Größe, während die im Printdesign verwendeten Einheiten Punkt, Pica oder Zentimeter absolute Maßeinheiten sind. Auch über den verfügbaren Platz, den eine Webseite beanspruchen kann, ist die Bildschirmauflösung allein nur bedingt aussagekräftig. Wie viele Programme lau- 24

15 Modernes Webdesign mit (X)HTML und CSS 1.2 fen auf Ihrem Desktop während Sie sich im Internet bewegen? Es muss daher davon ausgegangen werden, dass das Browserfenster nur in Ausnahmefällen die volle Bildschirmbreite belegt. Der im Browserfenster zur Darstellung einer Webseite verfügbare Bereich wird als Viewport bezeichnet. Dieser ist kleiner als das Browserfenster selbst, denn dessen Größe richtet sich wiederum nach eventuellen seitlichen Scrollbalken. Hat der Nutzer in seinem Browser zusätzliche Werkzeugleisten (z. B. die Google Toolbar) installiert, schrumpft der verfügbare Platz weiter zusammen. Schriftarten und Schriftgrößen Auch bei der Schriftgestaltung sind dem Einfluss des Webdesigners hinsichtlich des Erscheinungsbildes auf dem Monitor des Nutzers Grenzen gesetzt. Ein Text in Schriftgröße 12 px mag auf einem 15 Zoll großen Monitor bei geringer Auflösung sehr gut lesbar sein. Auf einem modernen 21-Zoll-Flachbildschirm mit einer Standardauflösung von Pixeln wird er jedoch unter Umständen zur Qual. Alle aktuellen Betriebssysteme sowie alle aktuellen Browser bieten dem Nutzer daher die Möglichkeit, die Schriftgröße nach seinem Wunsch zu skalieren, um die Lesbarkeit von Texten am Bildschirm zu verbessern. Ebenso erlauben die meisten Browser dem Nutzer, die von der Webseite vorgegebenen Schriften zu ignorieren und durch eigene Vorgaben zu ersetzen. Im Bezug auf die Schriftgröße hat der Seitenersteller also bestenfalls ein Vorschlagsrecht, das vom Nutzer jedoch jederzeit übergangen werden kann. Fazit Die Randbedingungen, unter denen Webseiten in einem Browser dargestellt werden, sind mit zahlreichen Unbekannten versehen. Die pixelgenaue Gestaltung einer Seite ist daher in der Regel alles andere als optimal, denn in diesem Fall geben wir vor, alle diese Randbedingungen zu kennen und zu wissen, was das Beste für den Nutzer ist. Allgemein lassen sich drei Layoutkonzepte unterscheiden: Fixe Layouts basieren auf fest vorgegebenen Breiten in der Einheit Pixel für alle Bereiche des Layouts. Diese Art von Layouts passt sich weder dem verfügbaren Platz noch veränderbaren Schriftgrößen an. Flexible Layouts basieren auf Prozentwerten zur Festlegung von Breitenangaben. Flexible Layouts passen sich daher automatisch an die verfügbare Breite des Ausgabemediums an. 25

16 Index!important 51, 52 #col1 210 #col2 210 #col3 210 #footer 209, 230 #header 228 #ie_clearing 353 #main 229 #nav 229 #page 209, 228 #page_margins 209, 290 #topnav 228, 229 * {border 0} 226.clearfix 109.floatbox 237, 344.hideboth 232.hidecol1 232.hidecol2 232.slidebox 244.subcolumns 271 :active 293 :focus 63, 293 :hover 194, 147, 224, handheld 148, 284 [name].html 286 3P-Fix Pixel-Jog-Bug 243, 295 A A List Apart 119, 248 a[href^]= 261 Absatztext 258 absolute Einheiten 82 Almost Standard Mode Darstellungsmodi 39 Alpha-Transparenz 195 alt-attribut 31, 32, 362 Anpassungsdatei 234 Anpassungsdatei Patch-Datei any order columns 313 Apple 30 Attribut 38 Attribut-Selektoren 35 Aufbau des Frameworks 200 Auflösung 44, 82 Ausgabemedium 24, 26, 82 Bildschirm 24 Drucker 24 mobile Endgeräte 24 Außenabstand Margin Autoren-Stylesheet 51 B Backslash-Hack 257 Barrierefreiheit 27, 39, 41, 218, 373 base.css 203, 224 basemod.css 288 basemod_[name].css 286 basemod_draft.css 203 Basislayout 206, 214, 220, 228, 284 schematischer Aufbau 208 Basisschriftgröße 132 Basis-Stylesheet base.css 224 Baukastenprinzip Framework Baukastensystem 197 Benutzer-Stylesheet 51 Betriebssystem 24 Linux 30 Mac OS X 28 Windows Vista 29 Windows 95, 98 oder Me 28 Windows XP 28 Bezeichnungen 286 Bilder 370 Bildschirm 49, 82 Bildschirmauflösung 23, 24, 44, 82 Blindtext 358 Block Formatting Context 157 Block-Elemente 80, 370 Blueprint CSS 127 border Rahmen 67 Bottom-Up-Prinzip 279 Box-Modell 67 Anwendungsgrenzen

17 Index Box-Modell des Internet Explorers 69 Box-Modell-Hack 71 Einschränkungen des Box-Modells 75 Boxsizing 79 Braillezeile 32 Browser 28, 377 Firefox 29 Konqueror 30 Lynx 30 Opera 30 Safari 30 Screenreader 32 Screenshot-Generatoren 377 Textbasierte Webbrowser 30 Browser-Bugs 21, 198, 349 Browserfenster 44 Browsertest 156, 364 Browserweichen 148 Conditional Comments 149 JavaScript 147 Kommentar-Hack für IE/Mac 149 Parser-Hacks 147 C calc( ) 80 Cascading Style Sheets 21 central_draft.css 202 Child-Selektor 153, 155 clear 100 both 101 left 101 lokale und globale Wirkung 106 none 101 right 101 Clearfix-Methode 108, 212, 237 Clearing 211 CMS 351 Conditional Comments 149, 193, 223, 235, 367, 386 config-array 391 Constant Editor 404 Container 383 content.css 50 content_default.css 203 Cookies 370 Corporate Identity 400 CSS CSS CSS 3 79 CSS Kommentare 55 css_styled_content 380 CSS-Anpassungen für den IE 285, 294 Einbindung 223 CSS-Bugs 46, 70, 158, 160, 210!important 52 3-Pixel-Jog-Bug 243 CSS-Bugs im Internet Explorer Disappearing-List-Background-Bug 137, 231, 238, 242 Doubled-Float-Margin-Bug 240 fehlende Hintergründe von Block-Elementen 245 Firefox 2.x Overflow-Bug 187 Float-Modell-Bug 160 Guillotine-Bug 239 IE Expanding-Box-Problem 176 IE Float-Clearing-Bug 183 IE/Win 3-Pixel-Jog-Bug 172 IE/Win Disapearing-List-Background- Bug 180 IE/Win Escaping-Floats-Bug 170 IE/Win Guillotine-Bug 162 IE/Win Italics-Bug 174 IE/Win Unscrollable-Content-Bug 166 Internet Explorer Extreme-Font-Size-Bug 182 Internet Explorer Peekaboo-Bug 164 Internet Explorer 7 overflow, auto im Print-Layout 185 Internet-Explorer Doubled-Float-Margin-Bug 168 Italics-Bug 241 Italics-Bugs 226 Mozilla und Firefox Clearing Bug 189 Netscape 7 Probleme mit overflow, hidden 189 Opera Prozentrechnung 191 Opera-Bugs 191 CSSDOC 236 DocBlocks 55 file comments 55 section comments 55 CSSDOC-Standard 54 CSS-Ergänzungsbausteine 281 CSS-Frames

18 Index CSS-Grundbausteine 281 CSS-Kaskade 351 CSS-Layouts 125 CSS-Unterstützung 141, 349 D Darstellungsmodi 37, 38 Almost Standard Mode 39 Quirks Mode 38 Dateivorlagen 222 Datenstruktur 382, 388 db_yamltv 382 debug.css 353 Debugging 350 Debugging-Stylesheet 353 display 81 block 81 inline 81, 240 inline-block 81 list-item 81 none 81 table 113 Doctype 38, 44 Doctype Definition 37 Doctype Dokumenttyp 207 Document Object Model 37 Dokumenttyp 207 DOM 37 DOM-Browser 371 DOM-Inspektor 373 Doubled-Float-Margin-Bug 139, 240, 253, 304 Doubled-Float-Margin-Bug CSS-Bugs 276 Download-Paket 200 Drafts 202 Dreamweaver 356 Drucker 49 Druck-Stylesheets 263, 294 Drupal 19, 352 DTD Doctype Definition 37 E Editing Type 386 Einfach für Alle 40 Einheiten Maßeinheiten 24 Einheitenmischung 75 elastisch 26 Elementfluss 88, 89, 100 Elementtypen 80 em 307, 361 E-Mix 307 Entwurfskonzepte 32 Entwurfsstylesheet 356 Ergänzungsbausteine 222 ersetzte Elemente 81, 99 Erstellen der Schattengrafiken 326 Escape-Zeichen 73, 152 Escaping-Floats-Bug CSS-Bugs 239 Excaping-Floats-Bug 239 Expanding-Box-Problem 240 Expanding-Box-Problem-Bug CSS-Bugs 240 expression() 143 ExpressionEngine 19, 352 externe Stylesheets 370 F Farben 50 Faux-Columns 337 Feintuning des Layouts 317 Festlegen der Spaltenbreiten 319 Firebug 370 Firefox 29, 364, 369, 375 Nutzerprofile 366 portable Version 366 Profilmanager 365 vertikalen Scrollbalken 226 Firefox Portable 366 fix 25 Flash 27, 364 flexibel 25 Flexibilität 199 Flexible Content-Elemente (FCE) 411 flexible Grids 127 flexible Layouts 115 strukurunabhängige Layoutgestaltung 123 float 81, 98, 370 left 98 none 98 right 98 Float-Bugs CSS-Bugs 158 Float-Modell 160 Flock

19 Index Fontgrößen Schriftgrößen 227 font-size 133 Formulare 370 Formularelemente 63, 226 Forum 349 frameset 37 Framework 197 Freie Spaltenanordnung 305 Freie Verwendung der Content-Spalten 303 ftod.js 358 Full Standards Mode 38 G Generische CSS-Klassen 232 Gestaltung der Inhalte 293 GIFBUILDER 402 gleichlange Spalten 121 Globales Clearing 212 GPL 415 Graceful Degradation 32, 33 Grafiken 360 mit Schriftgröße skalieren 360 grafische Schatten 326 Grid Layouts 124 Grundbausteine 199, 221 Grundvariationen 296 Guillotine-Bug 239 Guillotine-Bug CSS-Bugs 239 H haslayout 108, 114, 139, 157, 195, 211, 230, 237, 243, 374 Hauptnavigation 292 Header-Teile 386 Hover-Effekt 136 HTML 36 HTML , 40 HTML-Vorlage 379 Hyperlinks Auszeichnung externer Hyperlinks 260 I IE Column Clearings 209 IE-Anpassungsdatei Patch-Datei IE-Clearing 209, 243, 297 Funktionsschema 214 iehacks.css 203, 236, 276, 353 iehacks_vlist.css 256 Image Replacement 362, 400 Phark-Methode 363 In Search of the holy grail 119 In Search of the One True Layout 121, 313 Inhaltsbereich 67, 78 Inhaltselemente 384 Positionierung 260 Inline CSS 49, 362 Inline PHP-Code 419 Inline-Elemente 80 Innenabstand Padding 67 INNER 384 Internet Explorer 28, 69, 89, 160, 366, 372 Internet Explorer 7 29, 192 Internet Explorer Internet Explorer Internet Explorer 5.x 28 Internet Explorer 5/Mac 28 Internet Explorer 6 28, 38 Internet Explorer Internet Explorer , 142, 155, 239 Parser-Bugs 151 Standalone-Fassungen 367 Internet Explorer Developer Toolbar 373 Italics-Bug 241 Italics-Bug CSS-Bugs 241 J Java Applets 370 JavaScript 27, 34, 145, 147, JavaScript-Werkzeuge 358 unobtrusive JavaScript 34 JavaScript-Debugger 371 JavaScript-Expressions 143 Joomla! 19, 352 K Kaskade 51, 349 Kombinationen für 2-Spalten-Layouts 302 Kombinationsmodell 76, 129,

20 Index Konqueror 30 kontextuelle Selektoren 36 L layout_[name].css 286 Layoutbeispiele 204 Layoutentwurf 339 Layoutentwurf 3col_standard 287 Layoutvariationen mit drei Spalten 298 Layoutvariationen mit zwei Spalten 300 Layoutbreite 290, 317 Layoutentwurf 331, 335 Layouts elastisch 26, 362 fix 25 flexibel 25 Layouttabellen 40 lib.footer 399 lib.header 393 lib.nav 395 lib.selectorbox 397 lib.submenu 398 lib.teaser 396 Linearisierung der Spaltencontainer 264 Listen 39, 64, 227, 259 Listen-Elemente 81 Listennavigation horizontale Listennavigation 138 Vertikale Listennavigation 135 Listennavigationen 203 Lynx 30 M Mapping instructions 385 Margin 67, 158 Markup 41, 102 markup_draft.html 202, 207 markup-freies Clearing 108, 343 Clearfix-Methode 108 mittels eines zusätzlichen floats 112 Overflow-Methode 111 Markup-Sprache 41 Maßeinheiten 24, 82 em 361 Pixel 360 Prozentwerte 361 medienspezifische Stildefinitionen 49 Medientyp 51 Mehrsprachigkeit 408 Microsoft 373 Millimeter [mm] Maßeinheiten 82 min-/max-height 360 min-/max-width 290, 360 min-height/max-height 142, 194 minmax.js 145, 360 min-width/max-width 142, 194 mobile Geräte 49 Modul 379 Monitor Monitor 49 monospace 258 Mozilla 29, 364, 369 N nav_shinybuttons.css 252 nav_slidingdoor.css 249 nav_slidingdoorii.css 249 Navigationselemente 50, 198, 247 horizontale Listennavigation hshinybuttons 252 horizontale Listennavigation hslidingdoor 248 vertikale Listennavigation vlist 254 Navigationslisten 39, 134 negative Margins 119, 243, 312 Netscape 29, 226, 366 nicht ersetzte Elemente 81 non-replaced elements nicht ersetzte Elemente 81 Nutzer-CSS 222 Nutzerprofile 366 O Offset 87 Online-Dienste 378 Online-Dokumentation 200 Online-Validatoren 370, 372 Open Source 29, 30, 364 Opera 30, 72, 227, 366, 374 Optimieren der Stylesheets 347 Optimierungen 346 option 65 optionale Kennzeichnung von Spalten 269 OUTER

21 Index overflow auto 111 hidden 111, 122 Overflow-Methode 111 P Padding 67, 78 page-objekt 393 Parser-Bugs 70, 151 Child-Selektors 153 Escape-Zeichen 152 Universal-Selektor * 152 Parser-Hacks 157 patch_[name].css 287 patch_layout_draft.css 204 patch_nav_vlist.css 204 Patch-Datei 234, 285 Patches 222 PDA 141 PDA mobile Endgeräte 141 Pfadangaben 350 Phoenix Firefox 29 Pica [pc] Maßeinheiten 82 Pixel 307 Pixel Maßeinheiten 24 Pixelraster 43, 45, 355 PNG-Grafiken 195 position 86, Spalter mit fixer Breite 94 3-Spalter mit flexibler Breite 96 absolute 88, 91 fixed 89, 194 relative 87, 91, 228 static 86 Position is Everything 159 print_base.css 203, 266 Printdesign 22 Print-Layout Druck-Stylesheets 198 Print-Stylesheets 264 Progressive Enhancement 32, 35, 64 Projektstruktur 282 Prozent 307 Prozentwerte [%] Maßeinheiten 85 Pseudo-Elemente 146 Punkt [pt] 82 Q Qualitätskontrolle 197 Qualitätsmerkmal 157 Quelltextstruktur 206 Quirks Mode 37, 38, 69, 150, 159, 209 R Rahmen 66, 67, 78 Rasterlayout 125 Rasterlayout Grid-Layouts relative Einheiten 82, 131 Rendering 37 replaced ersetzte Elemente 81 Reset CSS 43, 61, 224 Eric Meyers Reset CSS 62 YAML Reset CSS 64 Resize-Funktion 370 Robustheit des Layouts 199 S Safari 30 Schichten-Modell 26 Dynamik 27 Inhalt und Struktur 26 Präsentation 26 Schriftart 25 Schriften Skalierbarkeit 267 Schriftgröße 25 Screen-Layout 50, 198, 220, 232, 245, 283, 288 Screenreader 32 Screenshot-Generatoren 377 Screenshots 43 SeaMonkey Mozilla-Suite 369 Seitenumbruch 267 Seitenverhältnis 22 Seitenzoom 192, 236 Selektor 48 semantischer Code 39, 41, 362 Sitemap 381 Skalierung 132 Skip-Links 217, 233 Sliding Door 248 slim-varianten 203 Smarty

22 Index Smarty-Templates 416 Spaltenreihenfolge 115, 209, 210, Spaltentrenner 216 Spezifität 51, 52, 304, 349 Spezifitätskonflikte 351 Sprachausgabe 32 Sprach-Records 411 SPT 307 Standard Mode 38, 159, 257 Standard Mode Darstellungmodi 38 Standard Mode Full Standards Mode 38 Standard Mode Standards Compliant Mode 38 Standardaufgaben 198 Standard-CSS 42 Standards 24 Standards Compliant Mode 38 Standardschriftgröße 132, 361 statische Templates 380 Stern-Selektor 152 Stern-Selektor-Hack 74 Strict 207 strict 36, 41 struktur- bzw. layoutabhängige Bugfixes 234 struktur- bzw. layoutunabhängige Bugfixes 234 struktur- und layoutabhängige Bugfixes 242 struktur- und layoutunabhängige Bugfixes 236 Strukturebene 117 Subtemplates 199, 270, 338 Container.subcolumns 271 Inhaltscontainer 274 Klassendefinition 273 Suckerfish-Menü 34 Syntaxfehler im Quellcode 349 T Tabellen 262, 370 Tabellenlayout 22, 40, 125 Tabindex 372 Tags 57 Tantek-Hack 71 temp.buildheaderdata 392 Template 379, 380 Template-Objekt 382, 388 TemplaVoilà 379 Textauszeichnung 259 Textersetzung Image Replacement 364 Textfluss 100 Textzoom 291 Tidy 375 Top-Down-Prinzip 279 transitional 37, 41 Transparenz 355 TSOB 403 TYPO3 352 Typographie 124 typographische Einheit 82 TypoScript anpassen 402 TypoScript Object Browser (TSOB) 403 TypoScript Object Path 386 TypoScript-Code 380 U übergroße Elemente 244 Überschriften 258, 362 Umrechnung relativer Schriftgrößen 133 unsichtbar 218 V valide 151 valider Code 349 Validierung von HTML Seiten 375 Validierungsservice 350 versteckte Inhalte 219 vertikale Scrollbalken 44, 236 vertikale Trennlinien 287 vertikaler Scrollbalken 65 Viewport 24, 44, 89, 145, 320 virtuelle Maschine 368 voice-family

23 Index W Web Accessibility Toolbar 372 Web Developer Extension 369, 372, 374 Webdesign 21 Webkrauts 117, 119 Webstandards 22, 39, 198 Windows Vista 368 Word Wide Web WWW 23 WordPress 352 word-wrap break-word 240 World Wide Web 23 WWW 23 X x-höhe [ex] 82 XHTML , 40 Transitional 44 XHTML 1.1 und XML-Prolog 38 XML-Struktur 388 xt:commerce 352, 415 Y YAML-Framework 46, 124, 197 Aufbau des Download-Pakets 201 Aufbereiten der Inhalte 343 CSS-Anpassungen für den Internet-Explorer 233 Die Erstellung des Drucklayouts 263 empfohlene Projektstruktur 282 Gestaltung der Inhalte 257 Layoutentwicklung 279 Optimierungen für den Praxiseinsatz 346 Quelltextstruktur 205 Subtemplates 270 Z Zentimeter [cm] Maßeinheiten 82 zentrales Stylesheet 221, 223, 224, 284 Einbindung 223 Zentrierung des Layouts 317 z-index 231 Zitate 227 Zoll (Inch) [in] Maßeinheiten 82 Zugänglichkeit 26, 27, 372 Zugänglichkeit Barrierefreiheit 452