Alexander kiel: Bilder nahtlos aneinanderreihen

HI an alle,

mein Problem klingt eigentlich recht simbel. Ich möchte die Bilder auf: http://www.01019freenet.de/kiel/test.html ohne Abstände darstellen.

Wenn ich mit negativen Abständen mittels CSS arbeite funktioniert die vollständig im IE5 (http://www.01019freenet.de/kiel/ie5.html und nur für die horizontale Richtung im IE4.

Ich habe es auch schon mit einer Tabelle probiert. Dort habe ich aber das gleiche Problem, dass er mir immer rechts und unten einen 4-Pixel Abstand darstellt. Dabei hatte ich jedes Bild in einer eigenen <td> und durch <img ... border=1> kann man auch feststellen, dass es nicht am Bild liegt.

Wer kann mir helfen?
Ich danke im Vorraus.

ALEX

  1. mein Problem klingt eigentlich recht simbel. Ich möchte die Bilder auf: http://www.01019freenet.de/kiel/test.html ohne Abstände darstellen.

    Wenn ich mit negativen Abständen mittels CSS arbeite funktioniert die vollständig im IE5 (http://www.01019freenet.de/kiel/ie5.html und nur für die horizontale Richtung im IE4.

    pack das ganze in eine <div>

    <div>
    <img src="test-dateien/logo.gif" width=100 height=100 alt="" border="0"><br><img src="test-dateien/first.gif" width=80 height=10 alt="" border="0"><br>
    <img src="test-dateien/n.gif" width=15 height=20 alt="" border="0"><img src="test-dateien/home_n.gif" width=65 height=20 alt="" border="0"><br>
    <img src="test-dateien/n.gif" width=15 height=20 alt="" border="0"><img src="test-dateien/anmeldung_n.gif" width=65 height=20 alt="" border="0">
    </div>

    Wilhelm

    1. <img src="test-dateien/n.gif" width=15 height=20 alt="" border="0"><img src="test-dateien/home_n.gif" width=65 height=20 alt="" border="0">

      <img src="test-dateien/n.gif" width=15 height=20 alt="" border="0"><img src="test-dateien/anmeldung_n.gif" width=65 height=20 alt="" border="0">
      </div>

      Hi Wilhelm,

      Danke für deine Idee. Allerdings ist nicht das <div> der Grund, warum es bei deiner Version funktioniert, sondern die Anordnung der Tags im Quelltext.

      Du hast die beiden <img> Tags, die in einer Zeile erscheinen sollen auch im Quelltext in eine Zeile geschrieben. Ich muß sagen, dass ich noch nie gehört habe, dass sich die Form des Quelltextes auf das Layout der Seite auswirkt. Deshalb bin ich auch nicht auf diese Lösungsidee gekommen.

      Ich finde, dass man dieses Phänomen einmal genauer diskusieren sollte, falls es noch nicht bekannt ist.

      Ich würde mich auf eine kleine Rückantwort freuen.

      Ein dankbarer, aber sich wundernder

      ALEX

      1. Hallo!

        Ich finde, dass man dieses Phänomen einmal genauer diskusieren sollte, falls es noch nicht bekannt ist.

        Entscheidend ist glaube ich nicht, ob die Tags in einer Zeile stehen, sondern ob sie unmittelbar auf einander folgen oder nicht, d.h. ob Text dazwischen (selbst wenn dieser leer ist).

        <img ...> <img ...>

        dürfte das gleiche ergeben wie

        <img ...>
        <img ...>

        (jeweils leerer Text zwischen den Tags) aber etwas anderes als

        <img><img>

        (kein Text zwischen den Tags).

        Vielleicht ist es aber auch ganz anders. ;-)

        Steffen

        1. Hallo,

          <img ...> <img ...>

          dürfte das gleiche ergeben wie

          <img ...>
          <img ...>

          nicht ganz.. ein zeillenumbruch wird wie zwei Spaces behandelt.

          Wir hatten glaube ich das thema schon mal.. besonders der NS ist da ziemlich genau..

          ciao
          Ludwig

        2. Auch hallo!

          Entscheidend ist glaube ich nicht, ob die Tags in einer Zeile stehen,

          doch

          <img ...> <img ...>

          dürfte das gleiche ergeben wie

          <img ...>
          <img ...>

          eben nicht, wie bereits Ludwig sagte.

          Leute, Eure Browser habe alle die wunderbare Option "Alles markieren", die sich meistens innerhalb des Menüpunktes "Bearbeiten" befindet... Damit sieht man sehr wohl, was an hard-Returns (also nicht <br> sondern im Editor eingegeben Zeilenumbrüche) entsteht...

          Leider scheinen nur wenige User diese Menüoption zu kennen/benutzen...

          Bis danndann

          PAF (patrickausfrankfurt)

          1. Hallo Ludwig und Patrick!

            Entscheidend ist glaube ich nicht, ob die Tags in einer Zeile stehen,

            doch

            <img ...> <img ...>

            dürfte das gleiche ergeben wie

            <img ...>
            <img ...>

            eben nicht, wie bereits Ludwig sagte.

            Ganz so schnell gebe ich mich dann doch nicht geschlagen. Es mag ja sein, daß die Browser einen Zeilenumbruch als zwei Leerzeichen interpretieren, das ist aber zumindest in diesem Falle einigermaßen Wurst, weil nebeneinanderstehende Leerzeichen sowieso nur wie eins dargestellt werden. In folgendem Test passiert denn auch genau das, was ich im ersten Posting vermutet hatte:

            http://steffengerlach.de/test.html

            Steffen

            1. Hallo Steffen,

              Ganz so schnell gebe ich mich dann doch nicht geschlagen.

              Ludwig, Patrick und Wilhelm haben aber schon das Grundsätzlichste gesagt.
              Das Verhalten der Browser ist eigentlich zwingend, jedenfalls wenn
              man die textorientierte Geschichte von HTML im Hinterkopf behält.
              Browser sollten irgendwelchen Text bestmöglichst auf dem Bildschirm
              des Anwenders darstellen. Hierzu setzen sie einen Zeilenumbruch im
              Text in ein Leerzeichen um, sonst würden einfach umbrochene Worte
              schlicht direkt aneinandergereiht, oder Du müßtest explizit dafür
              sorgen, daß jede Textzeile mit einem Leerzeichen endet.
              Damit das auch funktioniert wenn eine Zeile mit einem Leerzeichen
              endet, werden zwei Leerzeichen zu einem reduziert.

              Und, Browser interpretieren doch zu recht alles als Text was nicht
              in Tags enthalten ist.

              <img ...> <img ...>

              Sind zwei Tags mit einem Leerzeichen dazwischen. => Lücke.

              <img ...>
              <img ...>

              Sind zwei Tags mit einem Zeilenumbruch dazwischen.
              Dieser wird zum Leerzeichen. => Lücke.

              dürfte das gleiche ergeben wie ...

              So wie ich das sehe, siehst Du das richtig.
              Aber Du sagtest doch, daß Du Bilder lückenlos aneinanderreihen willst
              und dazu mußt Du den Browser davon abhalten Leerzeichen zu setzen.
              Und das schaffst Du indem Du weder Leerzeichen noch Zeilenumbrüche
              zwischen Deine Bilder setzt. Also <img ...><img ...>, oder auch <img
              ...><img ...> (da ist der Umbruch innerhalb des Tags).

              Klaus

              1. Lieber Klaus!

                Vielen Dank für die ausführliche Begründung meiner Aussage.

                Ludwig, Patrick und Wilhelm haben aber schon das Grundsätzlichste gesagt.

                ...

                Aber Du sagtest doch, daß Du Bilder lückenlos aneinanderreihen willst

                ...

                Vielleicht liest Du Dir noch einmal durch, wer was gesagt hat.

                Dein dankbarer Steffen

                1. Hallo,

                  Vielleicht liest Du Dir noch einmal durch, wer was gesagt hat.

                  ich denke du bringst jetzt was durcheinander :-)

                  naja, wie dem auch sei... zur veranschaulichung hier mal eine beispielseite: http://212.186.64.243/SH_Store/space.html
                  view-source:http://212.186.64.243/SH_Store/space.html

                  ciao
                  Ludwig

                  1. Hallo Ludwig!

                    Vielleicht liest Du Dir noch einmal durch, wer was gesagt hat.

                    ich denke du bringst jetzt was durcheinander :-)

                    naja, wie dem auch sei... zur veranschaulichung hier mal eine beispielseite: http://212.186.64.243/SH_Store/space.html

                    ----v hier ein Leerzeichen ;-)

                    [ link:view-source:http://212.186.64.243/SH_Store/space.html <- hier ist auch ein Übeltäter , die fehlende Klammer "]"

                    ;-)

                    also der richtige view-source-Link noch mal:

                    view-source:http://212.186.64.243/SH_Store/space.html

                    An Alexander: ist doch ganz einfach oder? http://212.186.64.243/SH_Store/alexander_kiel.html

                    Vie

                2. Hallo,

                  Vielleicht liest Du Dir noch einmal durch, wer was gesagt hat.

                  ich denke du bringst jetzt was durcheinander :-)

                  naja, wie dem auch sei... zur veranschaulichung hier mal eine beispielseite: http://212.186.64.243/SH_Store/space.html
                  view-source:http://212.186.64.243/SH_Store/space.html

                  das berücksichtigt so ziemlich alle varianten.. (umbrüche inerhalb tags NICHT :-)

                  An Alexander: ist doch ganz einfach oder? http://212.186.64.243/SH_Store/alexander_kiel.html

                  ciao
                  Ludwig

                  1. An Alexander: ist doch ganz einfach oder? http://212.186.64.243/SH_Store/alexander_kiel.html

                    Hi Ludwig,

                    Danke Ludwig für deine ausfühliche Darstellung. wenn man es weis ist es natürlich einfach.

                    Wie hier schon angesprochen wurde darf man nicht vergessen, dass der Browser jedes Zeichen zwischen den Tag's interpetiert. Ich hatte das vernachlässigt.

                    Der Punkt war, dass ich als alter Programierer immer alles übersichtlich und mit Einrückungen geschrieben hatte.
                    z.B.
                    <table>
                    <tr>
                      <td>
                       <img...>
                      </td>
                      <td>
                       <img...>
                      </td>
                    </tr>
                    <tr>
                      <td>
                       <img...>
                      </td>
                      <td>
                       <img...>
                      </td>
                    </tr>
                    </table>

                    Diesen Stil muß ich nun entsprechend ändern.
                    Und ich danke noch mal allen Beteiligten, weil ich warscheinlich nie alleine auf diese Idee gekommen währe.

                    Dank...

                    ALEX

                3. Hallo Steffen,

                  Vielleicht liest Du Dir noch einmal durch, wer was gesagt hat.

                  Du hast recht, Du warst der falsche Adressat.

                  Klaus

            2. Hallo Stefen!

              Entscheidend ist glaube ich nicht, ob die Tags in einer Zeile stehen,

              doch

              Mein "doch" war hier richtig (Wenn die pics nahtlos ananeinder stehen sollgen).

              <img ...> <img ...>

              dürfte das gleiche ergeben wie

              <img ...>
              <img ...>

              eben nicht, wie bereits Ludwig sagte.

              Hier war mein "eben nicht" leider falsch, wie Du bereits berichtigt hast. Erst denken, dann absenden, daran hätte ich mich halten sollen.

              Ganz so schnell gebe ich mich dann doch nicht geschlagen.

              Sollst Du ja auch nicht: wir sind hier um konstruktiv zu streiten und Lösungen anzubitten.

              http://steffengerlach.de/test.html

              Ich habe eine Bitte: wenn diese Datei nicht zuviel Platz auf Deinem Server einnimmt, dann lasse sie dort: da diese Frage zwar nicht allzuoft aber dennoch in regelmässingen Abständen wiederkommt, könnten wir darauf verweisen.

              Vielleicht kannst Du sie mit folgendem ergänzen:

              <img align=left>TEXT<img align=left> <- das linke Bild ist eine Zeile weiter unten. Richtig ist:
              <img align=left><img align=right>TEXT, was schon in der Forumsauslese beschrieben steht.

              Wäre eine Idee, oder?

              Bis danndann

              PAF (patrickausfrankfurt)

              1. Hallo.

                http://steffengerlach.de/test.html

                Ich habe eine Bitte: wenn diese Datei nicht zuviel Platz auf Deinem Server einnimmt, dann lasse sie dort: da diese Frage zwar nicht allzuoft aber dennoch in regelmässingen Abständen wiederkommt, könnten wir darauf verweisen.

                Kein Problem.

                Vielleicht kannst Du sie mit folgendem ergänzen:

                <img align=left>TEXT<img align=left> <- das linke Bild ist eine Zeile weiter unten. Richtig ist:
                <img align=left><img align=right>TEXT, was schon in der Forumsauslese beschrieben steht.

                Das Beste wäre vielleicht, wenn gleich jemand (der ausreichend Erfahrung mit HTML hat) Informationen dieser Art auf einer besonderen Seite zusammenträgt, z.B. auch die Varianten bzgl. der vertikalen Abstände wie auf der Seite, die Ludwig gepostet hat.

                Steffen

                1. Hallo,

                  Das Beste wäre vielleicht, wenn gleich jemand (der ausreichend Erfahrung mit HTML hat) Informationen dieser Art auf einer besonderen Seite zusammenträgt, z.B. auch die Varianten bzgl. der vertikalen Abstände wie auf der Seite, die Ludwig gepostet hat.

                  Das Verzeichniss "SH_Store" ist für sehr sehr lange zeit gültig (ewig?? :-) eigens dafür angelegt.

                  ciao
                  Ludwig