CSS

CSS-»Faux Columns« bzw. »Unechte Spalten« auf deutsch

Unechte SpaltenImmer 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 »

Min-width-Lösung für den Internet Explorer mit purem CSS – von Stu Nicholls

rasterWie 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 »

YAML – Clearing von Fließumgebungen mit .floatbox

Screenshot: YAMLHeute 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 »

CSS – Elemente absolut positionieren

kurz notiertAbsolut 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 »

CSS – Geheimnisse gelüftet

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

 

Little Boxes. Webseiten gestalten mit CSS. GrundlagenDabei schreibt er einfach und verständlich.
Little Boxes – sein Grundlagen-Buch zum Thema CSS ist sicher ebenfalls sehr lesenswert.

CSS-Schiebetürnavigation

Sliding Doors - BeispielKlaus 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) »

Quellcode-Darstellungen mit Scrollbar durch overflow:auto;

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:

Screenshot einer Quellcode-Box

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

CSS Love Child

CSS Love Child

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

IE6 min-width/max-width Hack von Cameron Moll

PfeileUm ein fluides Layout realisieren zu können, bei dem sich die Breite der Internetseite immer dem Browserfenster anpasst, dabei aber trotzdem eine minimale und maximale Breite angeben zu können, gibt es in CSS die Eigenschaften min-width und max-width.

Leider unterstützt der Internet Explorer diese CSS-Eigenschaften nicht.

Cameron Moll stellt auf seiner Website einen in seinem Buch CSS-Mastery beschriebenen Weg vor, dem Internet Explorer trotzdem ein ähnliches Verhalten beizubringen, und zwar mit Hilfe von JavaScript-Expressions. Weiterlesen »

CSS-Dateien mit Struktur

OrdnungDer Code in CSS-Dateien von Webseiten, die über CSS layoutet werden, wird oft schnell sehr umfangreich.
Um darin den Überblick nicht zu verlieren, hilft es, die CSS-Dateien zu strukturieren.
Dafür gibt es verschiedene Ansätze, von denen einige in den folgenden Artikeln vorgestellt und diskutiert werden: Weiterlesen »