nicht angemeldet
line-heigth Problem
Hallo Forianer,
ich hab leider ein kleines Problem mit der CSS-Eigenschaft line-height.
Ich wollte damit über die ganze Seite hinweg einstellen, dass die Zeilenhöhe immer eineinhalb Mal so groß ist wie normal. Also habe ich für folgenden Code benutzt
body {line-height:150%}
Leider ist es so, dass innerhalb des Bodys Redakteure die Inhalte mit einem WYSIWYG-Editor einstellen und so kommt es häufiger mal vor, dass die Schriftgröße von einzelnen Textabschnitten manuell auf andere Größen eingestellt werden.
Die line-height-Eigenschaft wird dann auch auf diese Textabschnitte vererbt, aber leider nicht relativ wie gewünscht, sondern scheinbar absolut und so kommt es vor, dass sich dann Textteile überlappen.
Im Archiv und in Internet habe ich immer den schlauen Rat gelesen, dass man font-size und line-height gleichzeitig benutzen soll, aber bei ca. 100.000 Seiten und Redakteuren, die kein html & css können, ist das leider für mich eine unbrauchbare Lösung.
Hat jemand sonst noch andere Vorschläge oder muss ich die line-height-Eigenschaft ad acta legen?
Minimalbeispiel:
<html>
<head><title>Test</title></head>
<body style="line-height:150%">
<p>Hallo<br>Welt</p>
<p style="font-size:128px">Hallo<br>Welt</p>
</body>
</html>
Viele Grüße
Devius
-
Hallo,
Hat jemand sonst noch andere Vorschläge oder muss ich die
line-height-Eigenschaft ad acta legen?Vielleicht klappt es, wenn du zunächst auf Inline-Styles verzichtest,
und dann die gewünschte Eigenschaft für alle passenden Elemente angibst.Ohne Verschachtelung oder Vererbung, also z.B. hx, p, li, sollte das
Ganze dann auch besser mit verschiedenen Browsern klappen.<html> <head><title>Test</title> <style type="text/css"> p {line-height:1.5em} </style> </head> <body> <p>Hallo<br>Welt</p> <p style="font-size:128px">Hallo<br>Welt</p> </body> </html>Grüsse aus Düsseldorf
Cyx23
-
Hallo,
Vielleicht klappt es, wenn du zunächst auf Inline-Styles verzichtest,
Die Inline-Styles benutze ich weitestgehend nur für Minimalbeispiele um Code zu sparen. ;)
Ohne Verschachtelung oder Vererbung, also z.B. hx, p, li, sollte das
Ganze dann auch besser mit verschiedenen Browsern klappen.Danke für den Tip. Ist zwar ein wenig Arbeit, wenn man sich nicht auf die Vererbung verlassen kann, aber wenn es nicht anders geht...
Viele Grüße
Devius -
Hi,
p {line-height:1.5em}
die Angabe der (dieser) Einheit ist hierfür nicht sinnvoll.
freundliche Grüße
Ingo-
Hallo.
p {line-height:1.5em}
die Angabe der (dieser) Einheit ist hierfür nicht sinnvoll.Welche empfiehlst du stattdessen? Und weshalb?
MfG, at-
[latex]Mae govannen![/latex]
p {line-height:1.5em}
die Angabe der (dieser) Einheit ist hierfür nicht sinnvoll.Welche empfiehlst du stattdessen? Und weshalb?
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
oder
»Anmerkung: um Vererbungsprobleme und Textüberlagerung zu vermeiden, empfiehlt es sich, die line-height einfach als Zahl ohne »Einheit zu verwenden. Bei 1.5 ist dann z.B. die Zeilenhöhe immer anderthalbmal so hoch wie die Schriftgröße.
(aus CSS4You)
Cü,
Kai
--
When the limos return for their final review, it's all thru'
- all they can see is the morning goo.
"There's no-one left alive - must be draw."
So the Blackcap Barons toss a coin to settle the score.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Hallo.
p {line-height:1.5em}
die Angabe der (dieser) Einheit ist hierfür nicht sinnvoll.Welche empfiehlst du stattdessen? Und weshalb?
[...]
»Anmerkung: um Vererbungsprobleme und Textüberlagerung zu vermeiden, empfiehlt es sich, die line-height einfach als Zahl ohne »Einheit zu verwenden. Bei 1.5 ist dann z.B. die Zeilenhöhe immer anderthalbmal so hoch wie die Schriftgröße.
Ich kenne diese Empfehlungen, danke. Dumm nur, dass man damit nicht das Ergebnis erzielt, das man mit der Maßeinheit erzielt, wenn man das so wollte. Ein pauschale Aussage über die Sinnhaftigkeit der Maßeinheit ist also selbst nicht sinnvoll.
MfG, at-
Hi,
Ein pauschale Aussage über die Sinnhaftigkeit der Maßeinheit ist also selbst nicht sinnvoll.
das stimmt zwar, aber in dem vorgestellten Fall würde ich wie gesagt nicht em verwenden, da der Code zu unberechenbar ist.
freundliche Grüße
Ingo
-
-
-
-
-
-
Hallo Devius
Die
line-height-Eigenschaft wird dann auch auf diese Textabschnitte vererbt, aber leider nicht relativ wie gewünscht, sondern scheinbar absolut und so kommt es vor, dass sich dann Textteile überlappen.Dann solltest du
line-heightnicht fürbodyangeben, sondern für die jeweiligen Elemente, im einfachsten Fall z.B. für alle Elemente* {line-height:150%;}. Wenn du sicher gehen willst, dass es keine unerwarteten Ergebnisse gibt, dann verwende lieber eine Aufzählung genau der Elemente, die die entsprechendeline-heighthaben sollen, z.B.p, li, a, strong, em {line-height:150%;}.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hallo Forianer,
danke für die Antworten. Das man die Einheit weglassen kann und dann das gewünschte Ergebnis erziehlt, wusste ich bisher noch nicht. Naja, man lernt eben nie aus.
Viele Grüße
Devius