Ansatz für eine flexible Bildergalerie gesucht

[Peter]

Hallo in die Runde!

Gibt es eine Möglichkeit das sich eine Reihe Bilder, mit jeweils zwei/drei Zeilen Text darunter, wie ein Fließtext verhält?

Ich möchte, dass in unterschiedlich breiten Browserfenstern, die Breite maximal mit Bildern ausgefüllt wird.

Ich möchte also leere Ränder bzw. rechts/links-scrollen verhindern.

Perfekt wäre natürlich, wenn ältere Browserbenutzer darunter nicht 'leiden' würden...

Hat jemand eine Idee für so eine "eierlegende Wollmilchsau" ?

Vielen Dank im voraus

Peter

[L00NIX]

Gibt es eine Möglichkeit das sich eine Reihe Bilder, mit jeweils
zwei/drei Zeilen Text darunter, wie ein Fließtext verhält?

Ja, die CSS-Eigenschaft float sollte die helfen.

Beispiel:

<div style="float:left; width:100px;">
 <img style="width:90px;height:80px;" src="img/t.jpg" alt="T"/>
 <p>
  Text in ein, zwei Zeilen
 </p>
</div>

Das ganze sechsmal hintereinander und fertig.

Ich möchte, dass in unterschiedlich breiten Browserfenstern, die
Breite maximal mit Bildern ausgefüllt wird.

Ist in dem oberen Beispiel der Fall. Es wird umgebrochen, sobald kein Platz mehr ist.

Ich möchte also leere Ränder bzw. rechts/links-scrollen
verhindern.

Wenn die Bilder nicht größer sind (inklusive Innen- und
Außenrändern), als das Fenster breit ist, sollten keine horizontalen
Balken entstehen.

Perfekt wäre natürlich, wenn ältere Browserbenutzer darunter nicht
'leiden' würden...

Ich denke, diese Lösung ist für alle Altersklassen gleich gut
zugänglich. :-))

Aber ältere Browser (4er) haben natürlich(TM) Probleme damit. :-(

Hat jemand eine Idee für so eine "eierlegende Wollmilchsau" ?

Du könntest Browsersniffing betreiben und verschiedene Seiten
anbieten.

Gruß
L00NIX

[StefanD.]

Wow! Genau DAS hatte ich auch soeben gesucht! Danke!

Wie würde es denn bei den alten Browsern aussehen?
Wenn das "float" einfach ignoriert wird, dann stehen ja die divs alle untereinander, weil es Block-Elemente sind?! Angesichts des geringen Vorkommens dieser Browser ist das sicherlich hinnehmbar, denke ich.

Grüße
StefanD.

[L00NIX]

Wie würde es denn bei den alten Browsern aussehen?

Diese Frage kannst du dir selbst beantworten, indem du die Seite in den
entsprechenden Browsern testest.

Wenn das "float" einfach ignoriert wird, dann stehen ja die divs alle
untereinander, weil es Block-Elemente sind?! Angesichts des geringen
Vorkommens dieser Browser ist das sicherlich hinnehmbar, denke ich.

SelfHTML sagt dazu:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

Es werden sogar die 4er Versionen unterstützt. Wie das aber genau
aussieht, solltest du lieber testen.

Ich persönlich würde alles W3C-konform machen und dann mit zusätzlichen
CSS-Dateien die Bugs browserspezifisch abfangen, sofern das wirklich
nötig ist.

Gruß
L00NIX

[Peter]

Habe es gerade teilweise durchgetestet:

Mozilla / Firefox ab 1.0 und Netscape ab 6.0 brechen es wie beschrieben um,

ältere Netscape Versionen reihen die Bilder hintereinander auf,

Internet Explorer Mac älter als 5.5 basteln eine Treppe...

bei Opera (alle Versionen) wird zwar umgebrochen, aber sozusagen zu spät. Es rutschen ein bis zwei Bilder raus.

Immerhin wird der Inhalt von allen komplett dargestellt, auch wenn es teilweise merkwürdig aussieht.

Ich werde mal mit Tabellen als Begrenzung oder zusätzlichen div's experimentieren.

Viele Grüße

Peter

[Peter]

Kommando zurück!

wenn der Inhalt in einer Tabelle mit 100% Breite ist, wird er überall korrekt umgebrochen.

Selbst im IE 5 für den Mac, der sonst ständig rumzickt...

Super!

[StefanD.]

Na da gehts doch! :-)

Meine neu überarbeitete Homepage ist jetzt offen!
Da hab ich das nun auch umgesetzt:

http://www.foto-stefan.de/fotos-reiseberichte.htm

Wichtig ist auch, dass die Blöcke alle die gleiche Höhe haben.

Du fragtest nach der eierlegenden Wollmilchsau?!?
Kannst du kostenlos downloaden unter http://jalbum.net/ :-)
Das Skin "Exhibit Plus" setzt die hier diskutierte Technik in sauberem XHTML um.

Grüße
StefanD.

[Peter]

ARRRGHH!

Manchmal sieht man den Wald vor lauter Bäumen nicht...

Danke!!! Ich hatte float von vornerein ausgeschlossen, da ich damit schoneinmal im Zusammenhang mit margin und clear irre Probleme hatte - bis zu Abstürzen des Netscape 4...

Da aber in diesem Fall das Bild jeweils die Größe vorgibt dürfte das wirklich unproblematisch sein.

Werde es gleich ausprobieren.

1000 Dank für Deine suuuuuperschnelle Antwort!!!

Peter