Johannes Gonser: Layoutveränderungen durch Umbrüche im Quellcode..?

Hallo Community,

mir ist aufgefallen, dass sich durch eine Neustrukturierung meines Codes (Einrückung und Umbrüche) teilweise die Abstände (vertikal und horizontal) um Bilder herum ändern (IE7 und Firefox 2.0 mit selbem Ergebnis getestet) Gibt es dafür eine Erklärung? Ich dachte bisher immer die Struktur des Codes hat keine Auswirkungen auf das Layout...

Wenn ich es richtig sehe, liegt es an den Zeilenumbrüchen innerhalb von Absätzen. Bilder habe ich grundsätzlich in einen <p>-Tag eingeschlossen. Wenn ich folgende zwei Varianten wähle, gibt es Abweichungen bei den Abständen :

<p>
<img src="test.gif" /><img src="test.gif" />
</p>

<p>
<img src="test.gif" />
<img src="test.gif" />
</p>

Ich verwende den XHTML 1.0 Transitional Modus.

Schöne Grüße
Jo

  1. Die neue Zeile wird als Leerzeichen interpretiert. Du hast also plätzlich ein Leerzeichen wo keines sein sollte. Normalerweise hat es keine Auswirkungen (bei z.B. Text), da an der Stelle des Umruches sowieso ein Leerzeichen gehört hätte. (Du brichts ja nicht mitten im Wort). Du kannst allerdings per CSS eine Anweisung geben, das zu unterlassen.

    1. Die neue Zeile wird als Leerzeichen interpretiert. Du hast also plätzlich ein Leerzeichen wo keines sein sollte. Normalerweise hat es keine Auswirkungen (bei z.B. Text), da an der Stelle des Umruches sowieso ein Leerzeichen gehört hätte. (Du brichts ja nicht mitten im Wort). Du kannst allerdings per CSS eine Anweisung geben, das zu unterlassen.

      Hallo Rafael,

      mit welcher CSS-Anweisung kann ich dieses Problem beseitigen? Danke schon mal für Deine Hilfe :-)

      Gruß
      Jo

      1. Mit whitespace: nowrap;

        1. Mit whitespace: nowrap;

          Hallo nochmal und danke für die schnelle Hilfe :-)

          Welchem Element muss ich die Definition zuordnen? Allgemein dem body-, dem p- oder dem img-Element?

          Gruß
          Jo

          1. Ich überlege gerade, ob ich dir Mist erzählt habe ;) Die Anweisung ist es aber leider nicht. Damit verhinderst du zwar Umbrüche, aber als Leerzeichen werden sie trotzdem interpretiert.

            1. Ich überlege gerade, ob ich dir Mist erzählt habe ;) Die Anweisung ist es aber leider nicht. Damit verhinderst du zwar Umbrüche, aber als Leerzeichen werden sie trotzdem interpretiert.

              Gibt es tatsächlich keine Möglichkeit bei einem Umbruch im Quelltext das Leerzeichen zu unterdrücken?

              1. Zumindest fällt mir keine ein. Ich denke mit JavaScript liese sich was basteln, aber auch nicht unbedingt befriedigend.

                1. Zumindest fällt mir keine ein. Ich denke mit JavaScript liese sich was basteln, aber auch nicht unbedingt befriedigend.

                  Ok, dann eine andere Frage ;-) Gibt es ein gutes Tool, mit welchem ich meinen Quellcode formatieren bzw. Einrücken lassen kann, ohne das es mir etwas zerschießt bzw. sich ev. das Problem wieder beheben lässt?

                  Gruß
                  Jo

              2. Hallo,

                Gibt es tatsächlich keine Möglichkeit bei einem Umbruch im Quelltext das Leerzeichen zu unterdrücken?

                Naja, du könntest die Bilder auch mit display:block; formatieren und dann nach links floaten lassen.

                mfg. Daniel

  2. das ist per definition so, umgehen kannst du das so:

    <p><img
    src="test.gif"><img
    src="test.gif">
    </p>

    nicht sehr schön, aber lesbarer als alles auf einer zeile.

  3. Hello out there!

    Wenn ich folgende zwei Varianten wähle, gibt es Abweichungen bei den Abständen :

    <p>
    <img src="test.gif" /><img src="test.gif" />
    </p>

    Zwischen den 'img'-Elementen ist nichts.

    <p>
    <img src="test.gif" />
    <img src="test.gif" />
    </p>

    Zwischen den 'img'-Elementen ist ein Textknoten: ein Whitespace. [http://de.selfhtml.org/html/allgemein/editieren.htm@title=SELFHTML] Dieses wird als Leerzeichen angezeigt. Ändere die Schriftgröße und du siehst, wie sich die Breite des Leerzeichens (der Abstand zwischen den Bildern) ändert.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  4. <p>
    <img src="test.gif" />
    <img src="test.gif" />
    </p>

    <p>
    <img src="test.gif" /><br />
    <img src="test.gif" /><br />
    </p>

    probiers mal damit, das toetet die laestigen, eigentlich nicht existenten whitespace im internet exploder

    1. Hello out there!

      probiers mal damit, das toetet die laestigen, eigentlich nicht existenten whitespace im internet exploder

      Was soll „eigentlich nicht existenten“ heißen? Natürlich sind die Whitespaces existent.

      Und warum sollte man einen Zeilenumbruch einfügen, den man gar nicht haben will?

      See ya up the road,
      Gunnar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)