WordPress & Webwork - perun.net

CSS3: Mehrspaltiger Text

Von am 27. 09. 2011 um 19:13 – Aktualisiert am 28.07.2012 um 18:09

In diesem Artikel werden einige Möglichkeiten vorgestellt, mit denen man mehrspaltige Texte, wie man sie zum Beispiel aus den Zeitungen kennt, realisieren kann.

Eine einfache Möglichkeit um mehrspaltige Artikel zu erstellen, wie man sie aus den Zeitschriften kennt, wünschen sich einige Webworker schon seit langer Zeit. In der Vergangenheit war das nur mit diversen Tricks oder manuell möglich. Entweder hat man auf Javascript-Lösungen zurückgegriffen, wie zum Beispiel Columnizer jQuery Plugin oder man hat die Spalten selber definiert, mit floats gearbeitet und manuell die Texte auf die jeweiligen Spalten verteilt.

Mit dem CSS Multi-column Layout Module von W3C gibt es seit einiger Zeit den Ansatz, dass Browser die mehrspaltigen Inhalte unterstützen sollen. Hier ein Beispiel:

Ich bin der Text in der ersten Spalte… Lorem Ipsum und hast du nicht gesehen.

Ich bin der Text in der zweiten Spalte… Lorem Ipsum und hast du nicht gesehen.

Hier der entsprechende Code: 

div {
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-rule: 1px dotted #999;
-webkit-column-rule: 1px solid #999;
column-rule: 1px solid #999;
border: 1px solid #ddd;
padding: .5em;
}

Das ganze wird von Firefox (bzw. aktuellen Geckos), Google Chrome, Opera und dem Internet Explorer 10 unterstützt. Unter Create Columns Easily With The CSS3 Multi-Column Layout Module gibt es einen sehr ausführlichen Artikel zu diesem Thema und dort werden auch unter weiterführenden Links Javascript-Lösungen vorgestellt.

WordPress und Mehrspaltigkeit

Auf 6 Ways to Display WordPress Post Content in Multiple Columns werden Lösungen vorgestellt, wie man auch in WordPress mehrspaltiger Artikel realisieren kann.

Auf Texto.de wird eine einfache Lösung vorgestellt, wie man mit eigener Funktion und Shortcodes manuell Spalten generieren kann.

Links zu dem Thema

Diesen Artikel weiterempfehlen oder später lesen:

auf Kindle (später) lesen

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS, WordPress
Tags:
, ,  
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

7 Kommentare

  1. 1. – Steffen

    Kommentar vom 27.09.2011 um 20:33

    Vielen Dank für den Hinweis.
    Den CSS-Code werde ich demnächst einsetzen.

  2. 2. – JUICEDaniel

    Kommentar vom 28.09.2011 um 12:34

    Cool – danke! Ein mehrspaltiges Layout ist schon längst überfällig. Wann gibt's das endlich mal nativ in ein CMS oder Theme integriert?

  3. 3. – (noch ein) Steffen

    Kommentar vom 29.09.2011 um 16:59

    Super Tipp! Vielen Dank, dafür – über entsprechende, leicht zu implementierende Lösungen mache ich mir schon seit längerem Gedanken! Werde es mal ausprobieren! Jetzt ist bloß noch die Frage, wie ältere Browser solches CSS präsentieren!? Grüße

  4. 4. – Agy

    Kommentar vom 22.10.2011 um 22:11

    Sehr cooler Tip, danke dafür. Werd dann gleich mal sehen, ob ich das umgesetzt bekomme!

  5. 5. – WordPress: mehrspaltiger Inhalt auf der Startseite | WordPress & Webwork

    Pingback vom 12.11.2011 um 15:46

    [...] Ich habe bereits vor einigen Wochen einen Artikel zum Thema mehrspaltiger Text geschrieben: CSS3: Mehrspaltiger Text. Dort wird nicht nur die CSS3-Lösung vorgestellt sondern es werden in den weiterführenden Links [...]

  6. 6. – Viktor

    Kommentar vom 09.12.2011 um 18:16

    Vielen Vielen Dank!

  7. 7. – anja

    Kommentar vom 13.12.2012 um 14:14

    Schönen guten Tag – bin absoluter Neuling, an welcher Stelle in meinem Theme (twenty eleven) setze ich den Code ein? Vielen Dank

Hinweis:
WordPress 3.5 für Autoren & Redakteure
Der schnelle und unkomplizierte Einstieg auf 44 DIN-A4-Seiten

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.