Gerade CSS-Einsteiger stolpern oft über das Box-Modell und tun sich damit anfangs ein wenig schwer. Ein grundsätzliches Verständnis des Box-Modells und seinen Eigenheiten ist jedoch enorm wichtig. Hier ein kurzer Einstieg:

CSS legt für jede HTML-Seite ein Raster an, in dem alle Inhalte in rechteckigen Kästen, den Boxen, organisiert sind (klick auf das Bild links). Jedes HTML-Element hat eine Box.

vollständigen Artikel lesen…

Jeder Webentwickler kennt das Problem: Valide programmiert, doch verschiedene Versionen des Internet-Explorers und ältere Browser wie der Netscape 4, stellen das Layout teilweise anders dar als z.B. der standardkonforme Firefox. Hier hilft meist nur der Einsatz einer Browserweiche, die einem bestimmten Browser ein spezielles Stylesheet zuweist. Das Stylesheet enthält nur die Eigenschaften die der “Problem-Browser” auch versteht. Es gibt jedoch auch die Möglichkeit bestimmte Browser komplett auszuschließen, das trifft recht oft auf Browser wie den Netscape 4.x oder den IE 4.x auf Grund ihrer schlechten CSS Unterstützung zu. Insofern die Anzahl der Besucher einer Website die diese Browser noch nutzen recht hoch ist, sollte allerdings auch hier ein separates Stylesheet eingebaut werden. Die Browserweiche wird im Head-Bereich der Site eingefügt und nur von dem gezielt angesprochenen Browsers interpretiert. Hierzu gibt es verschiedenen Möglichkeiten, beginnen wir mit dem zuweisen von Styles für die verschiedenen IE Versionen: vollständigen Artikel lesen…

Heute veröffentlichte Apple seinen Webbrowser Safari in Version 3.1 für Mac OS X sowie Microsoft Windows.

Safari 3.1 ist der erste Browser der sowohl Video- und Audio-Tags in HTML 5 als auch CSS Animationen unterstützt. Die Unterstützung von CSS Web Fonts eröffnet Webdesignern neue typografische Möglichkeiten bei der Gestaltung von Websites

, so Apple in der Pressemeldung.

Da kann man hoffen, dass die anderen Hersteller von Webbrowsern nachziehen und sich dabei auch alle beteiligten an die festgelegten Standards halten.

Detail-Informationen zum Update gibt es hier.

Um vor eine h1 Überschrift eine Grafik zu positionieren ist folgendes CSS erforderlich:

Das Padding und der Pfad zur Grafik sind natürlich individuell zu setzten. Die letzten beiden background Angaben (left und center) geben die Position der Grafik an, in diesem Fall links neben dem Element und vertikal zentriert. Die Position der Grafik kann selbstverständlich auch über Maßeinheiten wie Pixel oder Prozent gesteuert werden. Bei Pixelangaben wird die Grafik relativ zur linken oberen Ecke des Elements positioniert. Bei Prozentangaben wird ein Punkt innerhalb der Grafik, ausgehend von der linken oberen Ecke der Grafik, definiert. Wenn Sie z.B. eine horizontale und vertikale Position von 5 % angeben, wird ein Punkt innerhalb der Grafik, 5% von der linken oberen Ecke entfernt, an einer Stelle die innerhalb des Elements 5 % von der oberen linken Ecke des Elternelements entfernt liegt, positioniert. Zu guter Letzt muss für die vertikale Zentrierung ein Wert von 50% angeben werden.

Die auf Analysefehlern von Browsern basierenden Filter helfen über die @import Regel bestimmte Browser mit Stylesheets zu versorgen. Der besondere Vorteil dieser Filter ist, dass alle innerhalb einer CSS-Datei verwaltet werden können. Die Filter wurden von Tentek Celik erstellt und werden auf seiner Website detailliert beschrieben.

Eine mir oft gestellte Frage: “Wie zentriere ich mein Design im Browser?”

Als Basis dient uns ein einfaches einspaltiges Layout. Der zu zentrierende div-Bereicht heißt: “center”.

Der div-Bereich erhält in diesem Beispiel eine feste Breite und die horizontalen Ränder werden auf “auto” gesetzt:

Im Quirks-Modus erkennen der IE 5.x und 6 allerdings keine automatischen Ränder. Durch einen kleinen Hack wird die Fehlinterpretation der Eigenschaft “text-align: center” des IE zur Zentrierung genutzt.

vollständigen Artikel lesen…