Solero: Formatierung einer Bildergalerie

Hey Leute

Ich habe die letzten Nächte damit verbracht, eine Bildergalerie mit PHP zu realisieren, was für mich ein ziemlicher Aufwand war, da ich eigentlich keine Ahnung von PHP habe, aber das kommt hoffentlich noch! =)
Die Galerie funktioniert mittlerweile problemlos, nur die Aneige gefällt mir noch nicht. Mit eine While-Schlaufe werden alle Bilder eines Verzeichnisses geladen, automatisch Thumbnails erstellt und dann für jedes Bild mit echo folgendes ausgegeben:

<div id="foto"><a href="'.$sm.'"><img border="0" src="'.$thumb.'"></a></div>

wobei $sm die URL des Bildes in gross und $thumb die URL des Thumbnails ist.

Wie ihr euch sicherlich vorstellen könnt, werden nun im Browser einfach alle Bilder aneinander gereit, was zwar sehr flexibel ist, aber nach Chaos aussieht...
Mein Ziel ist es, jedes Bild von einer Box (deshalb das div...) mit einer bestimmten Höhe und Breite zu umgeben und es innerhalb dieser mittig zu platzieren. Die einzelnen Divs sollen dann einfach alle nebeneinander angezeigt werden.
Ich habe bereits alle Attribute für position, float, align, height, width, margin, padding ausprobiert aber es irgendwie nocht hingekriegt. Weiss wer, welche Eigenschaften dem div zugewiesen werden müssen?

Ich bin natürlich gegenüber anderen Lösungen auch auf, man kann das div problemlos durch etwas anderes ersetzen, wenn es damit besser funktioniert.

Danke vielmals bereits jetzt für eure Bemühungen!

mfG
Solero

  1. Hi, Solero!

    Zunächst einmal: bitte verwende semantisches Markup. Eine Bilderliste ist einer Bilder...<li>ste, in den meisten Fällen <ul>nsortiert.

    Als nächstes gehe ich davon aus, dass Deine Bilder unterschiedlich groß sind, was die Positionierung erschwert. Es gibt aber dennoch eine Möglichkeit, sie innerhalb einer Box zu positionieren, nämlich mit text-align: center und line-height in Höhe der Boxenhöhe.

    Leider funktioniert dieser Mechanismus nicht im IE, dort kann man sich jedoch schlimmstenfalls mit CSS expressions behelfen.

    Gruß, LX

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
    1. Als nächstes gehe ich davon aus, dass Deine Bilder unterschiedlich groß sind, was die Positionierung erschwert. Es gibt aber dennoch eine Möglichkeit, sie innerhalb einer Box zu positionieren, nämlich mit text-align: center und line-height in Höhe der Boxenhöhe.

      Leider funktioniert dieser Mechanismus nicht im IE, dort kann man sich jedoch schlimmstenfalls mit CSS expressions behelfen.

      Sollte schon funktionieren, wenn man das Raster nicht per float sondern per inline-block realisiert und im Internet Explorer einfach "inline" draus macht.

      1. Sollte schon funktionieren, wenn man das Raster nicht per float sondern per inline-block realisiert und im Internet Explorer einfach "inline" draus macht.

        Stimmt, ab IE7 geht das. IE6 beherrscht diesen Trick leider nicht.

        Gruß, LX

        --
        RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
  2. @@Solero:

    nuqneH

    Mit eine While-Schlaufe werden alle Bilder eines Verzeichnisses geladen, automatisch Thumbnails erstellt und dann für jedes Bild mit echo folgendes ausgegeben:

    <div id="foto"><a href="'.$sm.'"><img border="0" src="'.$thumb.'"></a></div>

    In einer while-Schleife darfst du keine (festen) IDs vergeben, da IDs dokumentweit eindeutig seinmüssen, d.h. zwei verschiedene Elemente nicht dieselbe ID "foto" haben dürfen.

    Wieso 'div'? Eine Liste ist eine Liste ist eine Liste. „Wir zeichnen sie als Liste aus […] und geben im Stylesheet an […]

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@ Qapla'

      In einer while-Schleife darfst du keine (festen) IDs vergeben, da IDs dokumentweit eindeutig seinmüssen, d.h. zwei verschiedene Elemente nicht dieselbe ID "foto" haben dürfen.

      Aber darf ich nicht in einem Dokument zwei (oder mehrere...) Elemente mit der gleichen ID haben, damit man die gleichzeitig mit CSS ansteuern kann?
      Habe das Problem nun anders gelöst, aber das würde mich allgemein interessieren.

      Wieso 'div'? Eine Liste ist eine Liste ist eine Liste. „Wir zeichnen sie als Liste aus [… und geben im Stylesheet an […]]“

      dass mit der Liste war der Knackpunkt, auf diese Idee bin ich irgendwie nicht gekommen, kA wieso, funzt jetzt aber ohne Probleme. Danke vielmals!

      mfG
      Solero

      1. @@Solero:

        nuqneH

        Aber darf ich nicht in einem Dokument zwei (oder mehrere...) Elemente mit der gleichen ID haben, damit man die gleichzeitig mit CSS ansteuern kann?

        Darfst du denn in einer Straße zwei (oder mehrere...) Autos mit der gleichen ID (Kennzeichen) haben, damit man die gleichzeitig mit einem Strafzettel belangen kann?

        Eben, wenn zwei (oder mehrere...) Autos dasselbe Kennzeichen haben, dann ist das Falschparken wohl das kleinere Problem.

        Du darfst aber durchaus in einer Straße zwei (oder mehrere...) Autos mit der gleichen Farbe haben.

        Du darfst auch durchaus zwei (oder mehrere...) Elemente mit der gleichen Klassenzugehörigkeit haben, damit … – äh nein, der Nebensatz ergibt Unsinn. Aber man kann die dann gleichzeitig <http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=mit CSS ansteuern>.

        S.a. [CLASS-ID]

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
  3. Hi,

    Mein Ziel ist es, jedes Bild von einer Box (deshalb das div...) mit einer bestimmten Höhe und Breite zu umgeben und es innerhalb dieser mittig zu platzieren.

    ggf. findest Du Anregungen in meiner Galerie, Link siehe oben. Die vertikale Ausrichtung habe ich per margin vorgenommen, da ich im PHP ja die Bildgrösse kenne. Es gibt aber auch Css-Möglichkeiten, über die wir hier schon trefflich gestritten haben - siehe Archiv oder meine variante ( die Gunnar nicht mag ;-)  ).

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
  4. Problem gelöst! Danke vielmals an alle Tipps!

    der erste Knackpunkt war, dass ich ein div anstatt eine Liste verwendet habe, funzt mit Liste ohne Probleme, bin iwie nicht selber drauf gekommen.

    Das Ausrichten habe ich mit der Variante von Joachim (die Gunnar nicht mag...^^)vorgenommen, hat prima geklappt, danke für den Tipp!

    für alle, die sichs anschauen wollen, hier die HP:Gallerie von Solero

    beachtet aber, dass sich die ganze HP noch im Aufbau befindet, es ist also normal wenn gewisse links nicht funktionieren...

    mfG
    Solero

    1. Mahlzeit Solero,

      für alle, die sichs anschauen wollen, hier die HP:Gallerie von Solero

      Danke - aber 17 Errors sind mir eindeutig zu viel ...

      MfG,
      EKKi

      --
      sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      1. @EKKi

        für alle die nicht lesen können werde ich das nächste mal ein bild posten, dass verdeutlich, dass sich das ganze noch im aufbau befindet.

        wenn du schon fehler zählst und dich darüber freust kannst du das entweder für dich behalten oder hier was produktives posten. dass (noch) nicht alles perfekt ist, weiss ich selber auch, deshalb habe ich ja auch "noch im aufbau" geschrieben...

        mfG
        Solero

        1. Mahlzeit Solero,

          für alle die nicht lesen können werde ich das nächste mal ein bild posten, dass verdeutlich, dass sich das ganze noch im aufbau befindet.

          Es ist sinnvoll, gleich von Anfang an (zumindest *bevor* man sich *hier* einen Rat holt) auf eine *saubere* und *valide* Dokumentstruktur zu achten. Das macht nicht nur den Validator zufriedener, sondern auch die Fehlersuche erheblich einfacher.

          Vor allem aber verhindert es Doppelt- bzw. Mehrfacharbeit - wenn Du z.B. schon mal Dein CSS auf den fehlerhaften HTML-Code anpasst und anschließend das Fundament (HTML) begradigst, darfst Du danach zumindest Teile der Fassade (CSS) wieder neu bauen. Dann lieber gleich von Anfang an vernünftig machen ...

          wenn du schon fehler zählst und dich darüber freust kannst du das entweder für dich behalten oder hier was produktives posten.

          Ob Du's glaubst oder nicht: meine Anmerkungen *sind* produktiv. Das zeigen die Erfahrungen unzähliger Web-Entwickler. Das Pferd von hinten aufzäumen ist *immer* unproduktiv. Ich behaupte, dass das *jeder*, der in diesem Forum aktiv ist, eingesehen hat, gerade einsieht oder in Zukunft einsehen wird.

          dass (noch) nicht alles perfekt ist, weiss ich selber auch, deshalb habe ich ja auch "noch im aufbau" geschrieben...

          Dann lass Dir doch beim Aufbau helfen, anstatt jetzt agressiv herumzukläffen.

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          1. n'Abend Ekki,

            Es ist sinnvoll, gleich von Anfang an (zumindest *bevor* man sich *hier* einen Rat holt) auf eine *saubere* und *valide* Dokumentstruktur zu achten. Das macht nicht nur den Validator zufriedener, sondern auch die Fehlersuche erheblich einfacher.

            Damit bin ich absolut einverstanden, nur habe ich euch ja nicht den nichtvaliden Code zur Fehlersuche vorgesetzt, sondern das Problem mit Worten umschrieben. Die vorhandenen Fehler entdecke ich (bin noch Anfänger...) nicht ohne Validator, ich kann ihm also keine bessere Variante vorsetzen

            Vor allem aber verhindert es Doppelt- bzw. Mehrfacharbeit - wenn Du z.B. schon mal Dein CSS auf den fehlerhaften HTML-Code anpasst und anschließend das Fundament (HTML) begradigst, darfst Du danach zumindest Teile der Fassade (CSS) wieder neu bauen. Dann lieber gleich von Anfang an vernünftig machen ...

            Das war jetzt produktiv, werde nämlich von nun an auch halbfertige Dateien während des Bastelns validieren.

            Ob Du's glaubst oder nicht: meine Anmerkungen *sind* produktiv. Das zeigen die Erfahrungen unzähliger Web-Entwickler. Das Pferd von hinten aufzäumen ist *immer* unproduktiv. Ich behaupte, dass das *jeder*, der in diesem Forum aktiv ist, eingesehen hat, gerade einsieht oder in Zukunft einsehen wird.

            Ich glaube dir absolut, dass deine Anmerkungen grundsätzlich produktiv sind, nur finde ich die Produktivität in "Danke - aber 17 Errors sind mir eindeutig zu viel ..." nicht und ausser Formalitäten hattest du in deinem Posting nicht viel mehr geschrieben.

            Dann lass Dir doch beim Aufbau helfen, anstatt jetzt agressiv herumzukläffen.

            Wenn ich mir nicht beim Aufbau helfen lassen würde, hätte ich nicht in diesem Forum gepostet. Aber ist eben meine Art, es selber zu probieren, bis es nicht mehr geht und erst dann für das spezifische Problem um Hilfe zu bitten. Sobald das Problem gelöst ist, kann ich wieder allein weitertüfteln.
            Ich bastle lieber selber ein wenig länger rum und suche selber, anstatt jedes kleine Problem von Anfang an in diesem Forum zu posten. Ich glaube, das ist auch euch lieber.

            mfG
            Solero

            1. @@Solero:

              nuqneH

              Ich glaube dir absolut, dass deine Anmerkungen grundsätzlich produktiv sind, nur finde ich die Produktivität in "Danke - aber 17 Errors sind mir eindeutig zu viel ..." nicht und ausser Formalitäten hattest du in deinem Posting nicht viel mehr geschrieben.

              Wesentlich war hier der Link, nicht die Formulierung. Wenn die Formulierung einen aber davon abhält, sich überhaupt mit dem Link zu beschäftigen, ist sie – ähm überarbeitungswürdig.

              Ich bastle lieber selber ein wenig länger rum und suche selber, anstatt jedes kleine Problem von Anfang an in diesem Forum zu posten. Ich glaube, das ist auch euch lieber.

              Mit der Einstellung bist du hier sicherlich ein gern gesehener Gast.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)