Zeilenabstand sehr klein - wie geht das?

[Peter Trinkler]

Hallo SELFHTML-er

Bin noch ziemlicher Anfänger und möchte gerne wissen, wie ich zwischen zwei Zeilen einen sehr kleinen Abstand machen kann. Habe schon nach Lösungen gesucht, aber irgendetwas mache ich falsch. Bisher habe ich kleine Abstände jeweils wie folgt gemacht:

13. April 2005
<font size="-2"><br></font>
14. April 2005

Nun ist mir aber dieser zwischen den beiden Zeilen immer noch zu gross. Also habe ich es mit "line height" versucht ... sieht bei mir so aus:

13. April 2005
<p style="line-height:0.01"><br></p>
14. April 2005

Funktioniert aber auch nicht, der Abstand wird dadurch nicht kleiner. Also habe ich noch "margin bottom" versucht ... sieht bei mir so aus:

13. April 2005
<p style="margin-bottom:1px"></p>
14. April 2005

Funktioniert aber auch nicht, der Abstand wird auch nicht kleiner als mit   <font size="-2"><br></font>

Was mache ich falsch? Bin ich einfach zu blöd, oder wie geht das??? Über eine hilfreiche Antwort würde ich mich wirklich freuen. Danke!!!  Peter

[daniel84]

Hallo Peter Trinkler,

du musst da nicht ein überflüssiges Element zwischen die beiden Zeilen packen, sondern das in etwa so lösen:

<p style="font-size:0.9em;line-height:0.6em;">
13. April 2005<br>
14. April 2005
</p>

(wobei das <br> nicht sehr schön und wohl auch semantisch falsch ist. Für deinen Kenntnisstand halte ich es aber für angebracht.)

<p style="line-height:0.01"><br></p>

Da fehlte insbesondere eine Einheit (0.01 Äpfel? 0.01 Autos? ...)

Gruss aus Luzern,
Daniel

[Peter Trinkler]

Hallo Daniel aus Luzern,

Danke schon mal für deine schnelle Antwort, aber was mache ich, wenn ich verschiedene Zeilenabstände will bzw. eine Überschrift, dann einen kleinen Abstand und dann viel nachfolgender Text ohne Abstand??? Also:

ÜBERSCHRIFT
kleiner Zeilenabstand
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

Das kann ich mit deiner Variante ja auch nicht lösen, oder?

Schöne Grüsse aus Neuheim (Kanton Zug). Peter

[Jan L.]

Hallo,

aber was mache ich, wenn ich verschiedene Zeilenabstände will bzw. eine Überschrift, dann einen kleinen Abstand und dann viel nachfolgender Text ohne Abstand?

Für den Abstand zwischen Überschrift und Text definierst du du einen unteren
Außenabstand für die Überschrift ('margin-bottom').

Für die den Zeilenabstand innerhalb des Textbereiches benutzt du -wie schon
gesagt- 'line-height'.

Gruß, Jan

[Peter Trinkler]

Für den Abstand zwischen Überschrift und Text definierst du du einen unteren
Außenabstand für die Überschrift ('margin-bottom').

Danke Jan, jetzt hab ich's geschnallt :-)
Peter

[Auge]

Hallo

Für den Abstand zwischen Überschrift und Text definierst du du einen unteren
Außenabstand für die Überschrift ('margin-bottom').

Und für die, die auch ältere, nur teilweise CSS-fähige Browser, wie z.B. den NS 4.x damit bedienen wollen, bietet sich margin-top als Rand nach oben an. Mit einer Angabe von margin-bottom oder nur margin haut der NS 4.x gleich einen viel zu großen Rand drauf, da er damit nicht richtig um kann.

Dies schreibe ich im (bei) vollen(m) Bewusstsein, dass man den NS 4.x nicht mehr wirklich berücksichtigen muss/sollte. :-) An der Stelle ist dies aber ein vertretbarer gedanklicher Mehraufwand, um auch diesem Browser ein Minimal-CSS zukommen zu lassen.

Um eine feinere Abstimmung der Abstände für die Browser, die es darstellen können, hinzukriegen, bieten sich ja diverse CSS-Hacks an.

Tschö, Auge

[JürgenB]

Hallo daniel84,

<p style="font-size:0.9em;line-height:0.6em;">
13. April 2005<br>
14. April 2005
</p>

(wobei das <br> nicht sehr schön und wohl auch semantisch falsch ist. Für deinen Kenntnisstand halte ich es aber für angebracht.)

wie erzwinge ich bei höherem Kenntnisstand denn in dem Beispiel oben einen Zeilenumbruch? Welchen semantisch korrekten Ersatz gibt es denn für <br>?

Gruß, Jürgen

[wahsaga]

hi,

<p style="font-size:0.9em;line-height:0.6em;">
13. April 2005<br>
14. April 2005
</p>

(wobei das <br> nicht sehr schön und wohl auch semantisch falsch ist. Für deinen Kenntnisstand halte ich es aber für angebracht.)

wie erzwinge ich bei höherem Kenntnisstand denn in dem Beispiel oben einen Zeilenumbruch? Welchen semantisch korrekten Ersatz gibt es denn für <br>?

"ersatz" in dem sinne nicht direkt.
du könntest beispielsweise die "datümer" jeweils noch zusätzlich in einen div packen - erzeugt auch jeweils eine eigene zeile. semantisch aber auch kaum sinnvoller - weil damit immer noch das markup eines optischen effektes wegen gewählt würde.

in wirklichkeit sehnen sich mehrere solcher daten natürlich meistens danach, als liste ausgezeichnet zu werden.

gruß,
wahsaga

[JürgenB]

Hallo wahsaga,

danke für die Info. Allerdings war meine Frage eher rhetorischer Natur. Denn bei aller Liebe zum "Trennen von Layout und Inhalt" kommt es bei mir doch sehr oft vor, das der Inhalt bestimmte gestalterische Mittel erfordert. Das kann ein Zeilenumbruch sein, das kann aber auch das Hervorheben einzelner Wörter oder sogar einzelner Buchstaben sein. Und wie ich da Layout und Inhalt trennen soll, weiß ich einfach (noch) nicht. Dann auch wenn ich mit CSS und Selektoren arbeite, müssen die Textteile doch in z.B. <span>s eingepackt werden.

Oder, um eine Lanze für das <br> zu brechen, ich möchte erzwingen, dass eine Überschrift immer mindestens zweizeilig ist: <br> innerhalb von <hx>, oder doch zwei <hx> untereinander?

Aber vieleicht lässt die "reine Lehre" solche Layoutideen ja auch garnicht mehr zu.

Gruß, Jürgen

[Axel Richter]

Hallo,

Oder, um eine Lanze für das <br> zu brechen, ich möchte erzwingen, dass eine Überschrift immer mindestens zweizeilig ist: <br> innerhalb von <hx>, oder doch zwei <hx> untereinander?

Hm, eine Überschrift _kann_ nicht immer _mindestens_ zweizeilig dargestellt werden. Bsp.:

1 Vorbemerkungen

Wie soll diese Überschrift zweizeilig dargestellt werden? ;-)

Aber vieleicht lässt die "reine Lehre" solche Layoutideen ja auch garnicht mehr zu.

Es steht ja nirgends, dass das BR-Element verboten ist. Es gehört aber zum Inhalt, _nicht_ zum Layout. Denn wenn Du "eine Überschrift immer mindestens zweizeilig" darstellen willst, musst Du ihren Inhalt kennen, um zu bestimmen, _wo_ die zweite Zeile beginnt. Wenn Du nur eine bestimmte Breite nicht überschreiten willst, kannst Du diese Breite vorgeben (width). Dann wird die Überschrift von allein mehrzeilig, wenn entsprechend viel Inhalt drin steht.

Bei Listen gilt übrigens ähnliches:

<ul style="width:250px; margin:0; padding-left:1em; border:1px solid black;">
<li>Vorbereitung
<ul>
   <li>Bereitlegen der Werkzeuge und Materialien</li>
   <li>Überprüfen der Funktionsfähigkeit und Sicherheit von Maschinen und Anlagen</li>
</ul>
</li>
</ul>

vs.

<ul style="width:250px; margin:0; padding-left:1em; border:1px solid black;">
<li>Vorbereitung
<ul>
   <li>Bereitlegen der Werkzeuge <br> und Materialien</li>
   <li>Überprüfen der Funktionsfähigkeit und Sicherheit von Maschinen <br> und Anlagen</li>
</ul>
</li>
</ul>

Das BR-Element gehört zum Ihnalt und vermeidet das Alleinstehen des letzten Wortes in der letzten Zeile der Aufzählungspunkte.

viele Grüße

Axel

[Sven Rautenberg]

Moin!

Das BR-Element gehört zum Ihnalt und vermeidet das Alleinstehen des letzten Wortes in der letzten Zeile der Aufzählungspunkte.

Es vermeidet aber auch, dass die Listenpunkte einzeilig werden, wenn genug Platz da ist.

• Sven Rautenberg

[Axel Richter]

Hallo,

Das BR-Element gehört zum Ihnalt und vermeidet das Alleinstehen des letzten Wortes in der letzten Zeile der Aufzählungspunkte.
Es vermeidet aber auch, dass die Listenpunkte einzeilig werden, wenn genug Platz da ist.

Ja, weshalb man dann nach weiteren Überlegungen dazu kommt, dass dies:

<ul style="width:270px; margin:0; padding-left:1em; border:1px solid black;">
<li>Vorbereitung
<ul>
   <li>Bereitlegen der Werkzeuge und&nbsp;Materialien</li>
   <li>Überprüfen der Funktionsfähigkeit und Sicherheit von Maschinen und&nbsp;Anlagen</li>
</ul>
</li>
</ul>

die gegebenen Anforderungen besser erfüllt.

viele Grüße ;-))

Axel

[JürgenB]

Hallo Axel Richter,

Hm, eine Überschrift _kann_ nicht immer _mindestens_ zweizeilig dargestellt werden. Bsp.:

1 Vorbemerkungen

diese Überschrift nicht (sinnvoll), aber (irgend)eine schon.

Gruß, Jürgen

[Axel Richter]

Hallo,

diese Überschrift nicht (sinnvoll), aber (irgend)eine schon.

Deine Anforderung war aber: "Überschriften sollen _immer_ mindestens zweizeilig dargestellt werden".

Jetzt ist Deine Anforderung: "Irgendeine Überschriften soll _immer_ mindestens zweizeilig dargestellt werden". ;-))
Das ist, mangels Definition von "irdendeine", nicht umzusetzen.

Auch: "Überschriften sollen, wenn möglich, _immer_ mindestens zweizeilig dargestellt werden." ist schwierig umzusetzen, weil man das "wenn möglich" definieren müsste.

Wenn "wenn möglich" als "besteht aus mindestens zwei Worten und aus maximal x Worten, weil bei mehr als x Worten ohnehin mehrzeilig dargestellt werden müsste" definiert ist und "zweizeilig" als "Umbruch an einer Wortgrenze etwa in der Mitte des gesamten Überschriftentextes" gesehen wird, dann sollte die Anforderung durch Einfügen von BR an der entsprechenden Stelle umsetzbar sein. Das BR ist dann aber eben Inhalt, nicht Darstellung der Überschrift. Das hat Nachteile, siehe Svens Posting.

Auch in meinem zweiten Beispiel: "Wenn mehrzeilig, dann _nicht_ mit nur einem Wort in der letzten Zeile", ist das &nbsp; Inhalt der Überschrift, nicht ausschließlich Darstellung. Es hat aber weniger Nachteile als das BR.

Du siehst, über Layout-Anforderungen, die nur durch Inhaltsänderungen umsetzbar sind, sollte man gut und lange nachdenken, weil die Umsetzungen eben immer auch Nachteile haben. Wenn man kann, sollte man solche Layout-Anforderungen vermeiden.

viele Grüße

Axel

[JürgenB]

Hallo Axel Richter,

Deine Anforderung war aber: "Überschriften sollen _immer_ mindestens zweizeilig dargestellt werden".

Nein. Zitat aus https://forum.selfhtml.org/?t=105563&m=652884: "ich möchte erzwingen, dass eine Überschrift immer mindestens zweizeilig ist:". Nicht "alle", und "immer" bezog sich auf beliebige Seitenbreiten, also nicht zweizeilig, nur weil der Platz nicht reicht.

Ansonsten stimme ich Dir zu. Es ging mir auch nur darum, zu zeigen, dass Layout und Inhalt eben nicht immer getrennt werden können, so wie es die Vertreter der reinen Lehre fordern. Mein anderes Beispiel - Wort oder Buchstabe hervorheben - veranschaulicht die Problematik viel besser.

Gruß, Jürgen

[daniel84]

Hallo wahsaga,

(wobei das <br> nicht sehr schön und wohl auch semantisch falsch ist. Für deinen Kenntnisstand halte ich es aber für angebracht.)

wie erzwinge ich bei höherem Kenntnisstand denn in dem Beispiel oben einen Zeilenumbruch? Welchen semantisch korrekten Ersatz gibt es denn für <br>?

in wirklichkeit sehnen sich mehrere solcher daten natürlich meistens danach, als liste ausgezeichnet zu werden.

Genau das meinte ich, danke für die Ausführung, wahsaga.

Gruss aus Luzern,
Daniel

[Christoph Schnauß]

morgens,

13. April 2005

Was hat das zu bedeuten?

<font size="-2"><br></font>

Das ist HTML 3, also ein längst überholter Standard, der in der heute gültigen Version von HTML 4.x deprecated, also "mißbilligt" ist. Und es steht zwischen <font> und </font> ja gar nichts, was ein Browser irgendwie darstellen müßte. Einem Zeilenumbruch wie <br> irgendeine Größe mitzugeben, ist ziemlicher Unsinn. Schreib mal einen Text oder nur ein Wort hinein, dann siehst du vielleicht schon mehr.

Nun ist mir aber dieser zwischen den beiden Zeilen immer noch zu gross.

Äh ... Was ist "dieser zwischen den beiden Zeilen"?

Also habe ich es mit "line height" versucht ... sieht bei mir so aus:
13. April 2005
<p style="line-height:0.01"><br></p>
14. April 2005

Wenn du diese unbegreiflichen Datumsangaben wegläßt und für deine "0.01" noch eine Maßangabe vorgibst  -  beispielsweise "em"  -  wirst du staunen. "0.01em" ist ünrigens wegen Zwergenhaftigkeit ziemlich unsichtbar ;-)

Was mache ich falsch? Bin ich einfach zu blöd

Schwer zu sagen. Du müßtest etwas mehr zeigen von deinem Quelltext. Aber Selbsterkenntnis und das Auffinden dieses Forums sind schon Garanten dafür, daß du eine Lösung finden wirst.

oder wie geht das?

Nun ja ... es fehlt eigentlich eine genaue Beschreibung dessen, was denn ums Himmels willen "gehen" soll. Eventuell mußt du auch einfach nur CSS lernen.

Grüße aus Berlin

Christoph S.