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
xafford Rheinlaender „Erstmal riesigen Dank, das sind ja schonmal zwei vielversprechende Ansätze, die...“
Optionen
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.

Sowas kannst Du mit einer Angabe zu margin für die Boxen vermeiden.

Das mit der Diashow kann ich Dir jetzt so wirklich auch nicht erklären, aber es dürfte eher nicht an dem gefüllten Array liegen, da ja der Browser erst einmal nicht weiß, dass dies Bilder sein sollen, die er laden muss, wenn ich den Code jetzt richtig gesehen habe (zumindest was davon zu sehen war). Hast Du vielleicht einmal einen Link zu einer Version im Netz davon?

Davon ab, Du hattest mir letztens "Inside PHP" von Addison-Wesley empfohlen. Das konnte ich nicht finden, auch auf der Verlagsseite nicht.

Kein Wunder, ich hab mich beim Titel auch total vertan...;o)... es heißt eigentlich PHP5 aus erster Hand... fällt mir auch erst jetzt wieder ein, dass ich den Fehler damals schon richtig stellen wollte, es aber schlicht vergessen habe.

Bei Amazon gibt es andererseits ab März schon ein Buch zu PHP 6. Vielleicht sollte ich doch noch etwas warten?

Hmmm, ich denke es wird relativ lange brauchen, bis PHP6 in nennenswerter Zahl bei Providern installiert ist und ich denke auch nach allem was ich bisher über PHP6 weiß, dass die Änderungen von PHP5 zu PHP6 geringer sein werden, als die Änderungen von PHP4 zu PHP5. Ergo ist es meiner Meinung nach sehr empfehlenswert sich erst einmal eingehender mit der erweiterten Objektorientierung, die mit PHP5 Einzug hielt auseinander zu setzen, dann wird das Verständnis für PHP6 leichter fallen.

Meine Achillesferse scheint aber doch CSS zu sein.

Meine auch ;O)... CSS ist immer so eine Sache, ich verlass mich ungern darauf, dass kompliziertere CSS-Layouts überall problemlos funktionieren. Ich mache dann lieber ein paar Abstriche um hässliche Hacks und Browserweichen zu vermeiden. Naja, ich finde es gibt schöneres und eingängigeres als CSS.
Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Ist beantwortet. xafford