Vertikal zentrieren mit CSS

Die vertikale Zentrierung von einzelnen Objekten in einem CSS-Container war und ist ein Problem, da diese Technik von CSS eigentlich nicht vorgesehen ist. In standardkonformen Browsern gibt es die Möglichkeit, mit display:table, display:table-cell zu arbeiten und mit vertical-align: middle zu zentrieren. Allerdings versteht der Internet Explorer dieses Konzept nicht, er muss also mit Hacks überlistet werden. In einem Artikel von Jeena Paradies werden einige der Konzepte vorgestellt; nachfolgend die Links, die im Artikel und in den Kommentaren genannt werden: »Vertical Centering in CSS« (mit ausführlicher Anleitung), »Shrink-wrap and Center« (nur Beispiel, ohne Anleitung), »CSS vertical centering using float and clear« (ebenfalls nur Beispiel).
--> Seite besuchen

YAML - CSS-Framework für Typo3

YAML (Yet Another Multicolumn Layout) ist ein CSS-Framework für mehrspaltige, tabellenlose CSS-Designs von Dirk Jesse. Das Framework kann unter der Creative Commons Lizenz frei verwendet werden, solange sich in der Homepage ein Link auf YAML befindet, es können aber auch kommerzielle Lizenzen erworben werden, die keinen Link erfordern. Auf den Seiten von YAML finden Sie ausserdem eines der besten Tutorials zu CSS-Layouts in deutscher Sprache. Absolut empfehlenswert! Dieter Bunkerd wiederum hat YAML in ein Typo3-Template integriert und beschreibt die Implementierung in einem informativen Workshop, der zudem auch auf einige wichtige Extensions eingeht, zum Beispiel tt_news, google-sitemap und mehr.
--> Seite besuchen

Yet Another Multicolumn Layout

Yet another Multicolumn Layout oder kurz YAML ist ein hervorragendes CSS-Framework von Dirk Jesse. Dirk liefert eine detaillierte Anleitung mit, so dass man den Aufbau und die Verwendung der einzelnen Templates und CSS-Dateien leicht analysieren und an eigene Erfordernisse anpassen kann. Das Framework bietet browsersichere, weitgehend barrierefreie Templates für ein-, zwei- und dreispaltige Webseiten, getestet unter allen wesentlichen Browsern (sogar in den Betas von Internet Explorer 7). Insbesondere Dirks Ausführungen zum Clearing haben mich immens beeindruckt - das Problem des absoluten Clearings in nicht floatenden Spalten wird wirklich genial umschifft. Das Framework steht unter der Creative Common Licence, das heisst, jeder der es verwendet, muss auf yaml.de verlinken und kann es ansonsten frei verwenden. Dirk bietet aber auch eine kommerzielle Lizenz (zu den Nutzungsbedingungen).
--> Seite besuchen

Learn CSS Positioning in Ten Steps

Ein interessantes Tutorial von Patrick Fitgerald über die Postionierungsmöglichkeiten von CSS 2: postition: static, relative und absolute, jeweils einzeln und in Kombination. Sehr knappe und anschauliche Darstellung; sie zeigt sehr schön die Kombinationsmöglichkeiten und die Grenzen der jeweiligen Technik auf. Leider nur in Englisch.
--> Seite besuchen

CSS-Layout Gala

Alessandro Fulciniti veröffentlicht unter diesem Namen 40 CSS-Layout-Varianten zum »Mitnehmen« – sprich, zum kostenlosen Download. Die Layouts sind das Ergebnis einer Artikelserie bei pro.html.it (leider in Italienisch), wobei es darum ging, bei gegebenem HTML-Markup soviel Layouts wie möglich nur über CSS zu erstellen.
--> Seite besuchen