Grenzen von float sprengen

Bildergalerien und Co.

7.12.2011 von Dr. Florence Maurice

ca. 2:45 Min
Ratgeber
VG Wort Pixel
  1. Freiheit für Ihre Layouts!
  2. Bildergalerien und Co.
  3. jQuery Masonry
  4. Deaktiviertes Javascript

Gar nichts zu unternehmen, geht in diesem Fall nicht, da hierbei das Bild den Text überlagern würde.Ein Notbehelf - es kommt immer darauf an, was für einen Aufwand man für diesen Dinosaurier unter den Browsern betreiben möchte - ist das Ausblenden des Bildes.

<!--[if lt IE 8]><style>
#bild {
display: none;
}</style><![endif]-->

Bildergalerien und Co.

Per float lässt sich ganz rasch auch eine flexible Anordnung von Bildern nebeneinander erreichen.
Per float lässt sich ganz rasch auch eine flexible Anordnung von Bildern nebeneinander erreichen.
© Internet Magazin

float eignet sich gut, um mehrere Bilder flexibel nebeneinander anzuordnen. Das Schöne dabei: Die Anordnung erfolgt automatisch. Wenn mehr Platz zur Verfügung steht, werden mehr Bilder nebeneinander dargestellt, sonst weniger.Basis für das Beispiel ist der folgende Quellcode - eine ungeordnete Liste, in der Bilder und Texte platziert sind.

<ul id="galerie"><li><h4>Bild 1</h4><img src="landschaft.jpg" alt=
"Landschaft" /></li><li><h4>Bild 2</h4><img src="landschaft.jpg" alt=
"Landschaft" /></li><!--Weitere Bilder --></ul>

Der CSS-Code sorgt für die flexible Anordnung der Bilder nebeneinander - sie werden einfach links gefloatet:

#galerie li {
list-style: none;
padding: 10px;
float: left;
}

Das funktioniert allerdings nur, solange alle Bilder dieselbe Höhe haben. Wenn sie von unterschiedlicher Höhe sind oder einmal ein Text etwas länger ist, wird das Anordnungsmuster zerstört: Das erste Bild mit einer größeren Höhe wird auch von den nachfolgenden Bildern umflossen.

inline-block - das Beste aus beiden Welten

Im gerade beschriebenen Fall empfiehlt sich der Einsatz von display: inline-block. Üblicherweise unterteilt man Elemente in Block- und Inline-Elemente. Blockelemente wie Überschriften (h1-h6), Absätze (p) bilden einen Block, das heißt, dass davor und danach ein Zeilenumbruch erfolgt. Bei typischen Inline-Elementen wie Links (a) oder Hervorhebungen (strong, em) hingegen bleibt das Element in einer Zeile mit den vorherigen und nachfolgenden Texten.

Eine Anordnung der Elemente nebeneinander in Zeilen gelingt über display: inline-block.
Eine Anordnung der Elemente nebeneinander in Zeilen gelingt über display: inline-block.
© Internet Magazin

display: inline-block ist ein wundersames Zwitterwesen: Zwar werden die so ausgezeichneten Elemente weiterhin wie Inline-Elemente nebeneinander angeordnet, doch jetzt kann man ihnen Ausmaße zuordnen. Sie können also beispielsweise width oder margin benutzen, beides Eigenschaften, die Sie normalen Inline-Elementen nicht zuweisen können.Mit inline-block erfolgt die Darstellung - der HTML-Code ist derselbe geblieben - wieder zeilenweise, wie gewünscht.

#galerie li {
display: inline-block;
vertical-align: top;
margin: 10px;
}

Der IE 7 braucht hierbei ein bisschen Nachhilfe, die Elemente benötigen haslayout und außerdem müssen Sie die Eigenschaft display auf inline umschalten. Diese Angaben sind am besten wieder in konditionalen Kommentaren untergebracht.

<!--[if lt IE 8]><style>
#galerie li {
zoom: 1;
display: inline;
}</style><![endif]-->

Ein anderer geeigneter Einsatzbereich für display mit dem Wert inline-block ist die Anordnung von Navigationselementen nebeneinander. Praktisch an inline-block ist außerdem, dass man die Elemente mit vertical-align anordnen kann. Mit vertical-align: top wird im Galeriebeispiel bewirkt, dass die Bilder einer Zeile alle dieselbe Oberkante haben. Andere Anordnungen wären vertical-align: middle (mittig) oder vertical-align: bottom (unten).Einen Nachteil hat inline-block jedoch, der allerdings nicht immer störend wirkt: So wie bei anderen typischen Inline-Elementen werden Leerzeichen zwischen den Elementen dargestellt. In unserem Beispiel wäre noch immer ein Abstand zwischen den einzelnen li-Elementen zu sehen, auch wenn margin und padding auf 0 gesetzt sind.Zur Behebung dieses Mangels könnte man die einzelnen li-Elemente direkt hinterAnzeige einander schreiben, also etwa:

<li>...</li><li>...</li>

inline-block ist sehr nützlich und liefert in Beispielen wie den eben geschilderten wesentlich bessere Ergebnisse als float. Aber man kann damit nur zeilenweise eine Anordnung realisieren. Unterscheiden sich die Elemente ganz wesentlich in ihrer Höhe, so bleiben immer Lücken, der Platz wird nicht optimal ausgenutzt.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.