Manfred: Einrücken

Mit <p style="margin-left:40px"> Absatztext </p> kann man einen Absatz einrücken, okay.
Nun dachte ich, mit <div style="margin-left:40px"> Text </div> ist es insofern anders, dass NICHT ein neuer Absatz (mit Leerzeile am Anfang) gebildet wird, so ist es aber nicht.
Wie kann ich also einrücken OHNE anfängliche Leerzeile?

Dank und Gruß
Manfred

  1. Hallo,

    Mit <p style="margin-left:40px"> Absatztext </p> kann man einen Absatz einrücken, okay.
    Nun dachte ich, mit <div style="margin-left:40px"> Text </div> ist es insofern anders, dass NICHT ein neuer Absatz (mit Leerzeile am Anfang) gebildet wird, so ist es aber nicht.

    zunächst mal: Deine Frage passt eher ins Themengebiet CSS als in HTML, denn es geht ja nur um Formatierungen und visuelle Eigenschaft. Übrigens kann je nach Kontext auch padding anstatt margin günstiger sein.

    Wenn man die beabsichtigte Semantik (ein p-Element ist ein Textabsatz, ein div-Element ist ein neutrales Blockelement zur Gruppierung) beiseite lässt, sind p und div technisch so ziemlich dasselbe. Okay, p hat durch das Default-Stylesheet des Browsers üblicherweise gewisse Abstände nach oben und unten und strengere Regeln bezüglich der Verschachtelung (p darf keine weiteren Blockelemente enthalten), aber sonst ...

    Beide sind Blockelemente - und das ist das Entscheidende. Ein Blockelement beansprucht einen rechteckigen Bereich, einen Block, in dessen linker oberer Ecke (zzgl. padding) normalerweise der Inhalt beginnt. Sie erzeugen aber keine Leerzeile. Ich verstehe wohl, was du damit ausdrücken willst, aber die Formulierung ist falsch. Sie erzeugen lediglich einen neuen Block, der unterhalb des bis dahin ausgegebenen Inhalts beginnt.

    Wie kann ich also einrücken OHNE anfängliche Leerzeile?

    Da verstehe ich nicht, wie du dir das vorstellst. Sollen mitten im Absatz ein paar Zeilen eingerückt sein? Das ist AFAIK nicht möglich. Oder soll nur die erste Zeile eingerückt sein? Dafür wäre text-indent gedacht. Oder denkst du noch an etwas anderes? Wenn ja, beschreibe es bitte genauer.

    So long,
     Martin

    --
    Butterkeksverteiler zu werden ist vermutlich eine der wenigen beruflichen Perspektiven, die sich noch bieten, wenn man einen an der Waffel hat.
      (wahsaga)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo,

      Mit <p style="margin-left:40px"> Absatztext </p> kann man einen Absatz einrücken, okay.
      Nun dachte ich, mit <div style="margin-left:40px"> Text </div> ist es insofern anders, dass NICHT ein neuer Absatz (mit Leerzeile am Anfang) gebildet wird, so ist es aber nicht.

      zunächst mal: Deine Frage passt eher ins Themengebiet CSS als in HTML, denn es geht ja nur um Formatierungen und visuelle Eigenschaft. Übrigens kann je nach Kontext auch padding anstatt margin günstiger sein.

      Wenn man die beabsichtigte Semantik (ein p-Element ist ein Textabsatz, ein div-Element ist ein neutrales Blockelement zur Gruppierung) beiseite lässt, sind p und div technisch so ziemlich dasselbe. Okay, p hat durch das Default-Stylesheet des Browsers üblicherweise gewisse Abstände nach oben und unten und strengere Regeln bezüglich der Verschachtelung (p darf keine weiteren Blockelemente enthalten), aber sonst ...

      Beide sind Blockelemente - und das ist das Entscheidende. Ein Blockelement beansprucht einen rechteckigen Bereich, einen Block, in dessen linker oberer Ecke (zzgl. padding) normalerweise der Inhalt beginnt. Sie erzeugen aber keine Leerzeile. Ich verstehe wohl, was du damit ausdrücken willst, aber die Formulierung ist falsch. Sie erzeugen lediglich einen neuen Block, der unterhalb des bis dahin ausgegebenen Inhalts beginnt.

      Wie kann ich also einrücken OHNE anfängliche Leerzeile?

      Da verstehe ich nicht, wie du dir das vorstellst. Sollen mitten im Absatz ein paar Zeilen eingerückt sein? Das ist AFAIK nicht möglich. Oder soll nur die erste Zeile eingerückt sein? Dafür wäre text-indent gedacht. Oder denkst du noch an etwas anderes? Wenn ja, beschreibe es bitte genauer.

      So long,
      Martin

      Was ich will mit dem Einrücken, ist:

      Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
      Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
      Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
            Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
            Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
            Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,

      Also keine Leerzeile vor dem Eingerückten.

      Dank und Gruß
      Manfred

      1. Om nah hoo pez nyeetz, Manfred!

        Bitte vermeide Vollzitate.

        Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
        Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
        Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
              Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
              Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
              Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,

        Also keine Leerzeile vor dem Eingerückten.

        Beschäftige dich mit Abständen.

        ggf. kann es auch so aussehen.

        Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
        Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Tee
        Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text
              Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, eingerückt,
              Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
              Links eingerückt, Links eingerückt, Links eingerückt

        Dieses Verhalten kannst du mit text-align (und text-align-last) steuern.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Nut und Nutella.

        1. Hallo,

          Bitte vermeide Vollzitate.

          ja, bitte.

          Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
          Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
          Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
                Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
                Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,
                Links eingerückt, Links eingerückt, Links eingerückt, Links eingerückt,

          Also keine Leerzeile vor dem Eingerückten.

          Beschäftige dich mit Abständen.

          die vermeintliche Leerzeile, also der Abstand, wird aller Wahrscheinlichkeit nach wirklich von margins und/oder paddings herrühren und kann an eben dieser Baustelle "justiert" werden.

          Aber was die Einrückung angeht, verstehe ich Manfred immer noch so, dass der ganze Beispieltext _ein_ zusammenhängender Absatz sein soll, der ab einer bestimmten vertikalen Position eingerückt ist - wahrscheinlich so wie eine Art Formsatz, bei dem der Text flexibel einem festen Objekt wie z.B. einem Bild ausweicht.
          Und wie man das realisieren könnte, will mir immer noch nicht einfallen. Ich vermute, da ist CSS derzeit überfordert.

          So long,
           Martin

          --
          Treffen sich zwei Freundinnen nach langer Zeit wieder. "Gut siehste aus. Hast du abgenommen?" - "Nö." - "Hmm, dann haste zugenommen. Steht dir aber gut."
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. Hallo,

            wahrscheinlich so wie eine Art Formsatz, bei dem der Text flexibel einem festen Objekt wie z.B. einem Bild ausweicht.

            Dann ist float angebracht. Dafür ist es schließlich ursprünglich gedacht gewesen, zum Beispiel um Bilder zu umfließen.

            Aber was die Einrückung angeht, verstehe ich Manfred immer noch so, dass der ganze Beispieltext _ein_ zusammenhängender Absatz sein soll

            Das ist ja auch mein Problem bei der Lösungssuche. Manfred kann offensichtlich nicht deutlich rüberbringen, was er konkret erreichen möchte.

            In dem Fall würde ich ein neutrales span-Element benutzen. Das bekommt ein linkes margin und wird mit "display: inline-block" margin-fähig gemacht.

            http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_19_manfred_02_text_einr�cken.html

            Gruss

            MrMurphy

            1. @@MrMurphy:

              nuqneH

              Das ist ja auch mein Problem bei der Lösungssuche. Manfred kann offensichtlich nicht deutlich rüberbringen, was er konkret erreichen möchte.

              “Whoever best describes the problem is the person most likely to solve the problem.” —Dan Roam

              (gefunden in ChrisBs Signatur, irgendwann)

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hallo,

        du musst erst mal rausbekommen, ob die Abstände mit margin oder padding erzeugt wurden.

        Korrekterweise sollten die Abstände zwischen zwei Absätzen mit margin erzeugt worden sein.

        Dann musst du schauen, wie groß das margin des vorangegangenen Absatzes unten ist.

        In meinem Beispiel ist als Abstand nach oben und nach unten jeweils 1rem vorgegeben.

        Bei margins nach oben und unten kommt jetzt eine Besonderheit ins Spiel, die sogenannten "collapsing margins". Das bedeutet, das die Abstände nach unten und oben ineinanderfallen.

        Ist der Abstand nach unten 1rem und vom folgenden Absatz nach oben 1rem beträgt der gesamte Abstand 1rem.

        Ist der Abstand nach unten 3rem und vom folgenden Absatz noch oben 2rem beträgt der gesamte Abstand 3rem. Also der jeweils höhere Wert.

        Wird der Abstand des unteren Absatzes auf 0 gesetzt, bleibt der Abstand des vorigen Absatzen unten bestehen.

        Um den Abstand mit möglichst geringem Aufwand (= möglichst wenig css-Quelltext) zu eliminieren, würde ich dem zweiten Absatz oben einen negativen margin von der Größe des unteren margin mitgeben. Beträgt der margin-bottom des vorigen Absatzes also z. B. 20px, würde ich dem folgenden Absatz einen margin-top von -20px mitgeben. Dann sollte der Zeilenabstand genau den Abständen der Zeilen in den Absätzen entsprechen.

        Mal ein Beispiel mit zwei eingrückten Absätzen ohne Abstand nach oben. Ich habe das mit nth-child() gemacht, das erforderliche css kann aber genauso gut mit Klassen (class) zugewiesen werden:

        http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_19_manfred_01_text_einr�cken.html

        Gruss

        MrMurphy

  2. Hallo,

    ich denke auch das es sinnvoll wäre, wenn du genauer beschreiben würdest, was du überhaupt erreichen möchtest. Das erschließt sich mir noch nicht.

    Gruss

    MrMurphy

  3. Einrücken

    Karl-Franz zu Ferdinand von und bei Dümpelshofen

    Guten Tag.

    Mit <p style="margin-left:40px"> Absatztext </p> kann man einen Absatz einrücken, okay.
    Nun dachte ich, mit <div style="margin-left:40px"> Text </div> ist es insofern anders, dass NICHT ein neuer Absatz (mit Leerzeile am Anfang) gebildet wird, so ist es aber nicht.
    Wie kann ich also einrücken OHNE anfängliche Leerzeile?

    Der Abstand über dem <div>-Block kann auch von jenem Element stammen, das über diesem Block steht. Die Leerzeile, die bei <p>Bla</p><div>Fasel</div> zwischen Bla und Fasel erscheinen sollte, würde also vom <p>-Block stammen, nicht vom <div>.

    Ist für dich nicht ersichtlich, welches Element für solche Lücken in deiner Seite verantwortlich ist, besorge dir Firebug. Zeigst du in dessen Quellcode-Ansicht auf ein Element, hebt er die dazugehörigen Innen- und Außenabstände farblich hervor.