Homepage selbermachen 7.852 Themen, 35.619 Beiträge

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

Rheinlaender / 11 Antworten / Baumansicht 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
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
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
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
xafford Rheinlaender „Hallo nochmal. Ich glaube, ich muss mit einer unvollkommenen Seite leben. Auch...“
Optionen

Gib mal nen Link zu ner Beispielseite, bei CSSmuss ich immer selbst auch rumprobieren, so aus dem Kopf hakt es da bei mir meist auch.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Rheinlaender xafford „Gib mal nen Link zu ner Beispielseite, bei CSSmuss ich immer selbst auch...“
Optionen
Beispielseite
Gibt's nicht. Bei mir gibt's nur Originale. :))
Ich hab Dir da mal 'ne PN geschickt.
bei Antwort benachrichtigen
xafford Rheinlaender „ Gibt s nicht. Bei mir gibt s nur Originale. : Ich hab Dir da mal ne PN geschickt.“
Optionen

Ist beantwortet.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Rheinlaender xafford „Ist beantwortet.“
Optionen

Himmel hilf!
Da hast Du mir ja 'ne schöne Aufgabe gestellt... :o)
In ein paar Sachen wie filter_input oder wie ich die Diashow ans Laufen bringe, werde ich mich noch einlesen müssen. Aber zwei klitzekleine Fragen hab ich jetzt schon:
1. Was hat es mit diesem EOS auf sich? Mein Freund Google schmeisst mich hauptsächlich mit Canon und DSLRs zu, in Verbindung mit xml krieg ich zwar Treffer, aber keine Erklärung...
2. Wie kann ich mich jemals revanchieren?

Dankbare Grüße
Rheinlaender

bei Antwort benachrichtigen
xafford Rheinlaender „Himmel hilf! Da hast Du mir ja ne schöne Aufgabe gestellt... :o In ein paar...“
Optionen

zu 1: Google mal nach HEREDOC... das ist eine alternative Syntax für das Definieren von Strings in PHP und eignet sich recht gut für längereformatierte Strings mit Zeilenümbrüchen oder Tabs.

zu 2: Nicht auf mich schießen ;o)

Die Diashow startest Du übrigens, indem Du das Script folgendermaßen aufrufst:

script.php?slideshow=1

und filter_input ist eine neue Funktion in PHP5 zur Anwendung der (neuen) Filter auf Überhabevariablen, schau Dir am Besten mal kurz die Dokumentation auf www.php.net hierzu an.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
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
xafford Rheinlaender „Soooo, letzte Woche hab ich das Buch bestellt, aber ziemlich viel hab ich schon...“
Optionen
Als Hintergrundbild kann man denen nicht so einen schönen Rahmen verpassen

Wenn ich richtig verstanden habe was Du meinst, dann kannst Du das sehr wohl, Du darfst nur nicht den Fehler machen das als Style auf das img-Tag anzuwenden, sondern Du solltest das dann auf das a-Tag anwenden. Kann aber auch sein, dass ich Dich da falsch verstanden habe.

Ansonsten: Keine Ursache ;o)
Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen