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 „Mein CSS-Layout macht nicht, was ich will...“
Optionen

Zu deinem ersten Problem (css)... ein Punkt woran es wahrscheinlich krankt ist der Umstand, dass Du im Image-Tag keine Dimensionen der Bilder angibst (also Höhe und Breite). Viele Browser haben beim Seitenaufbau da etwas Probleme mit. Du könntest den Punkt umschiffen, indem Du die Dimensionen im Tag angibst... der Code hierzu sollte (aus dem Gedächtnis) so aussehen:

$_dim = getimagesize ( $_file );

echo '<img src="', $_file, '" alt="" ', @$_dim[3], ' />';

Damit weiß der Browser schon, bevor er das Bild geladen hat, wieviel Platz er dafür einplanen muss. Der andere Punkt mit dem zentrieren ist da etwas hakeliger. Lasse zuerst einmal im css die Angabe position:relative weg, diese ist ohnehin wirkungslos, da Du keine Angaben über top, left, right und bottom machst, Elemente sind standardmäßig immer relativ positioniert. Dann probiere mal für die Box folgende Angabe einzubauen:

padding: auto;

und erstelle noch eine CSS-Klasse für die Bilder in der Box mit:

margin:auto;
display:block;


Was die Geschichte mit dem 2. Punkt (Diashow) angeht, so ist mir das Problem nicht so ganz klar.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Ist beantwortet. xafford