Homepage selbermachen 7.848 Themen, 35.566 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
Ist beantwortet. xafford
Rheinlaender xafford „zu 1: Google mal nach HEREDOC... das ist eine alternative Syntax für das...“
Optionen

Soooo, letzte Woche hab ich das Buch bestellt, aber ziemlich viel hab ich schon durch Deinen Code gelernt, in dem ich auch herrlich rumgematscht hab. Wahre Testorgien hab ich gefeiert. :-))
Ich hab jetzt also noch zusätzlich eingebaut, dass der Ordner auch als Variable übergeben wird und ich hab die Thumbnail-Übersicht quasi wieder zurückgeändert. Als Hintergrundbild kann man denen nicht so einen schönen Rahmen verpassen, und den wollte ich haben - da bin ich ja stur. Das "Zentrierproblem" hab ich gelöst, indem ich die margin-Werte jetzt anhand der Dimensionen der Thumbnails berechnen lasse.

Eine Sache hat noch nicht funktioniert: das Sortieren des Arrays nach Aufnahmezeitpunkt. 'datetime' hat immer den Wert 0 gehabt. Ich hab dann $ordner.DIRECTORY_SEPARATOR.$name durch $_fullpath ersetzt, dadurch wurde schonmal der Wert ausgelesen. Außerdem hab ich das (int) bei der $_timestamp-Zuweisung entfernt, weil dadurch 'datetime' auf die Jahreszahl beschnitten wurde. Zum Sortieren hab ich Ochse den halben Sonntag mit uasort und array_multisort rumprobiert, die Ergebnisse waren teilweise sehr, sagen wir, unerwartet. Eben hab ich dann nochmal in Ruhe drübergeguckt und gemerkt, dass 'datetime' ja der key ist und ich ganz simpelst ksort nehmen kann.

Das nur mal als Rückmeldung, ich danke Dir furchtbar herzlich und
zu 2: Nicht auf mich schießen ;o)
dafür hast Du, was man auf dem kleinen Foto hier im Forum erkennen kann, zuwenig Ähnlichkeit mit 'nem Holzvogel. ;-)

Nochmal Danke, Danke, Danke!
Rheinlaender

bei Antwort benachrichtigen