CSS

Immer wieder ein Klassiker: Die Frage, wie man mit CSS zwei gleich lange nebeneinander stehende Spalten realisieren kann.

Die Antwort: eigentlich gar nicht! Für die Lösung muss getrickst werden.

Einen Weg zeigt der Artikel Faux Columns von Dan Cederholm bei A List Apart.

byteshift, eine Webdesign-Agentur aus Berlin hat den Artikel ins Deutsche übersetzt:

Er ist hier unter dem Titel “Unechte Spalten” zu finden »

Dirk Jesse hat seine CSS-Layout-Vorlage weiter optimiert und heute die Version 2.5.1 veröffentlicht.
Insbesondere unterstützt die neue YAML-Version explizit den ersten Release Candidate des Internet Explorer 7.

Eine genaue Auflistung der Änderungen finden sich im YAML-Changelog.

Übrigens: Dirk Jesse schreibt gerade an dem Buch »CSS-Layouts - Praxislösungen mit YAML«, das bald im Galileo-Verlag erscheinen und den Umgang mit YAML ausführlich dokumentieren wird.

Wie schon im Artikel IE6 min-width/max-width Hack von Cameron Moll beschrieben, unterstützt der Internet Explorer die CSS-Eigenschaft min-width nicht, mit der man die minimale Breite eines Elementes angeben kann.

Lösungen gibt es in Form von JavaScript und CSS-Expressions.

Stu Nicholls hat für das Problem eine Lösung entwickelt, die auf reinem CSS basiert und auf seiner CSS-Play -Webseite zu finden ist unter: Min-Width for Internet Explorer.

Die Lösung ist zwar nicht ganz neu, ich möchte sie hier aber trotzdem nochmal in der deutschen Übersetzung darstellen.

Zuerst einmal sind hier die funktionsfähigen Versionen für

1. InternetExplorer im QUIRKS-Mode - linksbündiges Layout
2. InternetExplorer im STANDARD-Mode - linksbündiges Layout
3. InternetExplorer im STANDARD-Mode - zentriertes Layout
4. Mac IE5 - zentriert
5. Mac IE5 - linksbündig & transparente Inhaltsbox

Die notwendigen HTML- und CSS-Definitionen lassen sich direkt dem Quelltext der jeweiligen Seiten entnehmen. (Weiterlesen »)

Heute habe ich mal wieder in der Dokumentation des CSS-Frameworks YAML gestöbert und hatte ein absolutes AHA!-Erlebnis beim Lesen des Abschnitts “Beispiele zum Clearing von Fließumgebungen mit .floatbox“.

Um Floats auf einen Text-Absatz oder den Text bis zur nächsten Überschrift zu beschränken, bedarf es nur der Zuweisung der CSS-Klasse .floatbox für den Textabsatz oder einen DIV-Container, der die Float-umgebung umschließt und an dessen Ende alle gefloateten Elemente automatisch ge”cleart” werden. (Weiterlesen »)

Absolut positionierte Elemente werden aus dem normalen Seitenfluss gelöst.
Ihre Position wird nicht durch vorher notierte Elemente beeinflusst. Sie “schweben” sozusagen über allen anderen Elementen des HTML-Dokuments.

Ihre Position wird immer von der linken oberen Ecke des nächstgelegenen Eltern-Elementes bestimmt, welches absolut, fixed oder relativ positioniert wurde. (Weiterlesen »)

Peter Müller enthüllt in seinem Beitrag CSS: Der Flow und die Positionierung auf akademie.de die Geheimnisse der CSS-Positionierung.

Dabei schreibt er einfach und verständlich.
“Little Boxes“ - sein Grundlagen-Buch zum Thema CSS ist sicher ebenfalls sehr lesenswert.

Klaus Langenberg hat sich die Mühe gemacht und den bei Alistapart veröffentlichten Artikel “Sliding Doors of CSS” von Douglas Bowman ins Deutsche übersetzt.

Der Artikel beschreibt, wie man mit Hilfe von CSS eine ansprechende horizontale Tab-Navigation gestaltet. Dabei werden Hintergrundbilder verwendet, die sich wie Schiebetüren ineinander schieben, so dass jeder Tab so lang ist wie der in ihm enthaltene Text.

Teil 1 (Die Grundlage) »
Teil 2 (Weiterentwicklung der Technik) »

Das CSS-Framework YAML wurde wieder um einige neue Features erweitert.
Insbesondere unterstützt die neue Version 2.4 auch den (bisher nur als beta-Version erschienenen) Internet Explorer 7.
Zudem stellt Dirk Jesse nun Subtemplates zur Verfügung, mit denen innerhalb einer Spalte Inhalte nebeneinander dargestellt werden können. (also spaltig innerhalb der Haupt-Spalten)

Bei der Anzeige von Quellcode innerhalb von Webseiten stellt sich oft das Problem, dass der Quellcode, der normalerweise in einer Zeile steht, länger ist, als die Inhaltsspalte der Website breit.

Praktisch ist es dann, wenn das Element, in welchem der Quellcode dargestellt wird, automatisch einen horizontalen Scrollbalken einblendet, wenn die Zeile breiter ist, als das umschließende Element, wie hier zu sehen:

Dazu genügt es, für das Element, innerhalb dessen der Quellcode angezeigt wird, die CSS-Definition overflow:auto; zu notieren! (Weiterlesen »)

Cameron Adams, The Man in Blue, hat ein Tool kreiert, mit dem die Inhalte einer Website mit dem CSS einer anderen Website verschmelzen: CSS Love Child.

Witziges Tool :o)
Leider habe ich noch keine Kombination gefunden, bei der das Ergebnis auch nur halbwegs ansprechend aussah …

via CSS Beauty