| Häufige Fragen und Probleme mit CSS |
 |
 |
 |
| Geschrieben von: Robbz |
| Donnerstag, den 18. Dezember 2008 um 16:13 Uhr |
|
Auf der Seite Xhtml-Forum gibt es einen wunderbaren Beitrag, der alle CSS-relevanten Probleme zusammenfasst, erklärt und verlinkt, mit denen sich ein Webdesigner so rumärgern muss.
CSS-Prolog - Welche (globalen) Definitionen sind wichtig und nützlich?F: Wieso stimmt der Abstand da nicht? Wieso zeigt der IE das anders an als andere Browser? Code:
* { margin: 0; padding: 0; }
ABER: Formularelemente sollten evtl. beim "globalen Nullen" außen vor gelassen werden, indem man alle übrigen einzeln aufführt (mühsam, aber u.U. sinnvoll): Code:
html, body, p, ul, h1, h2, ... {
F: Die Abstände sind immer noch verschieden. A: Stimmt auch der Doctype? Wenn dieser nicht korrekt angegeben ist, befindet sich der IE im Quirksmodus (auch hier beschrieben) und das Boxmodell wird falsch darstellt. Weitere Anregungen zu einem sinnvollen "CSS-Prolog" ------------------------------------------------------------------------ 1) Container sollen "mitwachsen" - Faux ColumnsF: Wie kann ein Container die Höhe eines anderen Containers annehmen, der je nach Inhalt verschiedene Höhen hat? Beispiel:  A: Nebeneinander stehende Container können nicht wirklich "mitwachsen". Mit Hintergrundfarben- oder Bildern, welche mit der Faux Columns-Technik eingebunden werden erreicht man, dass es so aussieht, als ob der Container gleich hoch sei. ------------------------------------------------------------------------ 2) Container ragen aus anderen heraus - Clearing floats/Easy Clearing/Clearen ohne MarkupF: Container ragen aus anderen heraus, was mache ich falsch? (Problem tritt nicht im IE auf) Beispiel:  A: Es wird nicht oder falsch gecleart. Der Container, der floatierte Elemente beinhaltet, benötigt am Ende ein clearendes Element. Der IE fasst diese floatierten Elemente ohne clearen ein, was aber den Webstandards widerspricht. Hier zwei Erklärungen zu float und clear: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT } und Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : CLEAR } . Wie immer gilt: Erst die Grundlagen verstehen, dann diese vertiefen, und Easy-Clearing anwenden (deutsche Übersetzung). Auch hier im Forum in der Knowledge-base ist ein Beispiel vorhanden. Wichtiges Update: Im obigen Artikel wird display: inline-table; verwendet, was mit dem IE7 nicht mehr funktioniert. Statt dessen sollte es display: inline-block heissen. Hier ein ausführlicher Artikel zum easy-clearing im IE7 ------------------------------------------------------------------------ 3) Tabellenloses Layout / 2- oder 3-Spalten-Layout mit CSSF: Wie erstellt man ein reines CSS-Layout ohne Tabellen? Beispiel:  A: Mehrspalten-Layout mit Tutorial: One Multicolumn Layout (CSS - Framework) - css-tutorials.de Einfaches Beispiel ohne Beschreibung: Flexible 3 Spalten mit Kopf und Fuss Tutorial für 2- oder 3-Spalten-Layout: "The holy grail" (Vorsicht: der IE7 könnte damit Probleme haben) Komplexe Lösung zum herunterladen: Yet another Multicolumn Layout ------------------------------------------------------------------------ 4) 100% HöheF: Wie ereicht man, dass eine Seite immer 100% Höhe hat, auch wenn der Inhalt weniger Platz einnimmt?Beispiel::  A: Wichtig ist zu verstehen, dass eine prozentuale Höhen- oder Breitenangabe sich immer auf die Maße des Elternlements bezieht (so diese dort definiert ist, sonst geht es zu den Grosseltern usw. bis zum ). Mit 100% height oder width ist _nicht_ die restliche zur Verfügung stehende Höhe/Breite gemeint. Ein 100px hoher Header und ein 100% hoher Content darunter sind zusammen grösser als 100%, nämlich 100%+100px, es enstünde dann also ein Scrollbalken! Lösungen: 100% Höhe mit floatierenden DIVs 100% Höhe mit Footer stets am unteren Rand, Stichwort "Footer Stick Alt" ------------------------------------------------------------------------ 5) Vertikal zentrierenF: Wie ereicht man horizontale und vertikale Zentrierung?Beispiel::  A: Wenn ein HTML-Element vertikal zentriert werden soll, geht das mit der CSS-Eigenschaft vertical-align. Diese kann aber nur auf Inline-Elemente oder Tabellenzellen angewendet werden. Vertikales und horizontales zentrieren einer kompletten Webseite und vertikal zentrierte Bilder ------------------------------------------------------------------------ 6) Min- und Max-width auch für den IEF: Der IE kennt weder min- noch max-width. Wie kann man er diese Breiten dennoch einhalten, ohne ihn in den Quirksmodus zu schicken?A: Das geht nur mit etwas JavaScript und Conditional Comments als Browserweiche. Ulle hat in der Knowledge-Base ein sehr gutes Beispiel erstellt. Variante 2: Per ConditionalComment und darin befindlichen einzelligen Tabellen kann dem IE eine max-width untergejubelt werden. ------------------------------------------------------------------------- 7) Fusszeile immer am unteren Rand / "Footer Stick Alt"F: Wie ereicht man, dass eine Fusszeile immer am unteren Rand "klebt" (egal, ob der Inhalt die Seite ausfüllt)?Beispiel:: Contentbereich leer, Fusszeile aber trotzdem am unteren Rand und Viel Inhalt, dann Fusszeile am unteren Rand A: Eine einfache und effektive Technik ist "Footer Stick Alt". Kurze Erläuterung: Der "non-footer"-Bereich erhält eine min-height von 100% (und eine height: 100% für den IE der min-height nicht kennt). Im HTML-Code wird #non-footer dann geschlossen. Erst danach (wichtig!) folgt #footer. Dieser wird mit negativem margin-top "hochgeholt". Die verlinkte Seite beschreibt es ausführlich. ------------------------------------------------------------------------- 8) "Fly-Out" oder "Drop-Down" Menus mit CSS erstellen (und ohne Javascript)F: Wie erstellt man ein Fly-Out / Drop-Down Menu mit CSS (und nach Möglichkeit ohne Javascript)?Beispiel:: Das Suckerfish-Menu (mit JavaScript für den IE) StuNicholls Menus (zu finden unter "Menus - Multi-Level CSS Only" -> ganz ohne JavaScript, aber mit ConditionalComments für den IE) ... und mit JS aber Barrierefrei Barrierefries Dropdown mit JS Dazu lesen: Barrierefreies JavaScript, aber besser keine JavaScript-Effekthascherei ------------------------------------------------------------------------ 9) EntwicklungsumgebungSehr zu empfehlen ist, Webseiten zunächst im Firefox zu testen und erst später den IE anzupassen. In aller Regel zeigt der IE Webseiten nicht korrekt an, wenn die Darstellung im IE dem Wunsch des Gestalters entspricht, ist dies kein Hinweis auf eine korrekt erstellte Seite! Sinnvoller ist es, Seiten erst mit Firefox zu testen und diese später an den IE anzupassen. Essentielles Tool für den Firefox: Der "Web Developer". Damit lässt sich unter anderem das CSS einer Seite live editieren (in der Menubar -> CSS ->Edit CSS) was Änderungen sofort sichtbar macht. Sehr praktisch ist auch das Highlighten der Elemente, auf denen sich die Maus gerade befindet. Dazu in der Web-Developer-Menubar "->Outline->Outline current Element" aktivieren und mal mit der Maus über die Seite gehen. Viele Fragen zu Positionierungen, Breiten, Höhen und Abständen erklären sich dann von selbst. Noch komplexer und detaillierter als der Web-Developer funktioniert die Firefox-Erweiterung Firebug. Wer einmal damit gearbeitet hat, kann nicht mehr ohne. Ein muss für professionelle Entwickler und eine unbezahlbare Hilfe bei der Analyse komplexer Webseiten. Für den Firefox ist der "HTML Validator" ein wichtiges Tool um stets den Quellcode zu validieren und bei Fehlern und Warnungen gleich Hilfestellungen zu erhalten (inzwischen validiert dieses Tool zuverlässig). Zuverlässiges Validieren des Codes geht auch online unter W3C-Validator (oder auch hier).. Oft ist es nötig mit Conditional Comments im HTML-Code, bestimmte IE-Versionen anzusprechen oder auszuschliessen. Um überhaupt für die verschiedenn Versionen des InternetExplorers testen zu können, ist die lokale Installation von multiplen IE-Versionen sehr sinnvoll. Ein Artikel auf positioniseverything beschreibt das vorgehen mit multiplen IE-Versionen und Conditional Commetns Noch ein genereller Tipp: CSS und HTML-Code sollten auch in der Test- und Entwicklungsphase stets getestet und validiert sein, um damit verbundene Darstellungsfehler zu vermeiden!
------------------------------ |
| Zuletzt aktualisiert am Donnerstag, den 18. Dezember 2008 um 16:17 Uhr |