Rasterförmige Anordnung von Bildchen mit Text

[blumentopf]

Hallo,
ich möchte in einer Art Katalog eine größere Anzahl von kleinen Bildchen mit je ein paar einzelnen Worten Text gitterförmig anordnen.
Bislang habe ich das so realisiert, dass die einzelnen Blöcke je in einem span oder div zusammengefasst werden, der dann absolut positioniert wird.
Ich fände es jedoch sehr komfortabel, wenn zur leichteren Austauschbarkeit die einzelnen Objekte einfach in der Reihenfolge erschienen, in der sie im Quelltext aufgelistet sind, ohne absolute Positionierung.
Das funktioniert aber nur vertikal, da ein div immer eine neue Zeile anfängt.
Die Objekte erscheinen dann also nur untereinander, nicht nebeneinander.
Auch wenn ich es mit span versuche, bleibt dies so, da der Text in den 3 Zeilen unter dem Bild stehen soll, und somit innerhalb des spans ein Zeilenumbruch stattfindet.

Gibt es eine Möglichkeit, mehrere Blöcke aus Text und Bild mit internem Zeilenumbruch in einer (und dann auch in mehreren) Zeilen aufzureihen, oder muss man dafür eine Tabelle verwenden?

Momentane Lösung:
<div name="Inhalt" id="e" style="position:absolute;left:200px;top:200px;height:600px;">

<div id="U1" style="position:absolute;left:000px;top:00px;width:180px;">  
	<img alt="Bild 1" src="bilder/bild1.jpg" style="height:100px;">  
	<br>Bild 1 <br>blabla<br>  
	<a href="javascript:hide('Inhalt');show('D1');">Details</a>  
</div>  
<!--bzw. mit span statt div-->  
<span id="U2" style="position:absolute;left:200px;top:00px;width:180px;">  
	<img alt="Bild2" src="bilder/bild2.jpg" style="height:100px;">  
	<br>Bild 2<br>blabla<br>  
	<a href="javascript:hide('Inhalt');show('D2');">Details</a>  
</span>  
  
.  
.  
.  
usw.  
.  
.  

</div>

Vielen Dank für die Hilfe und Grüße

[Der-Dennis]

Hallo blumentopf,

im <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=SelfHTML-Artikel zur Positionierung> solltest Du Deine Antwort finden. Schaue Dir insbesondere den Absatz zu http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float an.

Gruß, Dennis

[Gunnar Bittersmann]

@@Der-Dennis:

nuqneH

im <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=SelfHTML-Artikel zur Positionierung> solltest Du Deine Antwort finden. Schaue Dir insbesondere den Absatz zu http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float an.

Nö, schau dich besser nach einer Alternative um. Besonders, wenn die Bilder unterschiedlich hoch oder der Text darunter unterschiedlich lang ist.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Nö, schau dich besser nach einer Alternative um.

Nochmal ohne Sprung in der Schü^WPlatte: Alternative

Qapla'

[Tom]

Hello Gunnar,

Nochmal ohne Sprung in der Schü^WPlatte: Alternative

Das wird mir immer unheimlicher mit Dir ;-)
Ich muss mir doch mal angewöhnen, bevor ich irgendwo anders suche:

"Schlag nach bei Bittersmann"

Geniale Fleißarbeit. Ich muss mich gleich mal durchklicken, was ich da noch alles finde.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[blumentopf]

Hallo Dennis,
vielen Dank für den superschnellen Tipp.
Float war exakt die Funktion nach der ich gesucht habe, jetzt habe ich genau was ich wollte, und kann einfach eine Liste anlegen, die sich je nach Fenstergröße selbst auf mehrere Zeilen verteilt.
Herzliche Grüße!

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

vielen Dank für den superschnellen Tipp.

Der erstbeste Tip ist zwar der erste, aber nicht der beste.

Float war exakt die Funktion nach der ich gesucht habe, jetzt habe ich genau was ich wollte, und kann einfach eine Liste anlegen, die sich je nach Fenstergröße selbst auf mehrere Zeilen verteilt.

Eine Liste war exakt das, wonach du gesucht hast. Float eher nicht, denn „je nach Fenstergröße selbst auf mehrere Zeilen verteilt“ ist damit bei nicht gleichhohen Listitems problematisch.

Qapla'

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

ich möchte in einer Art Katalog eine größere Anzahl von kleinen Bildchen mit je ein paar einzelnen Worten Text gitterförmig anordnen.

Eine Auf_list_ung also.

Bislang habe ich das so realisiert, dass die einzelnen Blöcke je in einem span oder div zusammengefasst werden

„Ich möchte furchtbar gern eine Liste sein. Bitte bitte lass mich doch!“ (frei nach wahsaga)

Qapla'