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 „ Sowas kannst Du mit einer Angabe zu margin für die Boxen vermeiden. Das mit...“
Optionen

Hallo nochmal.

Ich glaube, ich muss mit einer unvollkommenen Seite leben. Auch mit den Dimensionen ist es Glückssache, ob die Seitenbreite ausgenutzt wird oder nicht. Das vertikale Zentrieren geht gar nicht, ich hab alle Deine Tipps in wahrscheinlich jeder erdenklichen Kombination ausprobiert. CSS saugt. Ich brauch erstmal etwas Abstand von dem Mist. In der Zeit könnte ich mir mal das PHP5-Buch bestellen. Bei Amazon gibt's das noch, hab ich gesehen.

Naja, ich finde es gibt schöneres und eingängigeres als CSS.
Alles ist eingängiger als CSS. :)
Ich kenne nur nichts, was mich meinem Ziel näher bringt, sonst hätte ich es schon ausprobiert. Hast Du 'nen Tipp für mich?

Frustrierte Grüße
Rheinlaender

bei Antwort benachrichtigen
Ist beantwortet. xafford