nicht angemeldet
line-height
Guten Tag den Profis,
Es geht um die Formatierung von line-height, das in meinen Dokumenten nicht überall gleich interpretiert wird, obwohl ich meine, die exakt gleiche Schreibweise des Codes zu haben. Hier Hier ist die Website.
Ich möchte in den kleinen Feldern rechts den Text class="kleinbildtext" enger beieinander haben. Doch es funktioniert nur im analogen russischen Dokument (ist jetzt noch übertrieben, da ich vieles ausprobiert habe, um einen Effekt zu sehen).
Woran kann das liegen?
Um eure Hilfe wie immer dankbar,
bari.
-
Hallo!
Es geht um die Formatierung von line-height, das in meinen Dokumenten nicht überall gleich interpretiert wird, obwohl ich meine, die exakt gleiche Schreibweise des Codes zu haben.
Zur Verwendung von Firebug hatten wir dir doch inzwischen reichlich "Hinweise" gegeben, oder?
Hier Hier ist die Website.
Ich möchte in den kleinen Feldern rechts den Text class="kleinbildtext" enger beieinander haben.
Woran kann das liegen?Siehe: http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
Gruß Gunther
-
Salut Gunther,
Zur Verwendung von Firebug hatten wir dir doch inzwischen reichlich "Hinweise" gegeben, oder?
Ja, bin sogar richtig Fan geworden, wirklich ein mächtiges Tool.
Ich meine eigentlich, nichts Auffälliges gesehen zu haben, dazu tritt dieser bug nur in der deutschen Version auf, nicht in der Russischen. Beide sind gleich geschrieben.Siehe: http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
Na gut, werde mich noch eingehender damit befassen.
Gruss,
bari.-
Salut bari,
Siehe: http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
Na gut, werde mich noch eingehender damit befassen.
mal vorab als kleiner Tipp: Nimm' mal bei '.kleinbildtext' die Anweisung 'line-height: 60%;' weg, und vergleiche dann nochmal beide Versionen.
Ich muss aber zugeben, dass die line-height Eigenschaft sehr schwierig zu verstehen ist, denn sie ist viel viel "komplizierter" als so mancher wahrscheinlich vermutet.
Eine sehr "anschauliche" Erklärung findet sich z.B. hier: http://de.slideshare.net/maxdesign/line-height
Gruß Gunther
-
mal vorab als kleiner Tipp: Nimm' mal bei '.kleinbildtext' die Anweisung 'line-height: 60%;' weg, und vergleiche dann nochmal beide Versionen.
dann sieht's so aus. Vor allem, wenn ich viel kleintext schreiben möchte, sieht's nicht schön aus, abgesehen, dass es sowieso zu weit runter kommt (könnte natürlich die Höhe >150px machen). Aber ich möchte den Abstand zwischen den Zeilen verkleinern.
Eine sehr "anschauliche" Erklärung findet sich z.B. hier: http://de.slideshare.net/maxdesign/line-height
Schau ich mir an.
Gruss
bari.-
Hallo 1UnitedPower,
erstmal vielen Dank für deine Mühe am Sonntagmorgen!.Zu sehen ist es hier.
Wo genau?
du musst dann den Firebug öffnen und auf das erste (oder ein) Element der Kleinbilder gehen (im blauen Block unten), das ganze div heisst .beispiele. In diesem div befinden sich ein div mit dem Bild (dazu noch 1 Frage unten), dann folgt ein p mit dem Titel (des Beispiels) in einem span (ich möchte das später durch h3 ersetzten, da ich damit ein br sparen kann) mit font-size 16px, dann darunter das span-Element mit der Klasse .kleintext und font-size 14px, und diesen Kleintext kann ich nicht näher zusammenliegend machen.
@em ist eine relative Größeneinheit, wenn dein p-Element die berechnete Schriftgröße 10px hat, wird das span-Element eine berechnete Schriftgröße von 8px haben.
heisst das, dass ich besser (überall) absolute Einheiten für die Schriftgrösse angeben soll, also px ?
Zur Frage zum div .kleinbild: in allen deutschen Beispielen ist da ein unterer Rand von ca 5px neben dem geschriebenen padding: 5px (gut zu sehen, wenn du das div .kleinbild im firebug-html-Teil angehst, violett angezeigter Rand rundherum und zusätzlich noch einen hellen unteren Rand zwischen Bild und padding-rand). Bei den russischen Seiten tritt das nicht auf. Ich fand bisher nicht heraus weshalb, woher das kommt.
Gruss
bari.-
Hallo bari!
ich komme nochmals auf das Problem der line-height zurück. Ist es nicht möglich, in einem p-Element mit einer gegebenen line-height ein span-Element mit einer anderen line-height zu haben ? Vererbt das p-Element das 1:1 weiter?
Deine Frage zeigt deutlich, dass du noch gar nicht verstanden hast, was 'line-height' eigentlich bedeutet und welche Auswirkungen bestimmte Werte dafür auf die verschiedenen Elemente haben.
Dir hier jetzt aber das komplette "Visual formatting model" mit all seinen Fein- & Besonderheiten zu erklären, würde den Rahmen sprengen.
Deshalb mal eine vereinfachte Antwort: Eine line-height Angabe für non-replaced Inline-Elemente macht sich nur dann bemerkbar, wenn der (berechnete) Wert mind. größer als der größte Wert für font-size ist, bzw. wenn der (berechnete) Wert mind. größer ist, als der gesetzte oder ererbte Wert für line-height des zugehörigen Block-Container Elements.P. S. habe die 99 slides, von Gunther empfohlen, durchgelesen, aber, wie mir scheint, hilft das mir nichts, oder hab ich was übersehen?
Ja, jede Menge wie mir scheint - insbesondere die Seiten 81 ff.
Zu sehen ist es hier.
Wo genau?
du musst dann den Firebug öffnen und auf das erste (oder ein) Element der Kleinbilder gehen (im blauen Block unten), das ganze div heisst .beispiele. In diesem div befinden sich ein div mit dem Bild (dazu noch 1 Frage unten), dann folgt ein p mit dem Titel (des Beispiels) in einem span (ich möchte das später durch h3 ersetzten, da ich damit ein br sparen kann) mit font-size 16px, dann darunter das span-Element mit der Klasse .kleintext und font-size 14px, und diesen Kleintext kann ich nicht näher zusammenliegend machen.Dein Quellcode ist semantisch gesehen alles andere als korrekt. Es genügt auch nicht, wenn man in der Doctype-Angabe HTML5 festlegt, im übrigen Dokument dann aber alle Grundlagen der gewählten Sprache außer Acht lässt (u.a. die speziellen Elemente der Sprache, die sprechspezifischen Besonderheiten wie bspw. das "Outline-Konzept").
Firebug bietet u.a. die Möglichkeit, per Cursor auf der Seite ein bestimmtes Element auszuwählen. Das kann man auch hervorragend dafür nutzen, um festzustellen, welcher Bereich einer Seite zu welchem Element gehört.
Wenn du das bei deinem "Problem" mal machst, wirst du feststellen, dass der Bereich zwischen den Textzeilen deiner Span-Elemente (den du ja verkleinern willst) nicht zu dem jeweiligen Span-Element, sondern zu dem übergeordneten P-Element gehört. Somit sollte eigentlich auch klar sein, wo man ansetzen muss, um das gewünschte Ziel zu erreichen.
heisst das, dass ich besser (überall) absolute Einheiten für die Schriftgrösse angeben soll, also px ?
Auch die Frage zeigt wieder, dass du die dir verlinkten Artikel/ Referenzen entweder gar nicht erst liest, oder zumindest nicht verstehst, was dort geschrieben steht.
Hier noch eine weitere Quelle: https://developer.mozilla.org/en-US/docs/CSS/line-height#NotesZur Frage zum div .kleinbild: in allen deutschen Beispielen ist da ein unterer Rand von ca 5px neben dem geschriebenen padding: 5px (gut zu sehen, wenn du das div .kleinbild im firebug-html-Teil angehst, violett angezeigter Rand rundherum und zusätzlich noch einen hellen unteren Rand zwischen Bild und padding-rand). Bei den russischen Seiten tritt das nicht auf. Ich fand bisher nicht heraus weshalb, woher das kommt.
Also nach meinem Dafürhalten ist es beiden Versionen gleich. Firebug bietet ebenfalls eine sehr nützliche Funktion, die die jeweiligen Werte für ein Element im Bezug auf das Layout anzeigt - zu finden unter dem Reiter "Layout".
Wenn du jetzt einmal auf eines deiner Div-Elemente mit der Klasse 'kleinbild' gehst, das Padding mal deaktivierst und dir dann im Layout die Abmessungen anguckst, wirst du feststellen, dass das Div-Element eine Abmessung von 200 x 107 Pixeln hat, obwohl das enthaltene Bild nur 200 x 100 Pixel groß ist.
Woran liegt das? Richtig - u.a. an der line-height des Div-Elements! ;-)
Probiere rein zu Testzwecken folgendes:
1. Füge bei .kleinbild in deinem CSS die Eigenschaftline-height: 0;hinzu
oder
2. Füge dem Image-Element die Eigenschaft 'http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align' hinzu, teste die unterschiedlichen Werte dafür und schau' dir die das jeweilige Ergebnis an! Ganz wichtig dabei: Verstehe warum welche Methode/ Variante zu dem jeweiligen Ergebnis führt.Unterm Strich bleibt halt, dass CSS doch sehr komplex ist, alleine schon die "Wechselwirkungen & Beeinflussungen" der einzelnen Eigenschaften. Und ohne ein gewisses Grundwissen über diese Zusammenhänge ist es schwierig, die gewünschten Resultate auf "bestmöglichste" Art & Weise zu erzielen. Es hilft also alles nichts - man muss sich dieses Grundwissen zuerst mal aneignen (anlesen). Und das dauert IMHO mehr als nur ein paar Tage.
Gruß Gunther
-
Salut Gunther, vielen Dank für die Ausführungen.
Ja, jede Menge wie mir scheint - insbesondere die Seiten 81 ff.
gegen Schluss wurde ich etwas müde...;-) Nein, es ist einfach einerseits etwas viel und andererseits das abstrakt zu erfassen ist nicht so leicht.
Mit dem Rest deiner Vor- und Ratschläge befasse ich mich erst noch.
Gruss
bari. -
Salut Gunther,
Deshalb mal eine vereinfachte Antwort: Eine line-height Angabe für non-replaced Inline-Elemente macht sich nur dann bemerkbar, wenn der (berechnete) Wert mind. größer als der größte Wert für font-size ist, bzw. wenn der (berechnete) Wert mind. größer ist, als der gesetzte oder ererbte Wert für line-height des zugehörigen Block-Container Elements.
Dein Quellcode ist semantisch gesehen alles andere als korrekt. Es genügt auch nicht, wenn man in der Doctype-Angabe HTML5 festlegt, im übrigen Dokument dann aber alle Grundlagen der gewählten Sprache außer Acht lässt (u.a. die speziellen Elemente der Sprache, die sprechspezifischen Besonderheiten wie bspw. das "Outline-Konzept").
Firebug bietet u.a. die Möglichkeit, per Cursor auf der Seite ein bestimmtes Element auszuwählen. Das kann man auch hervorragend dafür nutzen, um festzustellen, welcher Bereich einer Seite zu welchem Element gehört.
Wenn du das bei deinem "Problem" mal machst, wirst du feststellen, dass der Bereich zwischen den Textzeilen deiner Span-Elemente (den du ja verkleinern willst) nicht zu dem jeweiligen Span-Element, sondern zu dem übergeordneten P-Element gehört. Somit sollte eigentlich auch klar sein, wo man ansetzen muss, um das gewünschte Ziel zu erreichen.
Ich glaub, ich hab es jetzt einigermassen geschafft, die Elemente so zu schreiben, dass ich line height für jedes Element separat definieren kann.
Also nach meinem Dafürhalten ist es beiden Versionen gleich. Firebug bietet ebenfalls eine sehr nützliche Funktion, die die jeweiligen Werte für ein Element im Bezug auf das Layout anzeigt - zu finden unter dem Reiter "Layout".
bei mir war es heute auch nicht mehr verschieden, weiss nicht weshalb es vorher so war.
Wenn du jetzt einmal auf eines deiner Div-Elemente mit der Klasse 'kleinbild' gehst, das Padding mal deaktivierst und dir dann im Layout die Abmessungen anguckst, wirst du feststellen, dass das Div-Element eine Abmessung von 200 x 107 Pixeln hat, obwohl das enthaltene Bild nur 200 x 100 Pixel groß ist.
Woran liegt das? Richtig - u.a. an der line-height des Div-Elements! ;-)
Probiere rein zu Testzwecken folgendes:- Füge bei .kleinbild in deinem CSS die Eigenschaft
line-height: 0;hinzu
das habe ich nun gemacht, sieht gut aus.
- Füge dem Image-Element die Eigenschaft 'http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align' hinzu, teste die unterschiedlichen Werte dafür und schau' dir die das jeweilige Ergebnis an! Ganz wichtig dabei: Verstehe warum welche Methode/ Variante zu dem jeweiligen Ergebnis führt.
ich kenne diese Funktion, aber hier stelle ich keine Veränderung fest.
Unterm Strich bleibt halt, dass CSS doch sehr komplex ist, alleine schon die "Wechselwirkungen & Beeinflussungen" der einzelnen Eigenschaften. Und ohne ein gewisses Grundwissen über diese Zusammenhänge ist es schwierig, die gewünschten Resultate auf "bestmöglichste" Art & Weise zu erzielen. Es hilft also alles nichts - man muss sich dieses Grundwissen zuerst mal aneignen (anlesen). Und das dauert IMHO mehr als nur ein paar Tage.
deshalb bin ich dankbar um Hilfe von erfahrenen Designern, wenn meine Logik nicht mehr reicht. Damit schliesse ich dieses Posting und danke Dir bestens für deine Ausführungen.
Mit bestem Dank,
bari. - Füge bei .kleinbild in deinem CSS die Eigenschaft
-
-
-
-
-
-