Homepage selbermachen 7.847 Themen, 35.565 Beiträge

Mein CSS-Layout macht nicht, was ich will...

Rheinlaender / 11 Antworten / Flachansicht Nickles

Tach zusammen!

Ich hab da mal wieder ein paar Problemchen. Der Hintergrund:
Ich habe eine Fotogalerie, die ich bisher immer komplett in html gehalten habe, auf PHP umgestellt. PHP liest jetzt mittels scandir() (Danke Xaff ;-)) das Verzeichnis aus, sortiert mir dank der EXIF-Daten die Fotos nach Erstellungsdatum (damit ich auch Fotos von mehreren Kameras in einer chronologischen Reihenfolge habe, ohne groß Hand anlegen zu müssen) und stellt die Thumbnails der Bilder auf einer Übersichtsseite dar. Das funktioniert soweit auch alles ganz toll.

Da aber die Fotos im Hoch- und Querformat gemischt sind, versuche ich für ein halbwegs ansehnliches Layout die Thumbnails (lange Seite: 120px + Rahmen) in 150x150 großen divs (float:left;) darstellen zu lassen.
Komischerweise kommt es aber teilweise beim Laden der Seite vor, dass die Bilder einzeln oder zu zweit (oder viert, oderoder...) nebeneinander dargestellt werden, anstatt die Seitenbreite auszunutzen. Nach einem refresh ist alles ok.
Außerdem versuche ich die Thumbs in den divs mit text-align:center; und vertical-align:middle; zu zentrieren. Ersteres geht, vertikal geht in die Hose.
Woran kann das liegen?

Hier der Code, der für jedes Foto generiert wird:


<div style="background: #7f0000; height:150px; width:150px; position:relative; text-align:center; vertical-align:middle; float:left; margin:3px;">
<a class="bld" href="img.php5?bild=IMG0000.jpg" target="_blank">
<img src="bilderordner/thumbs/thIMG0000.jpg" style="border : 5px outset silver;">
</a>
</div>



Noch was, wo ich grad dabei bin dumm zu fragen - ich biete die Fotos auch als Diashow mittels JavaScript an. Bisher musste ich die Dateien alle durchgehend nummerieren und dem Script die genaue Anzahl Dateien angeben, um dann mit den Dateinamen ein Array zu befüllen. Die Diashow ging direkt los.
Jetzt lasse ich mit PHP das Verzeichnis auslesen und das Array direkt befüllen. Der Nachteil ist, dass erst alle Bilder geladen werden, bevor die Show anspringt. Kann man das umgehen?

Alter Code:

function setBilder(anzahl, datei)
{
for(var i = 0; i bilder[i] = datei + getNr(i) + '.jpg';
}


Neuer Code:

echo "var bilder = new Array(\"../../dia0.jpg\"";
foreach ($galerie as $foto) {
echo ",\"$ordner/$foto\"";
}
echo ");


Schönen Dank schonmal für jeden Gedanken, den ihr verschwendet.

Gruß
Rheinlaender
bei Antwort benachrichtigen
Rheinlaender xafford „Zu deinem ersten Problem css ... ein Punkt woran es wahrscheinlich krankt ist...“
Optionen

Erstmal riesigen Dank, das sind ja schonmal zwei vielversprechende Ansätze, die ich heute abend ausprobieren kann.
Die position:relative ist aber, glaube ich, notwendig, weil mir sonst alle Thumbnails oben links übereinander geschrieben werden, so dass nur das letzte sichtbar ist. Aber wie gesagt, ich bin mir nicht sicher, weil ich ziemlich viel rumgetestet habe. Ich werd's nochmal "verifizieren". :)

Mit der Diashow verhält es sich so, dass auf die alte Art direkt beim Laden der htm-Seite das erste Bild angezeigt wurde. Im Bruchteil einer Sekunde nach dem Klick sieht man das erste Bild, und dann im 3-Sek-Takt jedes folgende, ohne Verzögerung.
Der neue Code mit PHP braucht eh erstmal die Gedenksekunde, bis er geparst und übermittelt ist. Und dann sieht man eine Zeit lang nix außer dem Hintergrund, bis (so nehme ich wegen der Dauer an) alle Bilder im Hintergrund geladen wurden. Das ist bei >100 Bildern mit DSL 6000 noch erträglich, alles andere mag ich mir nicht vorstellen. Danach läuft die Show zügig durch. Ich bin mir jetzt nicht sicher, ob es vielleicht daran liegt, dass ich die Dateinamen schon im Deklarationsbereich in das Array schreiben lasse. Kann das sein?

Davon ab, Du hattest mir letztens "Inside PHP" von Addison-Wesley empfohlen. Das konnte ich nicht finden, auch auf der Verlagsseite nicht. Heisst das irgendwie anders? Bei Amazon gibt es andererseits ab März schon ein Buch zu PHP 6. Vielleicht sollte ich doch noch etwas warten?
Meine Achillesferse scheint aber doch CSS zu sein. Wie bei meinem obigen Beispiel finde ich da viele Dinge nicht so richtig intuitiv anwendbar. Warum funktioniert z.B. "text-align", aber nicht "vertical-align"? Ich hab auch noch nichts gefunden, wo CSS richtig gut erklärt wird. Geht anscheinend auch gar nicht... ;-)

Danke Dir nochmal!

Gruß
Rheinlaender

bei Antwort benachrichtigen
Ist beantwortet. xafford