Wenn Sie Bilder ohne weitere Formatierung nebeneinander einfügen, sieht dies im Code z.B. folgendermaßen aus:
<p> Hier kommen meine Lieblingsbilder:
<br>
<img src="bild1.jpg" width="px" height="px">
<img src="bild2.jpg" width="px" height="px">
<img src="bild3.jpg" width="px" height="px">
</p>
Es mag gut sein, dass diese Bilder gut auf Ihre Seitenbreite passen, dies gilt aber ggf. nur für Ihre Bildschirmauflösung sowie für die Breite des von Ihnen aufgezogenen Fensters. Versuchen Sie unten mal, die Seitengröße durch Ziehen (mit der Maus rechts unten) zu vergrößern und zu verkleinern. Ungeahnte Effekte tun sich auf, vor allem, wenn Sie vielleicht noch in die Zeile darunter Bildunterschriften geschrieben haben.
Bild 1 Bild 2 Bild 3
Haben Sie den Effekt gesehen? Nur bei einer Breite des Browserfensters von mindestens 950 Pixel passen die Bilder wie gewünscht nebeneinander, ansonsten sieht es ziemlich übel aus und die Bildunterschriften stehen auch falsch.
Sie sollten also Bilder, die Sie nebeneinander platzieren wollen, immer in eine Tabelle (ohne Rand packen). Bei kleinen Monitorauflösungen muss der Besucher dann eben ggf. nach rechts scrollen. Dies ist aber immer noch besser, als völlig unerwünschte Umbrüche zu haben. Dies gilt insbesondere, wenn Sie auch Bildunterschriften verwenden.
Tipp: Jeweils 3 Tabellenreihen für eine Bildreihe reservieren, falls Sie mehrere Bildreihen verwenden. 1 Zeile: Bilder, 2. Zeile Bildunterschriften, 3. Zeile leer, danach die nächste Bildreihe.
Der <nobr>-Tag funktioniert übrigens hier nicht. Er sollte sowieso nicht angewandt werden, da er nicht von allen Browsern unterstützt wird.
Hier also nochmals das obige Beispiel in einer Tabelle ohne Rand.
|
|
|
|
Bild 1
|
Bild 2
|
Bild 3
|
Ziehen Sie Ihr Fenster ggf. nochmals kleiner, um den Effekt und Unterschied zu oben zu sehen.