Wie definiere ich einen Zeilenabstand (nicht Zeilenhöhe)?

[kaspar]

Hallo,

soweit ich sehe gibt es keine CSS-Attribut für den Zeilenabstand. Mit dem Attribut line-height lässt sich lediglich die Zeilenhöhe bestimmen, was meist eine Simulation des Zeilenabstandes zulässt, aber in meinem Fall nicht hilft. Wie kann man einen echten Zeilenabstand faken? Ich habe schon mit margin-top und margin-bottom herumexperimentiert, aber das hilft offensichtlich nicht. Irgendwelchen transparent.gif-Schrott oder Tabellen möchte ich dafür nicht benutzen. Irgendwelche Tipps?

Vielen Dank im voraus, Gruß: kaspar

[Orlando]

Hi Kaspar,

soweit ich sehe gibt es keine CSS-Attribut für den Zeilenabstand.

richtig, weil nicht definiert ist, was eine "Zeile" ist.

Mit dem Attribut line-height lässt sich lediglich die Zeilenhöhe bestimmen, was meist eine Simulation des Zeilenabstandes zulässt, aber in meinem Fall nicht hilft. Wie kann man einen echten Zeilenabstand faken? Ich habe schon mit margin-top und margin-bottom herumexperimentiert, aber das hilft offensichtlich nicht.

margin: wirkt zwischen Elementen, nicht zwischen Zeilen. Den Abstand zwischen <p></p> und <p></p> zu definieren, ist demnach möglich.

Irgendwelchen transparent.gif-Schrott oder Tabellen möchte ich dafür nicht benutzen. Irgendwelche Tipps?

Nein, da du die breite der Zeile nicht kennst, kannst du nicht willkürlich [was auch immer] einfügen. Es sei denn, du beraubst HTML seines Vorteils zu fließen.

LG Roland

[Axel Richter]

Hallo Roland,

soweit ich sehe gibt es keine CSS-Attribut für den Zeilenabstand.
richtig, weil nicht definiert ist, was eine "Zeile" ist.

Nein?

Meiner Meinung nach, ist line-height genau die dafür zuständige Eigenschaft.

<p style="line-height:1em;">Einzeiliger Textabsatz ..... </p>

<p style="line-height:1.5em;">Ein-einhalbzeiliger Textabsatz ..... </p>

<p style="line-height:2em;">Zweizeiliger Textabsatz ..... </p>

viele Grüße

Axel

[Michael Jendryschik]

Hallo Roland,

soweit ich sehe gibt es keine CSS-Attribut für den Zeilenabstand.

richtig, weil nicht definiert ist, was eine "Zeile" ist.

CSS2 definiert den rechteckigen Bereich, der eine Zeile Inline-Boxen enthält, als "Zeilenbox", insofern ist der Begriff "Zeile" eindeutig. Die Zeilen-Box reicht für gewöhnlich genau vom linken Rand des umgebenden Blocks zum rechten Rand. Jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box.

Mit dem Attribut line-height lässt sich lediglich die Zeilenhöhe bestimmen, was meist eine Simulation des Zeilenabstandes zulässt, aber in meinem Fall nicht hilft. Wie kann man einen echten Zeilenabstand faken?

Es ist nicht möglich, die Abstände der Zeilen-Boxen zueinander zu bestimmen, lediglich deren Höhe. Weshalb reicht dir das nicht, kaspar?

MI

[Gunther]

Hallo zusammen,

Es ist nicht möglich, die Abstände der Zeilen-Boxen zueinander zu bestimmen, lediglich deren Höhe.

genau, aber wenn man jetzt einfach zwischen die beiden Boxen, deren Abstand zueinander man festlegen will, eine leere Box einfügt, hat man genau das erreicht, worum es IMHO Kasper geht (Beispiel siehe anderes Posting).

Zitat aus CSS2 Spec dt. Übersetzung:
"Leere inzeilige Elemente erzeugen leere Inline-Boxen, aber diese Boxen haben dennoch Ränder, Auffüllung, Rahmen und eine Zeilenhöhe und beeinflussen damit diese Berechnungen genauso wie Elemente mit Inhalt."

Gruß Gunther

[Michael Jendryschik]

Hallo Gunther,

Es ist nicht möglich, die Abstände der Zeilen-Boxen zueinander zu bestimmen, lediglich deren Höhe.

genau, aber wenn man jetzt einfach zwischen die beiden Boxen, deren Abstand zueinander man festlegen will, eine leere Box einfügt, hat man genau das erreicht, worum es IMHO Kasper geht (Beispiel siehe anderes Posting).

Bitte füge in den folgenden Absatz genau an den Stellen zwischen zwei Zeilen-Boxen eine leere Box ein:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<p>

Gruß,

MI

[Gunther]

Hallo Michael,

Bitte füge in den folgenden Absatz genau an den Stellen zwischen zwei Zeilen-Boxen eine leere Box ein:

bitteschön... ;-) (ich hab's jetzt nur mal an einer Stelle gemacht)

<p style="line-height:1.3em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><br style="line-height:0.8em">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<p>

"Passen mehrere inzeilige Boxen nicht horizontal in eine einzelne Zeilen-Box, werden sie über zwei oder mehr vertikal hintereinandergeschaltete Zeilen-Boxen verteilt. Ein Absatz ist also ein vertikaler Stapel von Zeilen-Boxen. Zeilen-Boxen werden ohne vertikale Abtrennung gestapelt und überlappen sich nie."

In deinem Beispiel reicht die Eigenschaft line-height doch völlig aus, denn es gibt eine Block-Box (vom p-Element erzeugt) und_eine_sog. anonyme Inline-Box. Solche anonymen Inline-Boxen erben vererbbare Eigenschaften von ihrer übergeordneten Block-Box. Nicht vererbte Eigenschaften behalten ihren Ausgangswert.

Ich habe ja geschrieben, dass man eine/mehrere neue Inline-Box(en) einfügen muss, wenn man die vertikalen Abstände beeinflussen will, da man eben (wo ich dir ja zugestimmt habe im vorrangegangen Posting) die Abstände von Zeilen-Boxen nicht beeinflussen kann.

Gruß Gunther

[Michael Jendryschik]

Hallo,

<p style="line-height:1.3em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><br style="line-height:0.8em">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<p>

Dann bevorzuge ich lieber folgende Lösung (ergänzt durch entsprechende Deklarationen für 'p'):  ;-)

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<p>

In deinem Beispiel reicht die Eigenschaft line-height doch völlig aus, denn es gibt eine Block-Box (vom p-Element erzeugt) und_eine_sog. anonyme Inline-Box.

Nein, es gibt mehrere anonyme Inline-Boxen, in jeder Zeile eine. Zeilen-Boxen enthalten Inline-Boxen, nicht umgekehrt.

Ich habe ja geschrieben, dass man eine/mehrere neue Inline-Box(en) einfügen muss, wenn man die vertikalen Abstände beeinflussen will, da man eben (wo ich dir ja zugestimmt habe im vorrangegangen Posting) die Abstände von Zeilen-Boxen nicht beeinflussen kann.

Okay, ich verstehe, worauf du hinaus willst. Halten wir fest, dass ein anderer Ansatz gefunden werden muss, um das (mittlerweile ja etwas konkreter formulierte) Problem des OP zu lösen. Vielleicht stellt [pref:t=43555&m=237817] ihn ja zufrieden.

Gruß,

MI

[kaspar]

Es ist nicht möglich, die Abstände der Zeilen-Boxen zueinander zu bestimmen, lediglich deren Höhe. Weshalb reicht dir das nicht, kaspar?

Hallo Michael,

das ist etwas kompliziert:

Ich habe einige untereinanderstehende Links. Einige sind davon so lang, dass sie über zwei Zeilen gehen. Um den Zusammenhang der Zeilen dort deutlich zu machen, soll der Abstand ziwschen diesen geringer sein, sagen wir 12px statt wie sonst 16 Px bei einzeiligen Links. Das führt aber dazu, dass auch die Abstände über und unter diesem Zweizeiler etwas kleiner werden, vermutlich 14 px, also genau die Mitte zwischen den beiden Zeilenhöhen vermute ich. Das liegt sicher daran, dass ein 10px großer Text in einer line-height von 16px immer in der Höhe gemittelt wird. Und da bleiben halt jeweils drei Pixel oben und unten über, aber nicht sechs nur darunter - was einem Zeilenabstand nahe käme. Ich hoffe, ich konnte mich verständlich ausdrücken :-)

Gruß: kaspar

[Michael Jendryschik]

Hallo,

Ich habe einige untereinanderstehende Links.

Also eine *Liste* von Links?

Einige sind davon so lang, dass sie über zwei Zeilen gehen. Um den Zusammenhang der Zeilen dort deutlich zu machen, soll der Abstand ziwschen diesen geringer sein, sagen wir 12px statt wie sonst 16 Px bei einzeiligen Links.

Ich schlage folgende Lösung vor:

<ul class="linkliste">
  <li><a><!-- Anker --></a></li>
  <li><a><!-- Anker --></a></li>
  <li><a><!-- Anker --></a></li>
  <!-- [...] -->
  </ul>

.linkliste li {
     margin-bottom: 1em;
  }

Womöglich wirst du noch

.linkliste, .linkliste li {
    padding-left: 0;
    margin-left: 0;
  }

oder ähnliches deklarieren wollen (ich weiß nicht mehr, welche Angaben ausreichten).

Gruß,

MI

[kaspar]

Also eine *Liste* von Links?

ja, im Prinzip schon.

Ich schlage folgende Lösung vor:

<ul class="linkliste">
  <li><a><!-- Anker --></a></li>
  <li><a><!-- Anker --></a></li>
  <li><a><!-- Anker --></a></li>
  <!-- [...] -->
  </ul>

.linkliste li {
     margin-bottom: 1em;
  }

Womöglich wirst du noch

.linkliste, .linkliste li {
    padding-left: 0;
    margin-left: 0;
  }

Das ist ein interessanter Vorschlag einen Zeilenabstand zu konstruieren. Mit dieser Lösung habe ich aber keinen Einfluss mehr auf den Zeilenabstand in zweizeiligen Listenelementen, ohne dass das zuvor beschriebene Problem der Addierung von Zeilenhöhe und von dir konstruiertem Zeilenabstand wieder auftaucht. Wie dem auch sei: Vielen Dank, ich habe mich nun der Krücke von Gunther bedient (s.o.). Das wird alle dciwam-Apostel sicher die Haare zu Berge stehen lassen, aber es funktioniert... ;-)

Gruß: kaspar

[Michael Jendryschik]

Hallo!

Das ist ein interessanter Vorschlag einen Zeilenabstand zu konstruieren. Mit dieser Lösung habe ich aber keinen Einfluss mehr auf den Zeilenabstand in zweizeiligen Listenelementen, ohne dass das zuvor beschriebene Problem der Addierung von Zeilenhöhe und von dir konstruiertem Zeilenabstand wieder auftaucht.

Wieso nicht? Du kannst den benötigten Abstand anhand der angegebenen Zeilenhöhe berechnen, schwierig ist das nicht, einfach die zusätzliche Zeilenhöhe vom ursprünglich angegebenen Abstand abziehen.

Wie dem auch sei: Vielen Dank, ich habe mich nun der Krücke von Gunther bedient (s.o.). Das wird alle dciwam-Apostel sicher die Haare zu Berge stehen lassen, aber es funktioniert... ;-)

Ich weiß nicht, was ein "dciwam-Apostel" sein soll, aber mir stehen bei einem solchen "Workaround" tatsächlich alle Haare zu Berge.

Gruß,

MI

[emu]

Hallo!

Ich weiß nicht, was ein "dciwam-Apostel" sein soll

Das Gegenteil von Snowboarder, nehme ich an.

emu

[molily]

Hallo,

Ich weiß nicht, was ein "dciwam-Apostel" sein soll

Das Gegenteil von Snowboarder, nehme ich an.

Das lässt entlarvende Parallelen zu.

Mathias

[emu]

Hallo!

Ich weiß nicht, was ein "dciwam-Apostel" sein soll
Das Gegenteil von Snowboarder, nehme ich an.
Das lässt entlarvende Parallelen zu.

Du solltest dazu übergehen, so zu schreiben, dass man (in diesem Fall »ich«) auch versteht, was du eigentlich sagen willst. Deine längeren Texte mögen für manche schwer zu lesen sein (was ich nicht nachvollziehen kann; meistens sind sie sogar recht flüssig), aber deine Einzeiler sind mir größtenteils völlig unverständlich...

»Und das ist auch gut so«, wirst du jetzt sagen, ich weiß ;-)

emu

[molily]

emu,

Ich weiß nicht, was ein "dciwam-Apostel" sein soll
Das Gegenteil von Snowboarder, nehme ich an.
Das lässt entlarvende Parallelen zu.

Du solltest dazu übergehen, so zu schreiben, dass man (in diesem Fall »ich«) auch versteht, was du eigentlich sagen willst.

Ich wollte nichts Spezielles ausdrücken, nur dass dieser Vergleich im Zuge der Definition des Begriffes »dciwam-Apostel« durch Negation eines anderen Begriffs, welcher das andere Extrem abzudecken scheint, zwangsläufig zuende gedacht werden muss, wodurch trotz Gegensatz grundlegende Ähnlichkeiten ans Licht kommen, welche bemerkenswerte bzw. verwunderliche Rückschlüsse erlauben.

Die Frage, von welchen Parallelen ich sprach, anspielte bzw. was ich denn überhaupt meinte, ist insofern in diesem Fall und in manchen anderen von dir verallgemeinernd angesprochenen nicht an mich zu richten, denn ich meinte im Grunde gar nichts, und wenn, dann wäre es irrelevant; ich kann es nicht vor-denken, darauf kann man nur selbst eine Antwort finden, sei es auch keine, deshalb war jedes weitere Wort unpassend. Irgendwann bemühte ich den Vergleich mit einem auf der Straße gefundenen, absenderlosen Brief, welcher anstößt und anregt; aber ich finde es gerade im Archiv nicht.

Mathias

[Orlando]

Hallihallohallerohopsassa Mathias,

emu,

*g* Muss ich mir das "Weißt du," vor und das "damals" nach dem Namen wieder dazudenken? ;-)

Ich weiß nicht, was ein "dciwam-Apostel" sein soll

Das Gegenteil von Snowboarder, nehme ich an.

Eine wunderbare Annahme, sie trifft den Nagel auf den Kopf. Selten hat mich ein so kurzer Satz so lange zum Schmunzeln animiert. Danke, emu.

Kennst du übrigens die "Schispringerlieder" von "Christoph & Lollo", mit denen uns FM4 hierzulande recht häufig beglückt?

http://members.kabsi.at/peda/lyrics3.htm#snowboarder

[...] denn ich meinte im Grunde gar nichts [...]

Immerhin war's nett eingepackt.

Grüße,
 Roland

[molily]

Törö.

emu,

*g* Muss ich mir das "Weißt du," vor und das "damals" nach dem Namen wieder dazudenken? ;-)

Da wären viele Floskeln denkbar.
»Weißt du, emu, eigentlich bist du ja ganz nett, aber ...«
»Du, emu, ich muss dir was sagen, aber jetzt nicht lachen!«
»Ja du, emu, du fällst mir schon länger negativ auf...!«
»Mensch, emu, dich gibt es auch noch?«
»Aber aber, emu, wer wird denn gleich die Fassung verlieren...?«
»Tja ja, emu, c'est la vie.«
»He, emu, schläfst du schon?«
»Ach, emu, was soll ich dazu noch sagen...«
»Och nee, emu, nicht schon wieder.«
»Pah, emu, das dachtest du dir so!«
»Denkste, emu, denkste!«
»Nein, emu, ich muss dich leider enttäuschen.«
»Das, mein lieber emu, hätte ich dir wirklich nicht zugetraut.«
»Dass ich nicht lache, emu, das glaubst du dir nicht einmal selbst!«
»Vergiss es, emu, vergiss es einfach.«
»Oh, emu, mein emu!«
»Merke dir eines, emu, der Apfel fällt nicht weit vom Stamm.«
»Mein Gott, emu, was hast du denn?«
...

http://members.kabsi.at/peda/lyrics3.htm#snowboarder

Schön.

[...] denn ich meinte im Grunde gar nichts [...]

Immerhin war's nett eingepackt.

Hauptsache!

Mathias

[Der Hans]

Moin!

Wenn ich dein Problem richtig versanden habe, würde ich die Links einfach
in eine Tabelle schreiben und dort den Zelleninnenabstand so wählen, dass
der Abstand zwischen den Links immer gleich groß erscheint und zudem größer
als der Zeileabstand "innerhalb" des umgebrochenen Links.

Gruß

Der Hans

[Gunther]

Hallo Kasper,

Ich habe einige untereinanderstehende Links. Einige sind davon so lang, dass sie über zwei Zeilen gehen. Um den Zusammenhang der Zeilen dort deutlich zu machen, soll der Abstand ziwschen diesen geringer sein, sagen wir 12px statt wie sonst 16 Px bei einzeiligen Links. Das führt aber dazu, dass auch die Abstände über und unter diesem Zweizeiler etwas kleiner werden, vermutlich 14 px, also genau die Mitte zwischen den beiden Zeilenhöhen vermute ich. Das liegt sicher daran, dass ein 10px großer Text in einer line-height von 16px immer in der Höhe gemittelt wird. Und da bleiben halt jeweils drei Pixel oben und unten über, aber nicht sechs nur darunter - was einem Zeilenabstand nahe käme. Ich hoffe, ich konnte mich verständlich ausdrücken :-)

vielleicht postest du doch mal ein bis'chen Quelltext...
bspw. "Wie kommen die Links untereinander?"

Gruß Gunther

[Orlando]

Hi Michael,

soweit ich sehe gibt es keine CSS-Attribut für den Zeilenabstand.

richtig, weil nicht definiert ist, was eine "Zeile" ist.

CSS2 definiert den rechteckigen Bereich, der eine Zeile Inline-Boxen enthält, als "Zeilenbox", insofern ist der Begriff "Zeile" eindeutig.

Manchmal sich technische Spezifikationen inkompatibel mit dem allgemeinen Sprachgebrauch ;-)

Die Zeilen-Box reicht für gewöhnlich genau vom linken Rand des umgebenden Blocks zum rechten Rand. Jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box.

Du hast Recht, mir ging's aber darum, Kaspar klarzumachen, dass es aufgrund des variablen Umbruchs keine fix definierten Zeilen im herkömmlichen Sinn gibt, an deren Ende er etwas einfügen könnte, was den Abstand vergrößert.

Grüße,
 Roland

[Michael Jendryschik]

Hallo Roland,

du schriebst:

Die Zeilen-Box reicht für gewöhnlich genau vom linken Rand des umgebenden Blocks zum rechten Rand. Jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box.

Du hast Recht, mir ging's aber darum, Kaspar klarzumachen, dass es aufgrund des variablen Umbruchs keine fix definierten Zeilen im herkömmlichen Sinn gibt, an deren Ende er etwas einfügen könnte, was den Abstand vergrößert.

Ich hoffe, dass er das nach der Lektüre von [pref:t=43555&m=237789] und vielleicht einigen Versuchen verstanden hat. ;-)

Gruß,

MI

[Der Hans]

Moin!

Die alles entscheidende Frage ist doch:
Was willst du, was mit line-height nicht machbar ist?

Gruß

Der Hans

[Gunther]

Hallo Kaspar,

Irgendwelche Tipps?

<br><br style="line-height:xy">

Gruß Gunther

[kaspar]

Hallo Kaspar,

Irgendwelche Tipps?

<br><br style="line-height:xy">

»»

Hallo Gunther,

danke für diesen simplen Tipp. Das ist offensichtlich wirklich ein gangbarer Weg, auch wenn mir trotzdem vom W3C dringend ein Attribut für den Zeilenabstand wünsche, damit ich nicht solche Krücken benutzen muss.

Also nochmals danke, Gruß: kaspar

[stefan]

Hi,

soweit ich sehe gibt es keine CSS-Attribut für den Zeilenabstand. Mit dem Attribut line-height lässt sich lediglich die Zeilenhöhe bestimmen, was meist eine Simulation des Zeilenabstandes zulässt, aber in meinem Fall nicht hilft. Wie kann man einen echten Zeilenabstand faken?

Jetzt heisst's mal wieder Rätselraten...

Wenn Dir line-height nicht hilft, heisst das ja vielleicht, dass Du die einzelnen Zeilen mittels dem CSS-Attribut "background" farbig unterlegen willst, oder sowas in der Art (hab ich jetzt mal geraten). Gleichzeitig willst Du aber einen Abstand zwischen den einzelnen Zeilen haben, also pro Zeile einen einzelnen farbig unterlegten Streifen.

Sollte dem so sein, geht das mittels einer Verschachtelung zweier Elemente. In etwa so:

<p style="line-height:160%">
<span style="line-height:100%;background:#FF0000">
Ich bin ein farbig hinterlegter Tetxt mit so viel zeilenumbrüchen, wie Du willst.
</span></p>

Ich weiss nicht, ob dieses Bsp. jetzt hinhaut (ich hatte zwar mal sowas gemacht, weiss aber nicht mehr so genau wie). Der *Trick* an der Sache ist, einen Absatz <p> mit grosser Zeilenhöhe zu schaffen und diesen mit einem inline-Element (z.B. <span>) zu füllen, welches nicht die Zeilen-höhe von p erreicht. Dadurch entsteht ein Abstand zwischen den einzelnen Zeilen.

Gegebenenfalls musst Du noch etwas mit margin (beim <span>) bzw. padding (beim <p>) bzw. line-height mit "em" als Einheit (beim <span>) experimentieren.

Ach ja, es emfiehlt sich ausserdem, das Ganze in vielen verschiedenen Browsern zu betrachten, da die Zeilenhöhe von Browser zu Browser (gerade bei "%"-Angaben) voneinander abweichen kann.

viel Erfolg + schö
stefan

PS: wenn Du mal wieder ein Problem hast, wo etwas "in Deinem Fall nicht hilft", dann schreib doch, warum das so ist, bzw. worauf Du hinaus willst. Sonst tappt man da ein bisschen im Dunkeln (und macht sich vielleicht um sonst Gedanken). Nix für ungut, nur'n Tipp.