Bildergalerien und Co.
- Freiheit für Ihre Layouts!
- Bildergalerien und Co.
- jQuery Masonry
- 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....
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.
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.
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.
