Johannes Walther: Gallerie mit float

0 60

Gallerie mit float

Johannes Walther
  • css
  1. 0
    Ole
    1. 0
      Johannes Walther
      1. 0
        Russe
  2. 0
    nag
    1. 0
      Johannes Walther
  3. 0

    "Gallerie" mit float, da floatet mir dieselbige über!

    Gernot Back
    1. 0

      Mir floaten da noch ganz andere Dinge über...

      Benjamin Wilfing
      • menschelei
      1. 0
        Gernot Back
        1. 0
          Jörg Lorenz
          1. 0
            Gernot Back
            1. 0
              Jörg Lorenz
          2. 0
            Alexander Brock
            1. 0
              Benjamin Wilfing
              1. 0
                Gernot Back
              2. 0
                Jörg Lorenz
                1. 0
                  Gernot Back
                  1. 0
                    Benjamin Wilfing
                  2. 0
                    Jörg Lorenz
                    1. 0
                      Gernot Back
                    2. 0
                      WebViper
                      1. 0
                        Jörg Lorenz
                      2. 0
                        at
                  3. 0
                    Orlando
              3. 0
                Alexander Brock
            2. 0
              Jörg Lorenz
              1. 0
                Gernot Back
                1. 0
                  Jörg Lorenz
            3. 0
              Fabian Transchel
              1. 0
                Benjamin Wilfing
      2. 0
        O'Brien
    2. 0
      Johannes Walther
      1. 0
        Gernot Back
        1. 0
          Jörg Lorenz
          1. 0
            Benjamin Wilfing
            1. 0
              Jörg Lorenz
              1. 0
                at
  4. 1

    Galerie mit float

    Gunnar Bittersmann
    1. 0
      Detlef G.
      1. 0
        Detlef G.
      2. 0
        at
        1. 0
          Detlef G.
          1. 0
            at
  5. 0
    Aybee
    1. 0
      Benjamin Wilfing
      1. 0
        Aybee
        1. 0
          Benjamin Wilfing
      2. 0
        Aybee
        1. 0
          Benjamin Wilfing
          1. 0
            Aybee
            1. 0
              Ingo Turski
              1. 0
                Aybee
                1. 0
                  Ingo Turski
            2. 0
              Benjamin Wilfing
              1. 0
                Aybee
    2. 0
      Aybee
  6. 0
    Ingo Turski
    1. 0
      Johannes Walther
      1. 0
        Ingo Turski
  7. 0

    & (JavaScript) Noch ein Lösungsansatz, wenn auch nicht der schönste[tm]

    Ole

Hallo!

Folgendermaßen sieht im Prinzip eine meiner Seiten aus:

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
  img {margin:5px 20px; float:left;}
</style>
<title>Image Reflow-Test</title>
</head>

<body>
  <img src="image.gif" width="100" height="110" />
  <img src="image.gif" width="100" height="51" />
  <img src="image.gif" width="100" height="100" />
  <img src="image.gif" width="100" height="100" />
</body>
</html>

Also mehrere Bilder nebeneinander, keine Tabelle, wenn die Seite zu eng wird, bricht die Reihe um.

Das funktioniert auch tadellos wenn die Bilder alle gleich hoch sind. Sind sie es nicht (wie in o.g. Testcase), gibt es zwei Probleme:
1. Alle Bilder sind an der Oberkante ausgerichtet, ich möchte sie aber an der Unterkante ausgerichtet haben.
2. wandern wegen zu enger Seite die rechten Bilder nach links, landen die nicht am linken Dokumentrand, sondern bleiben am höchsten (hier ersten) "hängen".

Ich habe schon versucht, die <img> mit vertical-align:bottom; zu behandeln und auch sie in <div> zu kapseln und mit vertical-align:bottom; zu formatieren, alles nichts. Auch height:110px; auf das <img> ist sinnlos, weil damit auch das Bild skaliert würde bzw. auf ein <div> um die einzelnen <img> angewendet ergibt das einen sofortigen Umbruch.

Also geht das nicht, oder verstehe ich das Box-Model immer noch nicht?

Ciao,
Johannes

  1. hi

    auf ein <div> um die einzelnen <img> angewendet ergibt das einen sofortigen Umbruch.

    Wenn du das float auf das div anwendest funktioniert es (dann brauchst du es bei den img allerdings nicht mehr).

    so long
    Ole
    (8-)>

    --
    Trotz Equalizer und Compressor, der Sound wird matschig unn nett
    bässer!
    1. auf ein <div> um die einzelnen <img> angewendet ergibt das einen sofortigen Umbruch.

      Wenn du das float auf das div anwendest funktioniert es (dann brauchst du es bei den img allerdings nicht mehr).

      Also

      .dings {float:left; height:110px;}
      und
        <div class="dings"><img src="images/image1.gif" width="100" height="110" /></div>
        <div class="dings"><img src="images/image1.gif" width="100" height="51" /></div>

      ?

      Ja, das funktioniert - für das erste (bzw. hinterste) Bild. Das zweite umbrochene bleibt dann am ersten hängen ...

      Bye,
      Johannes

      1. Ja, das funktioniert - für das erste (bzw. hinterste) Bild. Das zweite umbrochene bleibt dann am ersten hängen ...

        Ich hatte mich auch schon oft an dieser Umbruchgeschichte gestört und habe aber bisher keine saubere Lösung gefunden. Bin ja mal gespannt ob hier noch jemand den Stein der Weisen hat.

        --
        Russe
  2. Hallo,

    lass das float einfach mal weg.

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <style type="text/css">
      img {margin:5px 20px; background-color:#000;}
    </style>
    <title>Image Reflow-Test</title>
    </head>

    <body>
      <img src="image.gif" width="100" height="110" />
      <img src="image.gif" width="100" height="51" />
      <img src="image.gif" width="100" height="100" />
      <img src="image.gif" width="100" height="100" />
    </body>
    </html>

    mfg NAG

    --
    signatur
    1. Hallo,

      lass das float einfach mal weg.

      Äh, ja, das würde fast das gewünschte Ergebnis bringen. Allerdings nur für diesen Testcase - hier hatte ich wohl zu viel vereinfacht.

      Denn in der vollen Anwendung brauche ich den float weil jedes Bild eine Beschriftung erhalten soll und dafür jedes in einen eigenen Container muß.

      Johannes

  3. Hallo Johannes,

    "Galerie" schreibt man auf Deutsch immer noch so wie das romanische Original mit nur einem "l". Dass das Englische hier einen Schreibfehler standardisiert hat, sollten wir uns nicht zum Vorbild nehmen.

    Gruß Gernot

    P.S.: Ich lese diese falsche Schreibweise hier so oft, verzeih, dass es dich jetzt mal getroffen hat!

    1. Hi Gernot, hallo restliches Forum, ;-)

      P.S.: Ich lese diese falsche Schreibweise hier so oft, verzeih, dass es dich jetzt mal getroffen hat!

      ach, wo du gerade beim Thema Rechtschreibung bist (ich will deswegen eigentlich keinen gesonderten Thread aufmachen): mich nervt gerade in jüngster Zeit die immer häufiger anzutreffende falsch konjugierte Form des Verbs halten (2. Person Singular): »du hälst«. Ein grauenvoller Anblick, nicht wahr? Warum machen das immer mehr Leute falsch? Dabei sollte doch jeder wissen, dass es richtig »du hältst« heißt. Was ist eigentlich der Infinitiv zu »du hälst«, »halsen« vielleicht? - ich halse, du hälst, er/sie/es halst, wir halsen, ihr halst, sie halsen? ;-)

      Jedenfalls kriege ich regelmäßig Augenkrämpfe, wenn ich das lesen muss, und das ist hier leider immer öfter der Fall. :-(

      Viele Grüße
      Benjamin

      1. Hallo Benjamin,

        du hast Recht:

        im Vergleich zu Gallerie ist hälst ein noch gravierenderes Problem, aber wenn man sich die Jahrgänge so betrachtet, sehen wir seit 2004 schon eine Trendwende zum Guten.

        Gruß Gernot

        1. Hallo Gernot,

          im Vergleich zu Gallerie ist hälst ein noch gravierenderes Problem, aber wenn man sich die Jahrgänge so betrachtet, sehen wir seit 2004 schon eine Trendwende zum Guten.

          siehe hier: http://www.googlefight.com/index.php?lang=en_GB&word1=Gallerie&word2=h�lst

          ;-)

          Viele Grüße

          Jörg

          1. Hallo Jörg,

            siehe hier: http://www.googlefight.com/index.php?lang=en_GB&word1=Gallerie&word2=h�lst

            wobei dieses Ergebnis ja Web-Veröffentlicheungen in allen möglichen Sprachen berücksichtigt, die in der jeweiligen vielleicht sogar korrekt sind.

            Gruß Gernot

            1. Hallo Gernot,

              wobei dieses Ergebnis ja Web-Veröffentlicheungen in allen möglichen Sprachen berücksichtigt, die in der jeweiligen vielleicht sogar korrekt sind.

              stimmt natürlich. Vor allem müßte man wissen, inwieweit Googlefight bei "Gallerie" auch "galleries" findet.

              Viele Grüße

              Jörg

          2. Hallo Jörg,

            siehe hier: http://www.googlefight.com/index.php?lang=en_GB&word1=Gallerie&word2=h�lst

            ;-)

            hälst vs. hältst 220k : 492k
            Gallerie vs. Galerie 3,03m : 25,7m
            halsen vs. halten 645k : 5.750k ;-)

            Das macht mir wieder Mut *gg*

            Gruß
            Alexander Brock

            --
            SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
            http://againsttcpa.com
            1. Hi Alexander,

              hälst vs. hältst 220k : 492k
              Gallerie vs. Galerie 3,03m : 25,7m
              halsen vs. halten 645k : 5.750k ;-)

              Das macht mir wieder Mut *gg*

              Mut? 3,03 Mio. Gallerien gegen 25,7 Mio. Galerien? Das sind über 10%, die falsch sind. Bei hälst vs. hältst sind es sogar 30% [*]. Na ich weiß ja nicht. Ich halse ;-) das eher für ein Armutszeugnis.

              [*] Sicherlich sollten andere Sprachen mit berücksichtigt werden, wie Gernot schon sagte. Die Dunkelziffer liegt vielleicht tatsächlich ein wenig darunter. Dennoch finde ich die Situation alles andere als beruhigend oder Mut machend.

              Viele Grüße
              Benjamin

              1. Hallo Benjamin,

                [*] Sicherlich sollten andere Sprachen mit berücksichtigt werden, wie Gernot schon sagte. Die Dunkelziffer liegt vielleicht tatsächlich ein wenig darunter. Dennoch finde ich die Situation alles andere als beruhigend oder Mut machend.

                Also bei Galerien vs. Gallerien, was aufgrund der Pluralbildung schon eher auf Deutsch schließen lässt, sieht es doch erfreulicher aus.

                Gruß Gernot

              2. Hi Benjamin,

                Mut? 3,03 Mio. Gallerien gegen 25,7 Mio. Galerien? Das sind über 10%, die falsch sind. Bei hälst vs. hältst sind es sogar 30% [*]. Na ich weiß ja nicht. Ich halse ;-) das eher für ein Armutszeugnis.

                es kommt noch schlimmer, was das Verhältnis betrifft:

                http://www.googlefight.com/index.php?lang=en_GB&word1=Gallerien&word2=Galerien

                und

                http://www.google.de/search?hl=de&q=Gallerien&btnG=Google-Suche&meta=lr%3Dlang_de

                Viele Grüße

                Jörg

                1. Hallo Jörg,

                  es kommt noch schlimmer, was das Verhältnis betrifft:

                  http://www.google.de/search?hl=de&q=Gallerien&btnG=Google-Suche&meta=lr%3Dlang_de

                  Du vergisst aber, dass darunter die meisten Seiten pornografischen "Inhals" sind, also tatsächlich "Gallereien"!

                  Gruß Gernot

                  1. Hi Gernot,

                    Du vergisst aber, dass darunter die meisten Seiten pornografischen "Inhals" sind, also tatsächlich "Gallereien"!

                    LOL! :-)

                    Viele Grüße
                    Benjamin

                  2. Hi Gernot,

                    Du vergisst aber, dass darunter die meisten Seiten pornografischen "Inhals" sind, also tatsächlich "Gallereien"!

                    "Gallereien" - sind das dann Innereien? ;-)

                    Bis denne

                    Jörg

                    1. Hallo Jörg,

                      "Gallereien" - sind das dann Innereien? ;-)

                      Ja gewissermaßen, aber floatende!

                      Gruß Gernot

                    2. Hi Jörg,

                      "Gallereien" - sind das dann Innereien? ;-)

                      heut nen Clown gefrühstückt? ;))

                      mfg
                      -WebViper-

                      --
                      Real programmers confuse Halloween and Christmas because OCT 31 = DEC 25
                      1. Hi -WebViper-,

                        heut nen Clown gefrühstückt? ;))

                        nee, heute bestimmt nicht. ;-)

                        Viele Grüße

                        Jörg

                      2. Hallo.

                        heut nen Clown gefrühstückt? ;))

                        Ja, schmeckte irgendwie ... komisch.
                        MfG, at

                  3. Hallo Gernot,

                    Du vergisst aber, dass darunter die meisten Seiten pornografischen "Inhals" sind

                    Was soll ich von deiner feinen Klinge halsen?

                    Grüße
                    Ro*SCNR*land

              3. Hallo Benjamin,

                10% [...] 30%

                Ich bin Optimist und es sind unter 50% ;-))

                Gruß
                Alexander Brock

                --
                SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:? ss:| de:> js:( ch:| sh:( mo:} zu:}
                http://againsttcpa.com
            2. Hallo Alexander,

              halsen vs. halten 645k : 5.750k ;-)

              *g*

              Aber ich glaube, "halsen" ist irgendwas aus der Seefahrt (wenden?). Die müßte man dann auch noch abziehen.

              Viele Grüße

              Jörg

              1. Hallo Jörg,

                Aber ich glaube, "halsen" ist irgendwas aus der Seefahrt (wenden?). Die müßte man dann auch noch abziehen.

                Ja, das ist das "Wenden vor dem Wind", in der 3.Person Präsens Singular Indikativ heißt es jedoch "er, sie, es, man halst" und nicht "er, sie, es, man hälst".

                Gruß Gernot

                1. Hallo Gernot,

                  Aber ich glaube, "halsen" ist irgendwas aus der Seefahrt (wenden?). Die müßte man dann auch noch abziehen.

                  Ja, das ist das "Wenden vor dem Wind", in der 3.Person Präsens Singular Indikativ heißt es jedoch "er, sie, es, man halst" und nicht "er, sie, es, man hälst".

                  danke für die Info. ist schon eine Weile her, daß ich an der See gewohnt habe.

                  Aber ich konnte es mir nicht verkneifen:

                  http://www.google.de/search?hl=de&c2coff=1&q="man+halst"&btnG=Suche&meta=lr%3Dlang_de

                  ;-)

                  Viele Grüße

                  Jörg

            3. Hi,

              hälst vs. hältst 220k : 492k
              Gallerie vs. Galerie 3,03m : 25,7m
              halsen vs. halten 645k : 5.750k ;-)

              Was ist jetzt davon zu halten? Man sollte an dieser Stelle natürlich noch berücksichtigen, dass _die Bedeutung_ des Wortes "halten" wohl *wesentlich* häufiger im Internet zu finden ist, allein durch viele Foren und Boards begünstigt. Wie entscheidet Googlefight also, welche Bedeutung gemeint ist, und wo es falsch verwendet wurde? Ha!

              Grüße aus Barsinghausen,
              Fabian

              --
              "It's easier not to be wise" - < http://www.fabian-transchel.de/kultur/philosophie/ialone/>
              1. Hi Fabian,

                Was ist jetzt davon zu halten? Man sollte an dieser Stelle natürlich noch berücksichtigen, dass _die Bedeutung_ des Wortes "halten" wohl *wesentlich* häufiger im Internet zu finden ist, allein durch viele Foren und Boards begünstigt. Wie entscheidet Googlefight also, welche Bedeutung gemeint ist, und wo es falsch verwendet wurde? Ha!

                Ich wüsste nicht, dass die Wörter »hälst« und »Gallerie« im deutschen Sprachraum existieren (man möge mich an dieser Stelle korrigieren), also ist davon auszugehen, dass sie falsch sind. Ganz egal, in welchem Zusammenhang sie stehen und was sie dort bedeuten (sollen).

                Viele Grüße
                Benjamin

      2. Hi,

        [...] Was ist eigentlich der Infinitiv zu »du hälst«, »halsen« vielleicht? - ich halse, du hälst, er/sie/es halst, wir halsen, ihr halst, sie halsen? ;-)

        dass du uns dieses Thema jetzt aber auch aufhalsen musst!

        Schön finde ich übrigens auch die Leute, die ihre Webseiten "gestallten". Merkwürdige Gestalten, das.
        (Googlefight: "gestalten" 29,6 MHits, "gestallten" 68,7 kHits)

        Oder die Leute mit der Hompage, machen die eigentlich Werbung für Unterhosen? ;-)
        (Googlefight: "Homepage" 720 MHits, "Hompage" 680 kHits)

        Jedenfalls kriege ich regelmäßig Augenkrämpfe, wenn ich das lesen muss, und das ist hier leider immer öfter der Fall. :-(

        Nimm's einfach hin, wir sind eine aussterbende Spezies ;-(

        Schönen Sonntag noch!
        O'Brien

        --
        Frank und Buster: "Heya, wir sind hier um zu helfen!"
    2. Hallo Gernot,

      "Galerie" schreibt man auf Deutsch immer noch so wie das romanische Original mit nur einem "l". Dass das Englische hier einen Schreibfehler standardisiert hat, sollten wir uns nicht zum Vorbild nehmen.

      Ich gebe Dir da vollkommen Recht und Danke Dir dafür, mich darauf aufmerksam gemacht zu haben. Ich kann es zwar nicht mit Sicherheit sagen, glaube aber es war das erste und hoffentlich einzige (ja, nicht einzigste :)) Mal, daß ich hier ein "l" zuviel verwendet habe.

      Johannes

      1. Hallo Johannes,

        "Galerie" schreibt man auf Deutsch immer noch so wie das romanische Original mit nur einem "l". Dass das Englische hier einen Schreibfehler standardisiert hat, sollten wir uns nicht zum Vorbild nehmen.

        Ich muss meine Klugscheißerei inzwischen zurücknehmen, das romanische Original ist wohl italienisch und dort schreibt man das Wort mit Doppel-L:

        http://www.dicologos.org/pls/dictionary/new_dictionary.dic.main?u_code=4395&code_language=DE&language_list=&trg_lg=&word=&phrase_code=36789&connect_value=&procedure_type=ST_B&subject_code=&num_row=10

        Der Plural ist im Italienischen dann natürlich "gallerie", was die vielen Fundstellen bei Google rechtfertigt.

        Ins Deutsche ist das Wort aber wohl über das Französische gelangt, und da schreibt man es nur mit einem "L".

        Jetzt nehme ich alles zurück und behaupte das Gegenteil: Das Französische hat den Schreibfehler begangen, wir dummen Deutschen haben ihn übernommen und das Englische ist eigentlich näher am italienischen Original.

        Also schreibt doch wie ihr wollt!

        Gruß Gernot

        1. Hallo Gernot,

          Also schreibt doch wie ihr wollt!

          gut: Gahlerie ;-)

          http://www.google.de/search?hl=de&q=Gahlerie&btnG=Google-Suche&meta=lr%3Dlang_de

          Viele Grüße

          Jörg

          1. Hi Jörg,

            Also schreibt doch wie ihr wollt!

            gut: Gahlerie ;-)

            Ich hätte noch Gallarie, Galarie sowie ferner Galleri und Galeri anzubieten ;-) (*würg*)

            Viele Grüße
            Benjamin

            1. Hi Benjamin,

              Ich hätte noch Gallarie, Galarie sowie ferner Galleri und Galeri anzubieten ;-) (*würg*)

              auf die Idee muß man erstmal kommen ;-)

              Wobei man zu "Galarie" ja noch eine Erklärung finden könnte ...

              Viele Grüße und ein schönes WE

              Jörg

              1. Hallo.

                Ich hätte noch Gallarie, Galarie sowie ferner Galleri und Galeri anzubieten ;-) (*würg*)

                auf die Idee muß man erstmal kommen ;-)

                Mein Vorschlag -- fast zur anderweitigen Verwertung geeignet: Gaga Larry.
                MfG, at

  4. Johannes,

    <body>
      <img src="image.gif" width="100" height="110" />
      <img src="image.gif" width="100" height="51" />
      <img src="image.gif" width="100" height="100" />
      <img src="image.gif" width="100" height="100" />
    </body>

    Das geht nur in Transitional, in Strict dürfen nur Blockelemente Kinder von body sein.

    Aber das sieht doch nach einer Sammlung (Liste!) von Bildern aus:

    <body>  
       <ul>  
          <li><img src="image.gif" width="100" height="110" /></li>  
          <li><img src="image.gif" width="100" height="51" /></li>  
          <li><img src="image.gif" width="100" height="100" /></li>  
          <li><img src="image.gif" width="100" height="100" /></li>  
       </ul>  
    </body>
    

    Damit haste die Bilder in Blockelementen eingeschlossen, divs sind nicht nötig.

    Die li kannst du jetzt display:inline stezen und die img in ihnen ausrichten.

    Gunnar

    PS. Galerie schreibt sich mit einem L.

    --
    “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
    1. Hallo Gunnar

      Die li kannst du jetzt display:inline stezen und die img in ihnen ausrichten.

      Das würde funktionieren, wenn die Bilder keine Beschriftung bekommen sollten.
      (s. https://forum.selfhtml.org/?t=108034&m=671879)

      Sonst dürfte sich dies so erreichen lassen (ungetestet):

        
         <ul>  
            <li><span><img src="image.gif" width="100" height="110" /><span>Beschreibung</li>  
            <li><span><img src="image.gif" width="100" height="51" /><span>Beschreibung</li>  
            <li><span><img src="image.gif" width="100" height="100" /><span>Beschreibung</li>  
            <li><span><img src="image.gif" width="100" height="100" /><span>Beschreibung</li>  
         </ul>  
      
      
        
      ul {  
        list-style:none;  
        margin:0;padding:0;  
      }  
      li {  
        float:left;  
        text-align:center;  
      }  
      li span {  
        display:block;  
        padding-top:100px;  
      }  
      img {  
        margin-top:-100%;  
      }  
      /* für den IE */  
      * html span {  
        padding:0;  
        font-size:100px;  
      }  
      * html img {  
        vertical-align:  
        bottom;margin:0;  
      }  
      
      

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. Hallo,

        natürlich nicht so:

        li span {
          display:block;
          padding-top:100px;
        }

        ...

        * html img {
          vertical-align:
          bottom;margin:0;
        }

        sondern so:

          
          
        li span {  
          display:block;  
          padding-top:110px;  /* die Höhe des höchsten Bildes */  
        }  
          
        ...  
          
        * html img {  
          vertical-align:bottom;  
          margin:0;  
        }  
        
        

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
      2. Hallo.

        <ul>
              <li><span><img src="image.gif" width="100" height="110" /><span>Beschreibung</li>
              <li><span><img src="image.gif" width="100" height="51" /><span>Beschreibung</li>
              <li><span><img src="image.gif" width="100" height="100" /><span>Beschreibung</li>
              <li><span><img src="image.gif" width="100" height="100" /><span>Beschreibung</li>
           </ul>

          
        Da fände ich  
        `<dl><dt><img/></dt><dd>Beschreibung</dd>...</dl>`{:.language-html}  
        oder zumindest  
        `<ul><li><img/><dfn>Beschreibung</dfn></li>...</ul>`{:.language-html}  
        sinnvoller.  
        MfG, at
        
        1. Hallo at

          Da fände ich
          <dl><dt><img/></dt><dd>Beschreibung</dd>...</dl>

          Da hast du recht, daran dachte ich auch, nur leider fiel mir dabei keine
          passable Lösung ein, die Bilder (im <dt>) mit jeweils darunter zentriertem
          Text (im <dd>) floaten zu lassen.

          oder zumindest
          <ul><li><img/><dfn>Beschreibung</dfn></li>...</ul>

          Das wäre eine Variante mit zusätzlichem <dfn>. Nur leider muss dann (dem IE
          sei Dank) das <img> trotzdem noch in ein <span> gepackt werden, wenn auf der
          Seite keine px-Schriftgrößen verwendet werden sollen.

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          1. Hallo.
            Du hast natürlich völlig Recht. Ich hatte vergessen zu schreiben, dass es mir nur um die semantische Auszeichnung ging, nicht um die Schwierigkeiten der grafischen Darstellung.
            MfG, at

  5. Hallo Johannes,

      
    <html>  
     <head>  
       <style type="text/css">  
        <!--  
         img { margin:5px 20px; display:block; }  
         table { float:left; }  
         td { height:150px; vertical-align:bottom; text-align:center; }  
        -->  
       </style>  
       <title>Image Reflow-Test</title>  
     </head>  
     <body>  
       <table><tr><td><img src="image.gif" width="100" height="110" alt="1" />Bild 1</td></tr></table>  
       <table><tr><td><img src="image.gif" width="100" height="51" alt="2" />Bild 2</td></tr></table>  
       <table><tr><td><img src="image.gif" width="100" height="100" alt="3" />Bild 3</td></tr></table>  
       <table><tr><td><img src="image.gif" width="100" height="100" alt="4" />Bild 4</td></tr></table>  
     </body>  
    </html>  
    
    

    ich finde, das ist eine schöne Lösung. img=display:block, damit der Text unter dem Bild erscheint, sonst müsste man hinter jedes Bild <br> setzen, was auch geht. td=text-align:center ist Geschmacksache, ist nur, damit der Text unter dem Bild zentriert ist, sonst wäre er linksbündig. Für eine Mindesthöhe der Zellen musst du dich natürlich entscheiden und zwar so, dass der Text noch unter die Bilder passt.

    Was "hältst" du von meiner "Galerie"?

    Gruß von Aybee

    1. Hi Aybee,

      <table>
      [...]

      ich finde, das ist eine schöne Lösung.

      ich nicht. Mal ganz abgesehen davon, dass es semantischer Quatsch ist, eine Bildergalerie in einer Tabelle darstellen zu wollen (was hat das mit tabellarischen Daten zu tun?), ist es doch (IMHO) viel hübscher, wenn dem Benutzer eben *nicht* aufgezwängt wird, wieviele Bilder nebeneinander sind, sondern das ganz von der Größe des Fensters abhängig gemacht wird.

      Hier mal ein Beispiel aus einem Projekt, an dem ich aktuell am Werkeln bin -- dort gibt es auch eine Fotogalerie. Ich habe den Code einfach mal von dort kopiert und hoffe, nichts vergessen zu haben ;-)

      Hier der HTML-Teil...

        
      <span class="thumbnail"><a href="bild1.jpg"><img src="bild1-klein.jpg" alt="..." /></a></span>  
        
      <span class="thumbnail"><a href="bild2.jpg"><img src="bild2-klein.jpg" alt="..." /></a></span>  
        
      <span class="thumbnail"><a href="bild3.jpg"><img src="bild3-klein.jpg" alt="..." /></a></span>  
      
      

      (usw. usf ...)

      ... mit folgendem CSS-Code formatiert:

        
      .thumbnail {  
       display: block;  
       float: left;  
       margin: 6px 12px 6px 0;  
       width: 126px;  
       height: 126px;  
       text-align: center;  
       }  
        
      .thumbnail a {  
       display: block;  
       padding: 6px;  
       }  
        
      * html .thumbnail {  
       overflow:auto;  
       }  
        
      .thumbnail a:hover {  
       padding: 0;  
       }  
        
      .thumbnail img {  
       background-color: #c7c3a9;  
       border: 1px solid #c7c3a9;  
       display: block;  
       margin: 0 auto;  
       }  
        
      .thumbnail a:hover img {  
       border: 1px solid #727060;  
       padding: 6px;  
       }  
      
      

      Der Vorteil gegenüber der Tabellenlösung liegt hier meiner Meinung nach auf der Hand: Ist das Browserfenster zu klein, um 4 (oder X) Bilder nebeneinander darzustellen, rutschen sie durch den Floateffekt einfach automatisch in die nächste Zeile. Ist das Browserfenster sehr breit (es soll ja Leute geben, die mit sehr hohen Auflösungen arbeiten), passen schön viele Bilder nebeneinander. Man kann das ganze Konstrukt ja trotzdem mit einem einfachen min-width und max-width (und entsprechenden IE-Würgarounds) in gewisse Grenzen packen, wenn man das möchte.

      Viele Grüße
      Benjamin

      1. Hallo Benjamin,

        Der Vorteil gegenüber der Tabellenlösung liegt hier meiner Meinung nach auf der Hand: Ist das Browserfenster zu klein, um 4 (oder X) Bilder nebeneinander darzustellen, rutschen sie durch den Floateffekt einfach automatisch in die nächste Zeile. Ist das Browserfenster sehr breit (es soll ja Leute geben, die mit sehr hohen Auflösungen arbeiten), passen schön viele Bilder nebeneinander

        Warum hast du meinen Code denn nicht mal ausprobiert, dann hättest du doch gesehen, dass genau das passiert. Das war doch auch das, was Johannes wollte. Ich werde aber auch noch deinen Code testen und ausprobieren, ob es so funktioniert, wie gewünscht. Umbrechen, untenbündig ausgerichtet, am linken Fensterrand beginnend.

        Auch die Seite mit dem Tanzclub werde ich mir mal ansehen, weil da funktioniert es ja auch.

        Gruß von Aybee

        1. Hi Aybee,

          Warum hast du meinen Code denn nicht mal ausprobiert, dann hättest du doch gesehen, dass genau das passiert. Das war doch auch das, was Johannes wollte. Ich werde aber auch noch deinen Code testen und ausprobieren, ob es so funktioniert, wie gewünscht. Umbrechen, untenbündig ausgerichtet, am linken Fensterrand beginnend.

          Oh, ja, ich habe die Tabelle gesehen und die Alarmglocken haben geläutet.  :-) Aber für jedes Bild eine neue Tabelle zu benutzen ist ja wohl noch unsinniger. Zumal sich eigentlich so ziemlich jedes Element mit display: block und float formatieren lässt. Besser also, man benutzt eines, was für die Semantik bedeutungslos ist (div, span).

          Viele Grüße
          Benjamin

      2. Hallo Benjamin,

        nochmal ich. Deine Lösung funzt ja mur bei gleichgroßen Bildern. Fügst du verschieden Bilder ein, dann tauchen Scollbalken auf und die Bilder sind auch nicht unten ausgerichtet. Warum nimmst du ein Inline-Element (span) und machst daraus ein Block-Element. Da kannst du doch direkt div nehmen. Oder hat das was mit Semantic zu tun?

        Dein Code sieht so aus, als hättest du ihn aus einer Bildergalerie entnommen und zwar der Thumbnailseite. Er stellt auf keinen Fall eine Hilfestellung zu Johannes' Problem dar.

        Gruß von Aybee

        1. Hi Aybee,

          nochmal ich. Deine Lösung funzt ja mur bei gleichgroßen Bildern.

          zumindest meine Vorschaubildchen sind auch immer gleich groß. Außerdem können durchaus kleinere Bilder in den Boxen untergebracht werden, das sollte nicht stören.

          Fügst du verschieden Bilder ein, dann tauchen Scollbalken auf und die Bilder sind auch nicht unten ausgerichtet.

          Warum nimmst du ein Inline-Element (span) und machst daraus ein Block-Element. Da kannst du doch direkt div nehmen. Oder hat das was mit Semantic zu tun?

          Nein, nur mit der Darstellung in alten, evtl. CSS-unfähigen Browsern. Oder mit Leuten, die mein Autorenstylesheet nicht sehen wollen. Oder oder oder... Der Unterschied ist hier der, dass die Bilder dort dann auch nebeneinander platziert werden, weil eben Inline, anstatt alle untereinander.

          Dein Code sieht so aus, als hättest du ihn aus einer Bildergalerie entnommen und zwar der Thumbnailseite.

          Ja, meiner eigenen Bildergalerie, das schrieb ich aber bereits.

          Er stellt auf keinen Fall eine Hilfestellung zu Johannes' Problem dar.

          Hm, soweit ich das sehe, sind die Bilder in Johannes' Code 100px breit und auch nicht bedeutend höher. Riecht doch irgendwie stark nach Thumbnails, also evtl. auch einer Vorschauseite? :-) Gut, wissen kann ich es natürlich nicht, ich bin halt einfach mal stillschweigend davon ausgegangen.

          Viele Grüße
          Benjamin

          1. Hallo Benjamin,

            zumindest meine Vorschaubildchen sind auch immer gleich groß. Außerdem können durchaus kleinere Bilder in den Boxen untergebracht werden, das sollte nicht stören.

            ja schon, aber wenn sie nicht gleich groß sind, sind sie eben nicht untenbündig ausgerichtet.

            Warum nimmst du ein Inline-Element (span) und machst daraus ein Block-Element. Da kannst du doch direkt div nehmen. Oder hat das was mit Semantic zu tun?

            Nein, nur mit der Darstellung in alten, evtl. CSS-unfähigen Browsern. Oder mit Leuten, die mein Autorenstylesheet nicht sehen wollen. Oder oder oder... Der Unterschied ist hier der, dass die Bilder dort dann auch nebeneinander platziert werden, weil eben Inline, anstatt alle untereinander.

            Ah ja, weit mitgedacht.

            Meine Herangehensweise hier im Forum ist meistens die, dass ich versuche wirklich auf die Wünsche des Fragenden einzugehen und ihm nichts anderes aufzuschwatzen versuche. Ich würde meine Bilder auch nicht so präsentieren, aber interessant ist es schon. Und es ist auch immer wieder eine Herausforderung ein Problem zu lösen, ob es nun Sinn macht oder nicht. Allerdings rate ich auch von manchen Dingen ab, wenn z.B. klar zu erkennen ist, dass es eine einfachere Lösung gibt.

            Wenn du eine Lösung der Problemstellung ohne Tabellen kennst, lass es mich wissen. Ich habe mir die Seite mit dem Tanzclub angesehen, und auf den ersten Blick sah es so aus, als hätte hier jemand eine Lösung gefunden. Ich habe den Quelltext kopiert und die Bildgrößen verändert und siehe da, es war nur noch ein Kuddelmuddel. Kannst dir untenstehenden Quelltext so wie er ist in deinen Editor laden und ansehen.

            Es kommt gleich auch noch eine erweiterte Lösung von mir, auch wieder mit Tabellen, die ist dann noch schlechter als meine erste.;-)

            Erfüllt aber die Bedingungen.

              
            <html>  
            <head>  
               <title>TD Rot-Weiss e.V.: Turnierpaargruppe Standard</title>  
               <link rel="stylesheet" type="text/css" href="http://www.td-rot-weiss-duesseldorf.de/tdtext.css" />  
            <!--[if IE]><style type="text/css">@import url(http://www.td-rot-weiss-duesseldorf.de/td-scrollbar.css);</style><![endif]-->  
            <style type="text/css">  
              @import url(http://www.td-rot-weiss-duesseldorf.de/tdblock.css);  
              img { border:0; }  
            </style>  
            <script type="text/javascript" src="http://www.td-rot-weiss-duesseldorf.de/tdframe.js"></script>  
            </head>  
              
            <body onload="TDframe(self.location.href)">  
            <p class="Layout">Ihr Browser unterst&uuml;tzt leider nicht den <a href="http://www.td-rot-weiss-duesseldorf.de/news/news030526.html">aktuellen Standard</a><br />der zur korrekten Anzeige dieser Seite vorausgesetzt wird!</p>  
              
            <h2>Standard-Turnierpaare</h2>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-cremer.jpg" alt="Foto Standard-Turnierpaar" height="150" width="50" /><br /><span>Michael Cremer /<br />Ilka Schmidt<br /><span>A-Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="BlindDiv" style="line-height:33px;">&nbsp;<br /></div><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-defayay.jpg" alt="Foto Standard-Turnierpaar" height="100" width="100" /><br /><span>Patrick Defayay /<br />Sara Wagner<br /><span>S-Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-gross.jpg" alt="Foto Standard-Turnierpaar" height="50" width="50" /><br /><span>Rahim Gro&szlig; /<br />Maria Gro&szlig;<br /><span>D-Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-hellmann.jpg" alt="Foto Standard-Turnierpaar" height="120" width="80" /><br /><span>Stefan Hellmann /<br />Annika Herweg<br /><span>C-Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-malmstroem.jpg" alt="Foto Standard-Turnierpaar" height="80" width="130" /><br /><span>Jens Malmstr&ouml;m /<br />Martina Nefe<br /><span>Turniervorbereitung Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-privou.jpg" alt="Foto Standard-Turnierpaar" height="60" width="80" /><br /><span>Peter Privou /<br />Helga Privou<br /><span>Sen II / S<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-schubert.jpg" alt="Foto Standard-Turnierpaar" height="40" width="90" /><br /><span>Konrad Schubert /<br />Gudrun Schubert<br /><span>Sen II / S<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-trotzke.jpg" alt="Foto Standard-Turnierpaar" height="120" width="80" /><br /><span>Mark Trotzke /<br />Anke Kresin<br /><span>B-Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="BlindDiv" style="line-height:23px;">&nbsp;<br /></div><div class="Umrahmung"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-boddenberg.jpg" alt="Foto Standard-Turnierpaar" height="130" width="20" /><br /><span>J&ouml;rg Boddenberg /<br />Nina Lungershausen<br /><span>A-Standard<br /><span>&nbsp;</span></span></span></div></div>  
              
            <div class="Galerie"><div class="Umrahmung"><a href="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-cremerius.html"><img src="http://www.td-rot-weiss-duesseldorf.de/sportbereich/istd-cremerius.jpg" alt="Foto Standard-Turnierpaar" height="90" width="50" /><br /><span>Hans Cremerius /<br />Ingrid Cremerius<br /><span>Sen III / S<br /><span>&raquo; Paarportrait &laquo;</span></span></span></a></div></div>  
              
            <p class="clear"><br /></p>  
              
            </body>  
            </html>
            

            Gruß von Aybee

            1. Hi,

              Ich habe mir die Seite mit dem Tanzclub angesehen, und auf den ersten Blick sah es so aus, als hätte hier jemand eine Lösung gefunden. Ich habe den Quelltext kopiert und die Bildgrößen verändert und siehe da, es war nur noch ein Kuddelmuddel.

              Damit Du es verstehst: der Knackpunkt hierbei ist:

              <div class="Galerie"><div class="BlindDiv" style="line-height:33px;">

              Hiermit werden die 33px geringere Bildhöhe kompensiert.
              Wie ich schon sagte nicht ganz schön (und auch aufwendig), aber es funktioniert.

              Für Thumbnails hätte ich aber eine weit bessere Lösung: Bringe sie einfach auf ein einheitliches Format; hierzu kannst Du auch Bildausschnitte verwenden, was durchaus interessant sein kann.

              freundliche Grüße
              Ingo

              1. Hallo Ingo,

                jetzt hab ich's verstanden. Du hattest zwei Bilder in einem anderen Format und hast die manuell mit .BlindDiv korrigiert.

                Das ist ja gepfuscht, pfui ;-)

                Wäre es da nicht einfacher, wenn du direkt allen divs eine feste Größe gibst und sie floaten lässt? Aber das gibt währscheinlich wieder mal Probleme mit der vertikalen Ausrichtung. mmh

                Gruß von Aybee

                1. Hi,

                  jetzt hab ich's verstanden. Du hattest zwei Bilder in einem anderen Format und hast die manuell mit .BlindDiv korrigiert.

                  Das ist ja gepfuscht, pfui ;-)

                  Stimmt; aber immer noch besser als Tabellen zweckzuentfremden. ;-)
                  Ich wollte halt die Flexibilität über float und die untenbündige Ausrichtung. Anders hatte ich es vor 2 Jahren nicht hinbekommen. Und soo tragisch ist es ja nun nicht, passend zu den Bildhöhen (die ja auch im HTML notiert sind) die fehlenden Pixel zu errechnen und mit einzutragen.

                  Wäre es da nicht einfacher, wenn du direkt allen divs eine feste Größe gibst und sie floaten lässt? Aber das gibt währscheinlich wieder mal Probleme mit der vertikalen Ausrichtung. mmh

                  Genau. Und eine Höhenangabe dazu noch Probleme mit der unvorhersagbaren Textgröße.

                  freundliche Grüße
                  Ingo

            2. Hi Aybee,

              Meine Herangehensweise hier im Forum ist meistens die, dass ich versuche wirklich auf die Wünsche des Fragenden einzugehen und ihm nichts anderes aufzuschwatzen versuche.

              oh, tatsächlich, da hast du mich eiskalt erwischt. :-) Ich sehe das genauso wie du, aber bezog mich jetzt einfach nur auf deine Frage »Was haltet ihr von meiner Lösung?«, ohne das Ursprungsposting zu berücksichtigen. Naja, ich glaube, es gibt gewisse Leute hier im Forum - ohne Namen nennen zu wollen - die das deutlich militanter betreiben als ich in diesem unbeabsichtigten Fall. :-)

              Wenn du eine Lösung der Problemstellung ohne Tabellen kennst, lass es mich wissen. Ich habe mir die Seite mit dem Tanzclub angesehen, und auf den ersten Blick sah es so aus, als hätte hier jemand eine Lösung gefunden. Ich habe den Quelltext kopiert und die Bildgrößen verändert und siehe da, es war nur noch ein Kuddelmuddel. Kannst dir untenstehenden Quelltext so wie er ist in deinen Editor laden und ansehen.

              Tut es Ingos Lösung denn nicht?

              Viele Grüße
              Benjamin

              1. Hi Benjamin,

                is ja schön, dass wir uns soooooo gut verstehen.

                Ist die Tanzseite von Ingo? Die Seite sieht auf jeden Fall gut aus, passt zum Thema, und das mit den Bilder finde ich auch sauber gelöst. Es ist allerdings keine allgemeine Lösung. Bei meiner Lösung, so bescheuert sie auch sein mag, kannst du irgendwelche Bilder reinsetzen und der Effekt ist immer der gewünschte. Na ja, wenn die Bilder zu den Texten länger werden muss man sich auch noch weitere Sachen überlegen, sonst sieht's auch nicht mehr gut aus. Ich hätte allerdings auch gerne eine Lösung z.B. ohne <wbr> und eine die "semantischer" ist (sagt man das so?). Ich probier nochmal ein wenig rum, aber dann wende ich mich auch wieder wichtigeren Sachen zu. Hier: http://www.superblue.info/_de/_fotos/_fotos.html kann man übrigens mal ne Galerie von mir "bewundern", auf dass ich jetzt die Hucke voll kriege zwecks mangelhaften Quellcodes.

                Gruß von Aybee

    2. Hallo,

      habe den Code nochmal ein wenig überarbeitet. Jetzt benötigt man auch keine Höhenangaben mehr. Getestet mit FF1.03 u. IE 5.5. Das <wrb> am Ende gehört nicht zum HTML-Standard und ist dafür da, damit IE5.5 die Zeilen umbricht. FF1.03 scheint einen kleinen Bug zu haben. Beim öffnen der Seite ist der Text erst mal linksbündig, wenn man das Fenster dann verkleinert, so dass die Zeile umbricht, ist er zentriert, dann kann man das Fenster wieder vergrößern, und der Text bleibt zentriert.

      Ich habe mich übrigens für eine Tabellenlösung entschieden, weil eine Zelle immer noch der beste Ort ist um irgendetwas vertikal auszurichten. Ich bitte um Belehrungen;-)

        
      <html>  
       <head>  
         <style type="text/css">  
          <!--  
         /*table,img { border:solid 1px; }*/  /*Kommentar entfernen um Elemente zu sehen*/  
           img { display:block; }         /*damit der Text unterm Bild steht*/  
            td { vertical-align:bottom; }     /*richtet den Inhalt in allen Zellen untenb. aus*/  
           table table { display:inline; }    /*damit die Tab. für die Bilder nebeneinander stehen*/  
           table table td { text-align:center; } /* Ausrichtung für Bilder u. Text*/  
          -->  
         </style>  
       </head>  
       <body>  
        <table><tr><td>  
         <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="100" height="100" alt="1" />Bild 1</td></tr></table><wbr>  
         <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="100" height="50" alt="2" />Bild 2</td></tr></table><wbr>  
         <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="50" height="100" alt="3" />Bild 3</td></tr></table><wbr>  
         <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="150" height="150" alt="4" />Bild 4</td></tr></table><wbr>  
        <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="100" height="150" alt="5" />Bild 5</td></tr></table><wbr>  
        <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="150" height="100" alt="6" />Bild 6</td></tr></table><wbr>  
        <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="180" height="50" alt="7" />Bild 7</td></tr></table><wbr>  
        <table><tr><td><img src="http://de.selfhtml.org/src/logo.gif" width="50" height="180" alt="8" />Bild 8</td></tr></table><wbr>  
        </td></tr></table>  
        </body>  
      </html>
      

      Gruß von Aybee

  6. Hi,

    Das funktioniert auch tadellos wenn die Bilder alle gleich hoch sind. Sind sie es nicht (wie in o.g. Testcase), gibt es zwei Probleme:

    Schau Dir mal diese Seite an; zugegeben eine unschöne Verschachtelung, aber immer noch besser als sinnfreie Tabellen.

    freundliche Grüße
    Ingo

    1. Hallo,

      Schau Dir mal diese Seite an; zugegeben eine unschöne Verschachtelung, aber immer noch besser als sinnfreie Tabellen.

      Danke für den Link. Die Verschachtelung wäre da aber nicht mal so schlimm. Aber für den Ausgleich der unterschiedlichen Bildhöhen
        <div class="BlindDiv" style="line-height: 33px;">
      einzufügen, wobei die line-height auf die Differenz zwischen den übrigen und diesem Bild gesetzt ist, das ist schon sehr unschön und auch fehleranfällig.
      Aber immerhin ein Kniff, auf den ich nicht gekommen bin.

      schönen Gruß,
      Johannes

      1. Hi,

        Aber für den Ausgleich der unterschiedlichen Bildhöhen
          <div class="BlindDiv" style="line-height: 33px;">
        einzufügen, wobei die line-height auf die Differenz zwischen den übrigen und diesem Bild gesetzt ist, das ist schon sehr unschön und auch fehleranfällig.

        Unschön ja, aber fehleranfällig?

        freundliche Grüße
        Ingo

  7. Hi

    ich habe für eine dynamische[1] Galerie die sich in einem CMS befindet einen unschöneren Ansatz verfolgt.

    zu [1]:
    Die Galerie entsteht durch das Auslesen von Ordnernstrukturen und denen darin enthaltenen Bildern auf dem Server. Als Sprache setzte cih CFML ein.

    Mittels ImageMagick werden von Bildern von denen noch keine Thumbnails exisieren genau jene erstellt. Wobei die Abmessungen immer 80px x 53px betragen...je nachdem ob Quer- oder Hochformat entsprechen die Werte eben Höhe und Breite oder umgekehrt.

    Da es mir nicht möglich ist serverseitig die Abmaße eines Bildes zu ermitteln nutze ich dazu JavaScript.
    Bei der Ausgabe der Bilder bekommt jedes Bild eine ID zugeordnet, gefolgt von einem JavaScript (nach dem IMG-Tag). In diesem JavaScript ermittel ich durch abfragen der Höhe ob das Bild Hoch- oder Querformat hat und richte es dann entsprechend aus via Zugriff auf "margin-top".
    So erhalte ich immer sowohl vertikal als auch horziontal (fast ;)) zentrierte Thumpnails die aussehen wie ein Diapositiv.

    Ein "Datensatz" sieht dann bei der Ausgabe so aus:

    <div  style="width: 100px; height: 80px; float: left; background: #FFFFFF; border: 1px solid #333333; margin: 5px; padding: 10px 0 10px 0;" title="objekte_001_gross.jpg">
    <img src="/imgpool/Objekte/vorschau_objekte_001_gross.jpg" title="objekte_001_gross.jpg" alt="objekte_001_gross.jpg" style="border: 1px solid #333333;" id="objekte_001_gross.jpg">
    <script language="JavaScript">
    if (document.getElementById("objekte_001_gross.jpg").height < 80) {document.getElementById("objekte_001_gross.jpg").style.marginTop = "13px;"};
    </script>
    </div>

    Es geht bestimmt auch noch schöner :).

    so long
    Ole
    (8-)>

    --
    Trotz Equalizer und Compressor, der Sound wird matschig unn nett
    bässer!