Mehrspaltige Texte sind in Print-Medien, insbesondere Zeitungen und Zeitschriften, Gang und Gäbe, aber im Web ließen sie sich bislang nur auf umständliche Art und Weise realisieren.
Mittlerweile kann man aber auch in einem ganz normalen HTML-Element dafür sorgen, dass ein Text mehrspaltig dargestellt wird. So kann man z.B. einen Text im folgenden Beispiel-Div-Element mehrspaltig realisieren.
<div class="columns"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ... </div>
Dank CSS3 funktioniert das in modernen Browsern, wie z.B. Mozilla Firefox, Google Chrome oder Opera, ohne größere Probleme. Teilweise ist dafür aber leider noch der jeweilige Präfix (-moz, -webkit usw.) nötig:
/* multi columns */ .columns { width: 100%; -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; }
Aber leider funktioniert diese Variante noch nicht in allen Browsern.
Wie man sieht, funktioniert es vor allem in älteren und sogar in der aktuellen Version vom Internet Explorer noch nicht. Erst Microsofts Internet Explorer 10 wird dieses Konstrukt verstehen, und dieser Browser erscheint womöglich sogar nur unter Windows 8.
Daher muss eine Lösung her, wie man mehrspaltige Texte auch im Internet Explorer realisiert, denn schließlich sind (leider) noch viele Nutzer mit dem Internet Explorer 8 (maximale Version unter Windows XP) und dem Internet Explorer 9 (vermutlich maximale Version unter Windows 7) unterwegs. Dafür bietet sich das JavaScript-Framework JQuery mit dem Plugin Columnizer an.
Grundsätzlich funktioniert der Customizer für JQuery wie folgt (in unserem Beispiel mit 3 Spalten):
$('.columns').columnize({ columns: 3 });
Dadurch werden 3 Div-Boxen mittels float:left nebeneinander Gelegt. Durch columns: 3 wird die Breite der Elemente auf 33% gesetzt.
Wenn man nun noch den Gap, also den Abstand, zwischen den Spalten einbauen will, kann man dies wie folgt tun:
$('.columns').columnize({ columns: 3 }); $('.column:not(.first)').css('margin-left', '20px');
Jede einzelne Spalte bekommt nämlich standardmäßig die Klasse „.column“. Die erste Spalte gehört außerdem zur Klasse „.first“. Es bekommen also alle Spalten, bis auf die erste, einen Margin (links) auf 20 Pixel gesetzt.
Nun hat man zwar einen Abstand zwischen den Spalten, aber das letzte Element rutscht in die nächste Zeile, da die Breite der Spalten bei je 33% bleibt und der Abstand dazwischen hinzukommt. Ein einfacher Workaround ist es, nachträglich die Breite der einzelnen Spalten zu verändern.
$('.columns').columnize({ columns: 3 }); $('.column:not(.first)').css('margin-left', '20px'); $('.column').width('30%');
Das funktioniert zwar, kann aber zu unvorhergesehenen Ergebnissen führen. Schöner wäre es, wenn man diese neue Breite direkt ausrechnen könnte.
$('.columns').columnize({ columns: 3 }); var gap = 20 $('.column:not(.first)').css('margin-left', gap+'px'); width = $('.columns').width() // get width of columns box widthOfCol = width*((100/3)/100)-gap // calculate width of single column $('.column').width(widthOfCol);
Nun errechnet man dank JavaScript die Breite einer einzelnen Spalte mit Hilfe der Breite der Box, die die Spalten enthält (Also die Box mit der Klasse „.columns“). Diese Breite wird mit der prozentualen Breite multipliziert und davon wird der Gap abgezogen.
Aber was passiert nun, wenn man das Fenster verkleinert oder vergrößert? (Das betrifft allerdings nur Boxen mit variablen Breiten, z.B. in Prozent.) Mit Hilfe von JQuery kann man das allerdings ebenfalls berücksichtigen.
// columns $('.column').columnize({ columns: 3, buildOnce: true // columnize once }); // gap calcGap = function() { $('.column:not(.first)').css('margin-left', gap+'px'); width = $('.columns').width() // get width of columns box widthOfCol = width*((100/3)/100)-gap // calculate width $('.column').width(widthOfCol); // set column width } calcGap(); // set gap $(window).resize(calcGap); // set gap if window resizes
Die Option „buildOnce: true“ sorgt zunächst dafür, dass beim Verändern des Fensters, die Spalten nicht neu berechnet werden (denn die Größe soll anderweitig angepasst werden). Mit Hilfe der Funktion „resize“ für das Fenster wird die die neu gefundenen Funktion, die den Gap und die Breite der Spalten errechnet, verwendet. Diese Funktion wird außerdem bereits vorher aufgerufen, also beim ersten Laden des Skripts.
Damit funktioniert die Breite der Spalten inkl. Gap auch beim Verändern der Fenstergröße wunderbar.
Dieses Skript soll nun allerdings nur im Internet Explorer bis Version 9 Verwendung finden, denn in anderen Browser kann ja das obige CSS-Konstrukt verwendet werden. Dafür muss man nur in einer if-Anweisung die Browser-Version mit Hilfe von JQuery checken.
if ($.browser.msie && $.browser.version < 10) { // below IE version 10 // ... }
Um das Skript zu erweitern und zu verbessern, sollten noch Variablen und jQuery-Ausdrücke hinzugefügt werden
Dann sieht das Skript in etwa so aus:
/* * Multi columnizer JQuery script for IE * * Requires * JQuery http://jquery.com/ * JQuery columnizer http://welcome.totheinter.net/columnizer-jquery-plugin/ * * @author Felix Griewald * @version 2012-08-14 * @url http://www.felix-griewald.de/2012/08/15/mehrspaltige-texte-mit-ie-fallback/ */ // JQuery must be loaded if (typeof jQuery != 'undefined') { jQuery.noConflict(); // prevent conflict with other libraries // $ alias jQuery (function($) { // check browser if ($.browser.msie && $.browser.version < 10) { // below IE version 10 $(function() { // wait for DOM $(document).ready(function() { // variables var box = '.columns' // name of columns box (class or id) var col = 3 // number of columns var gap = 20 // gap in px // columns $(box).columnize({ columns: col, buildOnce: true // columnize once }); // gap calcGap = function() { $('.column:not(.first)').css('margin-left', gap+'px'); // set 20px margin left width = $(box).width() // get width of columns box widthOfCol = width*((100/col)/100)-gap // calculate absolute width of single column $('.column').width(widthOfCol); // set column absolute column width } calcGap(); // set gap $(window).resize(calcGap); // set gap if window resizes }); }); } })(jQuery); // other code using $ as an alias to the other library } // other code without jQuery
Download: Multi Column IE Skript
Eingebunden wird das Ganze im HTML Header.
<head> <!-- ... --> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="js/jquery.columnizer.min.js"></script> <script src="js/MultiColumnIE.js"></script> <!-- ... --> </head>
Natürlich ließe sich das Skript weiter verbessern, z.B. in dem man das Ganze in eine oder mehrere Funktionen gießt und mit Parametern arbeitet.
Ergebnis – so sehen die mehrspaltigen Texte in verschiedenen Browsern aus:
Mozilla schreibt eine neue Browserengine. Ein kleiner test auf meiner Homepage, aber noch ist nicht viel zu sehen, soll erst Ende 2014 Beta werden.
http://markush.cwsurf.de/joomla_17/index.php/allgemeines/52-mozilla-servo
@MarkusH
Schön und gut, auch Chrome hat mittlerweile eine eigene Engine (Blink, ein Fork von Webkit). Nichtsdestotrotz nutzen viele Nutzer immer noch veraltete Browser (vor allem IE). Bis sich also neue coole Engines gut verbreitet haben dauert es immer und man benötigt solche Fallbacks. Dennoch vielen Dank für den Hinweis, das wusste ich noch nicht
Vielen Dank für dieses Beispiel, es hat mir sehr geholfen!
Hi Uwe,
das freut mich. Vielleicht gibt es ja auch in Zukunft weitere solche Artikel in meinem Blog
Hi,
schönes Sache, danke dafür.
Vllt. kannst du das Beispiel anpassen, dann vermeidet das den Fehler zu Beginn.
Eine Sache: im Beispiel oben wird „js/jquery.columnizer.min.js“ eingebunden.
Die Datei im Plugin (Version 1.6.0) heißt jquery.columnizer.js – die Datei wird also nicht eingebunden, wenn man copy&paste ohne Prüfen macht.
Grüße
Sebastian
FYI: Fehlermeldung bei nicht eingebunder Datei: ‚Das Objekt unterstützt die Eigenschaft oder Methode „columnize“ nicht‘.
Hi Sebastian,
danke für den Hinweis. Es kommt natürlich darauf an, welche Datei man einbindet. In der Regel kommen solche Libraries mit einer normalen und einer minimierten Variante. In diesem Fall hatte ich die minimized Version eingebunden, welche jquery.columnizer.min.js heißt. Natürlich funktionieren am Ende beide Versionen.
Sonst wünsche ich dir noch viel Spaß mit dem Script!