Doris Hemmer: <img> stört Texteinzug

Hallöchen!

Angenommen, im Sylesheet steht u.a.
p {text-indent:12pt;}

Und das im HTML-Source
<p>Texttest Testtext</p>

<p><img src="test.gif" width=294 height=412>Texttest Testtext</p>

Dann wird die Zeile des ersten Absatz eingezogen, die zweite aber nicht.

Ob der Einzug da jetzt typografisch schön wäre oder nicht ist eine andere Sache, aber welchen Grund gibt's, den Einzug da nicht zu machen?
Aus der Spec mit den Boxes und Line Boxes werde ich leider nicht ganz schlau.

Tschüß,
Doris

  1. Hallöchen!

    nabend

    Angenommen, im Sylesheet steht u.a.
    p {text-indent:12pt;}

    Und das im HTML-Source
    <p>Texttest Testtext</p>

    <p><img src="test.gif" width=294 height=412>Texttest Testtext</p>

    Dann wird die Zeile des ersten Absatz eingezogen, die zweite aber nicht.

    ja,m das ist die definition von text-indent:, wenn ich nicht irre.

    Ob der Einzug da jetzt typografisch schön wäre oder nicht ist eine andere Sache, aber welchen Grund gibt's, den Einzug da nicht zu machen?
    Aus der Spec mit den Boxes und Line Boxes werde ich leider nicht ganz schlau.

    wenn du ihn da überall haben willst, dann nimm: p{margin-left:12px;}

    Tschüß,
    Doris

    Fabian

    1. Hallo Fabian,

      Angenommen, im Sylesheet steht u.a.
      p {text-indent:12pt;}

      Und das im HTML-Source
      <p>Texttest Testtext</p>

      <p><img src="test.gif" width=294 height=412>Texttest Testtext</p>

      Dann wird die Zeile des ersten Absatz eingezogen, die zweite aber nicht.

      Ach, ne, hatte ich mich dumm ausgedrückt. Natürlich wirkt text-ident nur auf die erste Zeile, soll es ja auch.

      Ich meinte "Dann wird die Zeile des ersten Absatz eingezogen, die erste Zeile des zweiten Absatzes aber nicht."
      Ich hatte ja oben zwei <p>...</p> angegeben.

      Gruß,
      Doris

      1. Hallo Fabian,

        nabend

        Angenommen, im Sylesheet steht u.a.
        p {text-indent:12pt;}

        Und das im HTML-Source
        <p>Texttest Testtext</p>

        <p><img src="test.gif" width=294 height=412>Texttest Testtext</p>

        Dann wird die Zeile des ersten Absatz eingezogen, die zweite aber nicht.

        Ach, ne, hatte ich mich dumm ausgedrückt. Natürlich wirkt text-ident nur auf die erste Zeile, soll es ja auch.

        Ich meinte "Dann wird die Zeile des ersten Absatz eingezogen, die erste Zeile des zweiten Absatzes aber nicht."
        Ich hatte ja oben zwei <p>...</p> angegeben.

        ah, missverständnis. ich würde drauf tippen, dass es mit grafiken nicht geht (es heißt ja _text_-indent, was darauf schliessen lässt...), hast du mal probiert, _vor_ die grafik einfach einen   oder ein anderes hite-space zu machen?

        Gruß,
        Doris

        Fabian *gähn* (nicht wegen dem thema, sondern wegen der müdigkeit *g*)

        1. 'n Abend Gähner,

          ah, missverständnis. ich würde drauf tippen, dass es mit grafiken nicht geht (es heißt ja _text_-indent, was darauf schliessen lässt...),

          Ja, das schon. Es soll ja auch der Text und nicht das Bild eingezogen werden. Der IE zieht ja auch ein, aber der normalerweise so konforme Mozilla nicht. Wenn das ein Feature ist, wegen mir, ich möcht' bloß wissen, ob und warum.

          hast du mal probiert, _vor_ die grafik einfach einen   oder ein anderes hite-space zu machen?

          Äh, jetzt schon. Damit wird der Text zwar eingezogen, gleichzeitig beginnt er aber nicht mehr rechts vom Bild, sondern die erste Zeile hängt über dem Bild, d.h. es wird von drei Seiten umflossen (natürlich nicht mit dem kurzen Stück Text, in meiner Anwendung ist es jede Menge Text).

          Fabian *gähn* (nicht wegen dem thema, sondern wegen der müdigkeit *g*)

          Uff, ich dachte schon ...

          Bye,
          Doris

          1. Hi Doris,

            Äh, jetzt schon. Damit wird der Text zwar eingezogen, gleichzeitig beginnt er aber nicht mehr rechts vom Bild, sondern die erste Zeile hängt über dem Bild, d.h. es wird von drei Seiten umflossen (natürlich nicht mit dem kurzen Stück Text, in meiner Anwendung ist es jede Menge Text).

            img {float: left;} sollte dir helfen.

            ... im <head>
            <style type="text/css">
            <!--
            p {text-indent:12pt;}
            img {float: left;}
            -->
            </style>

            ... im <body>
            <body>
            <p>viel text</p>
            <p><img src="test.gif" width=294 height=412>viel text</p>
            </body>

            .greetings Peter

            1. Hallo Peter,

              img {float: left;} sollte dir helfen.

              Äh, nö, mit der Ausrichtung an sich habe ich ja kein Problem.
              Nur ob mit oder ohne float:left, im Falle von
              <p> <img>Text</p>, also mit einem Space zwischen p und img wie von Fabian vorgeschlagen, hängt die erste Zeile des Texte eben über'm Bild.

              Gruß,
              Doris

  2. hi

    Dann wird die Zeile des ersten Absatz eingezogen, die zweite aber nicht.

    hm.. einen grund find' ich so auf die schnelle in der CSS-Spec nicht... welcher Browser macht's wie?

    Grüße aus Bleckede

    Kai

    1. hi auch,

      Dann wird die Zeile des ersten Absatz eingezogen, die zweite aber nicht.

      hm.. einen grund find' ich so auf die schnelle in der CSS-Spec nicht... welcher Browser macht's wie?

      IE (5.0) und Opera (6.02) ziehen auch nach einem Bild ein, Mozilla (1.1b) nicht.

      Tschau,
      Doris