Grenzen von float sprengen

Deaktiviertes Javascript

Die beiden Klassen weisen Sie nach Bedarf den Elementen zu. Damit jQuery Masonry jetzt die Spalten richtig verteilt, geben Sie bei der Konfiguration des Plug-ins noch die Breite der schmaleren Spalte an, wobei Sie hier wieder von der Gesamtbreite, also zuzüglich padding und border ausgehen (215px + 2*5px + 2*1px) und einen margin (10px) dazurechnen müssen:

$('#galerie').masonry({
itemSelector: 'li',
columnWidth: 247,
isAnimated: true
});

Link-Tipps

css-tricks.com/9048-float-center robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks masonry.desandro.com masonry.desandro.com/docs/animating.html www.modernizr.com msdn.microsoft.com/en-us/ie/hh272902 www.adobe.com/devnet/html5/articles/css3-regions.html

Hier wurde außerdem isAnimated: true ergänzt. Damit wird die Neuanordnung der Elemente, die bei einer Größenänderung des Browserfensters stattfindet, schick animiert. Übrigens können Sie diese Animation bei der Anordnung der Elemente auch über CSS3 Transitions durchführen und nur, falls diese nicht funktionieren, auf die auf Javascript basierende Animation zurückgreifen.Um herauszufinden, ob der Browser CSS3 Transitions unterstützt oder die Fallbacklösung benötigt wird, lässt sich Modernizr einsetzten. Ein Beispiel dazu zeigt die Demoseite von jQuery Masonry.

Deaktiviertes Javascript

Das Layout basiert auf Javascript -aber was tun, falls Javascript deaktiviert ist? Es sollten in diesem Fall zumindest die Inhalte benutzbar bleiben.Um alternative Formatierungen bei deaktiviertem Javascript bereitzustellen, bietet sich Modernizr an. Binden Sie Modernizr in den Kopfbereich des Dokuments ein:

<script src="js/modernizr_custom.
js"></script>

Außerdem ergänzen Sie eine Klasse in Ihrem HTML-Element:

<html class="no-js">

Modernizr ersetzt diese Klasse durch js, sofern Javascript aktiviert ist. Damit lassen sich über .no-js #galeria li eigene Formatierungen für deaktiviertes Javascript definieren - beispielsweise könnte es sinnvoll sein, statt auf float zur Anordnung der Elemente auf display: inline-block zurückzugreifen:

.no-js #galeria li {
float: none;
display: inline-block;
}

Eine Finetuning des Layouts bei deaktiviertem Javascript ist sicher ein zu großer Aufwand, aber eine akzeptable und benutzbare Basisdarstellung sollte sich auf diesem Wege schnell erzielen lassen.Masonry bietet eine Menge weiterer schöner Möglichkeiten - so lässt es sich beispielsweise mit dem Plug-in Infinite Scroll kombinieren, bei dem alle Inhalte innerhalb einer langen Seite dargestellt werden, wobei diese aber dynamisch nachgeladen werden.

Möglichkeiten mit CSS 3

Bei den Layoutoptionen offenbart sich, was CSS3 zu bieten hat. So beschreiben gleich eine Reihe von Working Drafts die unterschiedlichen neuen Gestaltungsmöglichkeiten. Allein der Internet Explorer 10 unterstützt in seiner neuesten Preview fünf:

  • Über CSS Regions kann man Texte beinahe völlig frei anordnen und fließen lassen. CSS Regions sollen Magazin-ähnliche Layouts ermöglichen. Eine CSS-Regions-Demoseite zeigt Text, der ungewöhnlich fließt, etwa in Herz- oder Kreisform.
  • Das Grid-Layout-Modul vereinfacht die Anordnung von Elementen im Raster.
  • Über das Multicolumn-Modul können Sie Text automatisch auf Spalten aufteilen - Sie geben nur die Anzahl oder die Breite der Spalten vor und den Rest erledigt der Browser automatisch.
  • Mit dem FlexBox-Layout-Modul lassen sich grundlegende Aufteilungen leicht festlegen. Häufige Layoutprobleme wie eine immer unten befindliche Fußzeile oder auch eine vertikale Zentrierung bei unbekannter Höhe des Elements werden damit zum Kinderspiel.
  • Schließlich ermöglichen die positionierten Floats eine ganz freie Positionierung von Elementen, die dann vom Text umflossen werden.
Diese Möglichkeiten haben außer derletzten gemeinsam, dass sie garantiert floatfrei sind und ein intuitiveres Arbeiten ermöglichen als derzeit. Leider ist ihnen ebenfalls gemeinsam, dass die Browser-unterstützung derzeit noch zu mager ist, um sie für vollständige Seitenlayouts einzusetzen. So werden Sie also eine Weile noch zu Tricks greifen müssen, um die Beschränkungen von float zu umgehen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…