Grundlinienausrichtung verschiedener Schriftgrößen

[Kerstin83]

Liebes Forum :):)

ich habe ein Problemchen, das sich eigentlich ganz einfach anhört, aber ich kriege es einfach nicht hin. Ich habe zwei nebeneinander liegende div-Container in denen jeweils eine Überschrift ist, die jedoch verschiedene Größen haben. Diese beiden Überschriften möchte ich gerne vertikal so ausrichten, dass sie an einer gemeinsamen Grundlinie fluchten. Irgendwas mit padding und margin hinzudipsen funktioniert einigermassen. Aber gibt es einen "sauberen" Weg ? So dass es auch in verschiedenen Browsern funktioniert und möglichst auch, wenn im Browser z.B. eine Schrift fehlt und durch eine andere ersetzt wird.

Liebe Grüße

Kerstin

[Der Martin]

Moin,

Ich habe zwei nebeneinander liegende div-Container in denen jeweils eine Überschrift ist, die jedoch verschiedene Größen haben. Diese beiden Überschriften möchte ich gerne vertikal so ausrichten, dass sie an einer gemeinsamen Grundlinie fluchten.

ich setze aber mal voraus, dass die Oberkante der beiden Container sauber in einer Flucht, d.h. auf gleicher Höhe liegt? Sonst wird es zur bösen Fummelei.

Dann wäre mein erster Gedanke, trotz unterschiedlicher Schriftgröße der beiden Überschriften deren line-height auf denselben Wert zu setzen.

Irgendwas mit padding und margin hinzudipsen funktioniert einigermassen.

Ja, vielleicht - aber das ist dann Glückssache, weil ...

[...] wenn im Browser z.B. eine Schrift fehlt und durch eine andere ersetzt wird.

Oder wenn der Besucher in seinem Browser eine ungewöhnlich große Mindestschrftgröße eingestellt hat. Oder einen Zoomfaktor deutlich abweichend von 100%.

So long,
 Martin

[Kerstin83]

ich setze aber mal voraus, dass die Oberkante der beiden Container sauber in einer Flucht, d.h. auf gleicher Höhe liegt? Sonst wird es zur bösen Fummelei.

Ja, die beiden divs liegen auf einer Höhe.

Dann wäre mein erster Gedanke, trotz unterschiedlicher Schriftgröße der beiden Überschriften deren line-height auf denselben Wert zu setzen.

Hatte ich auch dran gedacht. Bei kleinen Schriftgrößenunterschieden funktioniert das auch so einigermaßen (die Höhe unterscheidet sich dann nur in ein oder 2 Pixeln) aber bei größeren unterschieden wird es entsprechend mehr.

Oder muss ich da noch etwas anderes beachten?

[Gunnar Bittersmann]

@@Der Martin

Dann wäre mein erster Gedanke, trotz unterschiedlicher Schriftgröße der beiden Überschriften deren line-height auf denselben Wert zu setzen.

Der erste Gedanke ist nicht immer der beste. Hier ist es ein schlechter. Gleich wieder verwerfen!

line-height ist für den Abstand zwischen den Zeilen bei Mehrzeiligkeit da. Und für nichts anderes! Begründung

LLAP 🖖

[Der Martin]

Hallo,

Dann wäre mein erster Gedanke, trotz unterschiedlicher Schriftgröße der beiden Überschriften deren line-height auf denselben Wert zu setzen.

Der erste Gedanke ist nicht immer der beste. Hier ist es ein schlechter. Gleich wieder verwerfen!

aber bitte nicht, solange dein Alternativvorschlag auch nicht besser ist. Mit meinem Ansatz über line-height erreiche ich, dass zumindest die Zeilenboxen der beiden Überschriften gleich hoch sind, während du das durch berechnetes(!) padding zu erreichen versuchst, das auch noch mit Fingerspitzengefühl auf padding-top und padding-bottom verteilt werden muss. Damit die Grundlinie wirklich fluchtet, ist bei deiner Lösung auch Probieren angesagt - mit dem Risiko, dass es bei leicht abweichenden Umgebungsbedingungen nicht mehr sauber passt. Also auch nicht wirklich eine Lösung, nur ein etwas komplizierterer Lösungsansatz.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

aber bitte nicht, solange dein Alternativvorschlag auch nicht besser ist.

Ist er aber – auch abgesehen davon, dass line-height zur vertikalen Ausrichtung grundsätzlich falsch ist.

Mit meinem Ansatz über line-height erreiche ich, dass zumindest die Zeilenboxen der beiden Überschriften gleich hoch sind

Aber auch nicht mehr. Du hast keinerlei Kontrolle darüber, wie die Schrift in der Zeilenbox sitzt. Also keinerlei Kontrolle darüber, ob die Grundlinien wirklich übereinstimmen.

während du das durch berechnetes(!) padding zu erreichen versuchst, das auch noch mit Fingerspitzengefühl auf padding-top und padding-bottom verteilt werden muss. Damit die Grundlinie wirklich fluchtet, ist bei deiner Lösung auch Probieren angesagt - mit dem Risiko, dass es bei leicht abweichenden Umgebungsbedingungen nicht mehr sauber passt. Also auch nicht wirklich eine Lösung, nur ein etwas komplizierterer Lösungsansatz.

Dass es nur für betreffende Schrift auf betreffendem System passt, schrieb ich ja. Allerdings liegt die Vermutung nahe, dass es auch für andere Schriften/Systeme besser passt als den zusätzlichen Leerraum (wie auch immer) gleichermaßen oben und unten dazuzugeben.

Während man es „mit Fingerspitzengefühl“ hinbekommt, dass es für eine Schrift/ein System gut aussieht und für andere vermutlich fast gut, bekommt man es mit line-height für gar keine Schrift/kein System gut hin.

LLAP 🖖

[Gunnar Bittersmann]

@@Kerstin83

Ich habe zwei nebeneinander liegende div-Container in denen jeweils eine Überschrift ist,

Ein sicheres Zeichen dafür, dass es keine div-Container sein sollten, sondern sections.

die jedoch verschiedene Größen haben. Diese beiden Überschriften möchte ich gerne vertikal so ausrichten, dass sie an einer gemeinsamen Grundlinie fluchten. Irgendwas mit padding und margin hinzudipsen funktioniert einigermassen. Aber gibt es einen "sauberen" Weg ?

Verschieden große Schriften innerhalb einer Zeilenbox werden per Default an der selben Grundlinie ausgerichtet. Die Grundlinien in verschiedenen Elementen (verschiedenen Zeilenboxen) wissen aber nichts voneinander.

Du kannst die Zeilenboxen der beiden Überschriften (vorausgesetzt, sie sind einzeilig) gleich hoch machen. Bsp.:

• 1. Überschrift font-size: 1.8em; line-height: 1.1. 1.8 × 1.1 = 1.98. Zeilenbox also doppelt so hoch wie Grundschriftschröße
• 2. Überschrift font-size: 1.4em; line-height: 1.2. 1.4 × 1.2 = 1.68. Der Zeilenbox fehlen 0.3× Grundschriftschröße an Höhe zur ersten

Die könnte man nun als Padding oben und unten dazugeben: padding-top: 0.15rem; padding-bottom: 0.15rem (wenn die Grundschriftschröße in dem Kontext 1rem ist). Oder in em, dann durch Schriftgröße 1.4 teilen: padding-top: 0.107em; padding-bottom: 0.107em.

Die Schrift sitzt nun aber irgendwie mittig in der Zeilenbox. Irgendwie. Möglicherweise muss man die 0.3 anders verteilen, um die Grundlinien auszurichten. Bspw. padding-top: 0.18rem; padding-bottom: 0.12rem.

Da ist Augenmaß gefragt. Und der Wert gilt dann für die betreffende Schriftart auf dem betreffenden System. Andere Schriftarten könnten anders in der Zeilenbox liegen. Was

So dass es auch in verschiedenen Browsern funktioniert und möglichst auch, wenn im Browser z.B. eine Schrift fehlt und durch eine andere ersetzt wird.

wohl unmöglich macht.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Verschieden große Schriften innerhalb einer Zeilenbox werden per Default an der selben Grundlinie ausgerichtet.

Genau das kann man sich zunutze machen. In die kleinere Überschrift wird per CSS ein unsichtbares Zeichen (wie U+2060) in der Schriftgröße der größeren Überschrift eingefügt, womit die Grundlinien in beiden Containern gleich wären.

Da kuckst du.

… wohl unmöglich macht.

Sag niemals nie.

LLAP 🖖

[Kerstin83]

Danke für die Antworten!!! Scheint ja doch gar nicht sooo einfach zu sein.

In die kleinere Überschrift wird per CSS ein unsichtbares Zeichen (wie U+2060) in der Schriftgröße der größeren Überschrift eingefügt, womit die Grundlinien in beiden Containern gleich wären.

Also das funktioniert wirklich!!! Die Formatierung habe ich mit <span> hinzugefügt. Gibts da etwas einfacheres?

Wenn man es mit <span> macht benötigt man eigentlich auch gar kein Zeichen mehr. Man hat dann am Ende der Zeile ein <span> mit nichts drinnen.

Diese Methode ist ok, aber eigentlich doch ein bisschen krank. Eine richtig saubere Methode gibt es nicht?

Liebe Grüße

Kerstin

[Kerstin83]

Relativ sauber geht es mit ::after, dessen Schrift man dann wie die größere Überschrift formatiert. Content muss man setzen, kann aber leer bleiben.

Ein bisschen schräg ist es trotzdem :)

[Gunnar Bittersmann]

@@Kerstin83

Relativ sauber geht es mit ::after

Ob ::before oder ::after, ist in diesem Fall wumpe.

Content muss man setzen

Natürlich.

kann aber leer bleiben.

Hm, auszuprobieren, ob man ein (unsichtbares) Zeichen braucht oder ob es auch ohne dieses geht, darauf hätte ich auch kommen können. ;-)

Irgendwer fand diese Erkenntnis sogar bedeutsamer als alle anderen Erkenntnisse in diesem Thread. Naja, die Bewertungsfunktion hier im Forum war schon immer kaum mehr als ein nettes Spielzeug und wird wohl auch nie mehr werden.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ob ::before oder ::after, ist in diesem Fall wumpe.

Vielleicht nicht ganz, wenn etwa die Überschriften mehrzeilig werden. [ungetestet]

Irgendwer fand diese Erkenntnis sogar bedeutsamer als alle anderen Erkenntnisse in diesem Thread. Naja, die Bewertungsfunktion hier im Forum war schon immer kaum mehr als ein nettes Spielzeug und wird wohl auch nie mehr werden.

Vielleicht wurde der Plus1-Geber auch nur durch „Ein bisschen schräg ist es trotzdem :)“ zu einem Lächeln animiert.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ob ::before oder ::after, ist in diesem Fall wumpe.

Vielleicht nicht ganz, wenn etwa die Überschriften mehrzeilig werden.

Guter Punkt. Es MUSS also ::before sein – wie ich das hatte.

Hatte ich mir nun dabei was gedacht oder hatte ich das intuitiv richtig?

[ungetestet]

Was sich in meinem Codepen ja schnell machen lässt.

Vielleicht wurde der Plus1-Geber auch nur durch „Ein bisschen schräg ist es trotzdem :)“ zu einem Lächeln animiert.

Was meine „Nettes-Spielzeug“-These stützt.

LLAP 🖖

[Der Martin]

Hi,

Irgendwer fand diese Erkenntnis sogar bedeutsamer als alle anderen Erkenntnisse in diesem Thread.

das war ich, und die Anerkennung galt der Idee, eben nicht ein zusätzliches span-Element zu verwenden, sondern stattdessen ein ausschließlich per CSS generiertes Pseudoelement, so dass die saubere Trennung von Markup und Formatierung wieder gegeben ist.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

das war ich, und die Anerkennung galt der Idee, eben nicht ein zusätzliches span-Element zu verwenden, sondern stattdessen ein ausschließlich per CSS generiertes Pseudoelement, so dass die saubere Trennung von Markup und Formatierung wieder gegeben ist.

Hm, und die Idee kam von wem?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Hm, und die Idee kam von wem?

Betrachte eine positive Bewertung auch immer als Motivation.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Betrachte eine positive Bewertung auch immer als Motivation.

Ich hab dich gerade motiviert.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich hab dich gerade motiviert.

Das hast du auch ohne das +1 getan. Immerhin hast du zweimal „Guter Punkt“ geschrieben.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ich hab dich gerade motiviert.

Das hast du auch ohne das +1 getan. Immerhin hast du zweimal „Guter Punkt“ geschrieben.

Guter Punkt.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Betrachte eine positive Bewertung auch immer als Motivation.

Ich hab dich gerade motiviert.

Und jetzt haben einige Postings im Thread positive Bewertungen. Nicht aber das (die?) mit der Lösung des eigentlichen Problems. Jemand, der nicht den ganzen Thread durchlesen möchte, erhält so keine Orientierung.

Vielleicht denke ich auch noch zu sehr an „fachlich hilfreich“, aber dieser Funktion werden die Bewertungen kaum gerecht. Nettes Spielzeug.

LLAP 🖖

[Der Martin]

Hallo,

das war ich, und die Anerkennung galt der Idee, eben nicht ein zusätzliches span-Element zu verwenden, sondern stattdessen ein ausschließlich per CSS generiertes Pseudoelement, so dass die saubere Trennung von Markup und Formatierung wieder gegeben ist.

Hm, und die Idee kam von wem?

keine Ahnung, in deinem Posting kam der Aspekt jedenfalls nicht vor; Kerstin war AFAIS die erste, die ihn formuliert hat.

Und bevor du jetzt protestierst, das sei doch in deinem codepen-Beispiel gewesen (was ich nicht überprüfen kann): Ja, möglich. Aber erstens ist dort ohne Javascript gar nichts zu sehen; zweitens gehört die Kernaussage verlinkter Beiträge in Kurzform immer auch in den verlinkenden Beitrag.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

keine Ahnung, in deinem Posting kam der Aspekt jedenfalls nicht vor

„wird per CSS ein unsichtbares Zeichen … eingefügt“

codepen-Beispiel … (was ich nicht überprüfen kann): … dort ohne Javascript gar nichts zu sehen

*prust*

zweitens gehört die Kernaussage verlinkter Beiträge in Kurzform immer auch in den verlinkenden Beitrag.

War das zu kernig oder zu kurz für dich? ;-)

LLAP 🖖

[Der Martin]

Hi,

„wird per CSS ein unsichtbares Zeichen … eingefügt“

zweitens gehört die Kernaussage verlinkter Beiträge in Kurzform immer auch in den verlinkenden Beitrag.

War das zu kernig oder zu kurz für dich? ;-)

eins von beiden. Das Stichwort Pseudoelement war für mich das entscheidende Schlüsselwort. Und das kam bei dir noch nicht vor. Wie man "per CSS ein unsichtbares Zeichen einfügt", wollte sich mir jedenfalls nicht erschließen.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Das Stichwort Pseudoelement war für mich das entscheidende Schlüsselwort.

Magst du eine Liste der für dich entscheidenden Schlüsselwörter erstellen? Fürs SELF-Bingo? ;-)

Wie man "per CSS ein unsichtbares Zeichen einfügt", wollte sich mir jedenfalls nicht erschließen.

Siehe Pen. :-b

LLAP 🖖

[MrMurphy1]

Hallo

Diese Methode ist ok, aber eigentlich doch ein bisschen krank. Eine richtig saubere Methode gibt es nicht?

Nein, es gibt keine saubere Methode.

Dein Layoutwunsch deutet darauf hin, dass du noch dem Papierdenken unterliegst. Peter Müller hat das mal auf die Formel reduziert:

Papierdenken + Webseiten = enttäuschte Erwartungen

a) Autoren von Papierseiten erwarten die volle Kontrolle über das Aussehen ihrer Papierseiten.

und

b) Das Endprodukt ist bis auf mechanische Zerstörungen unveränderlich.

Webseiten funktionieren aber anders:

a) Der Autor einer Webseite kann nur empfehlen, wie eine Webseite aussehen soll

und

b) Webseiten sehen bei jedem Besucher anders aus

Dieser Unterschied ist den Entwicklern von HTML und CSS bewußt. Deshalb fangen sie gar nicht erst an, Layoutmöglichkeiten in HTML und CSS zu übernehmen, die in Textverarbeitungen oder Layoutprogrammen auf Papier Standard sind. Die aber in Webseiten unsinning sind.

Autoren, die bei Webeseiten fehlende Gestaltungsmöglichkeiten (= fehlende Kontrolle) beklagen und deshalb häufig vermuten, HTML und CSS seien in der Entwicklung gegenüber Textverarbeitungen jahrzehntelang hinterher, haben schlicht noch nicht verstanden, dass sie Äpfel mit Birnen vergleichen.

Gruss

MrMurphy

[Kerstin83]

Zum Glück habe ich jetzt die volle Kontrolle...

Auch wenn du es quasi als Dogma formulierst, ist es eine Meinungsäußerung.

Liebe Grüße

[Der Martin]

Hi,

Papierdenken + Webseiten = enttäuschte Erwartungen

und zwar entweder beim Autor, wenn er die Gestaltung nicht so hinbekommt, wie er sie auf dem Papier machen würde, oder beim Web-Besucher, der sich über festzementierte Größen und Anordnungen ärgert, weil sie für seine Umgebung (Browserfenster, Bildschirmauflösung, Schriftgrößen) ungünstig oder gar unbrauchbar sind.

a) Der Autor einer Webseite kann nur empfehlen, wie eine Webseite aussehen soll
b) Webseiten sehen bei jedem Besucher anders aus

ACK. HTML transportiert den eigentlichen Inhalt und dessen Strukturierung, und CSS gibt Hinweise zum Erscheinungsbild, die aber vom Browser im Idealfall flexibel umgesetzt werden können.

Dieser Unterschied ist den Entwicklern von HTML und CSS bewußt. Deshalb fangen sie gar nicht erst an, Layoutmöglichkeiten in HTML und CSS zu übernehmen, die in Textverarbeitungen oder Layoutprogrammen auf Papier Standard sind. Die aber in Webseiten unsinning sind.

Das stimmt ja so nicht ganz. CSS hat im Lauf der Zeit schon vieles übernommen, was ursprünglich aus dem Print-Layout stammt - Spaltenlayouts etwa. Umgekehrt saß ich schon öfter vor MS Word oder LO Writer und habe überlegt, wie ich eine bestimmte Formatierung hinkriege, die mit HTML/CSS überhaupt kein Problem wäre - wie etwa das gleichzeitige Zuweisen mehrerer Formatvorlagen (analog zu Klassen).

Und dann bedaure ich häufig, dass auch in Textverarbeitungen gelegentlich sinnvolle Funktionen bzw. Formatierungen verschwinden. So konnte man in Word 6.0 (AFAIR) noch getrennt festlegen, dass ein Absatz von seinem Vorgänger bzw. von seinem Nachfolger nicht durch einen Seitenumbruch getrennt wird. Nicht vom Nachfolger trennen (en: "keep with next") ist vor allem für Überschriften sinnvoll, nicht vom Vorgänger trennen (en: "keep with previous") dagegen für Aufzählungspunkte. Leider ist diese Variante mit Word 7 oder 8 entfallen, es gibt nur noch "mit folgendem zusammenhalten". Das hat zur Folge, dass man bei Aufzählungen den letzten Listenpunkt immer gesondert formatieren muss (denn nach diesem darf ja gern ein Seitenumbruch erfolgen), ebenso den einleitenden Absatz vor der Aufzählung, den man nicht von der Liste an sich getrennt sehen möchte.

Autoren, die bei Webeseiten fehlende Gestaltungsmöglichkeiten (= fehlende Kontrolle) beklagen und deshalb häufig vermuten, HTML und CSS seien in der Entwicklung gegenüber Textverarbeitungen jahrzehntelang hinterher, haben schlicht noch nicht verstanden, dass sie Äpfel mit Birnen vergleichen.

Im Gegenteil, HTML/CSS sind IMO in der Evolution eigentlich weiter als die meisten Textverarbeitungen. Aber du hast recht, der Vergleich ist eigentlich nicht angebracht, weil die Zielsetzung eine völlig andere ist.

So long,
 Martin

[Gunnar Bittersmann]

@@MrMurphy1

Nein, es gibt keine saubere Methode.

Nicht?

Dein Layoutwunsch deutet darauf hin, dass du noch dem Papierdenken unterliegst.

Nein.

Der Wunsch, dass ein bestimmter Text für die Überschrift auf jeden Fall in eine Zeile passt – das wäre ein Bespiel für „Papierdenken“.

Der Wunsch, die (erste) Zeile zweier Überschriften auf derselben Linie zu haben, ist auch auf Webseiten völlig legitim.

Webseiten funktionieren aber anders:
a) Der Autor einer Webseite kann nur empfehlen, wie eine Webseite aussehen soll
und
b) Webseiten sehen bei jedem Besucher anders aus

Ja, Styling ist progressive enhancement. Besonders an Tagen wie diesem. Wenn die Überschriften bei einem Nutzer nicht auf einer Linie sind, ist die Seite natürlich trotzdem benutzbar.

Das heißt aber nicht, dass man nicht versuchen sollte, die Seite möglichst gut aussehen zu lassen.

Dieser Unterschied ist den Entwicklern von HTML und CSS bewußt. Deshalb fangen sie gar nicht erst an, Layoutmöglichkeiten in HTML und CSS zu übernehmen, die in Textverarbeitungen oder Layoutprogrammen auf Papier Standard sind.

Das ist Unsinn.

Autoren, die bei Webeseiten fehlende Gestaltungsmöglichkeiten (= fehlende Kontrolle) beklagen und deshalb häufig vermuten, HTML und CSS seien in der Entwicklung gegenüber Textverarbeitungen jahrzehntelang hinterher, haben schlicht noch nicht verstanden, dass sie Äpfel mit Birnen vergleichen.

Das mag sein.

Die Unterschiedlichkeit ergibt sich aber nicht aus dem Unterschied CSS vs. Textverarbeitung, sondern aus dem Unterschied der Medien. Webseiten haben nun mal keine festgelegte Größe. Oder bei allen Nutzern gleiche Schriftart/-größe.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Dieser Unterschied ist den Entwicklern von HTML und CSS bewußt. Deshalb fangen sie gar nicht erst an, Layoutmöglichkeiten in HTML und CSS zu übernehmen, die in Textverarbeitungen oder Layoutprogrammen auf Papier Standard sind.

Das ist Unsinn.

Schließlich werden in CSS immer mehr Features von DTP-Programmen eingebaut. Ich denke da an CSS shapes und clip-path.

Und auch von Grafikprogrammen: blend modes, Filter.

Ich verweise hier auf die Vortragsfolien CSS - New Design Features meines geschätzten Kollegen.

LLAP 🖖

[Gunnar Bittersmann]

@@Kerstin83

Also das funktioniert wirklich!!! Die Formatierung habe ich mit <span> hinzugefügt.

Keine gute Idee.

Wenn man es mit <span> macht benötigt man eigentlich auch gar kein Zeichen mehr. Man hat dann am Ende der Zeile ein <span> mit nichts drinnen.

Man hat ein zusätzliches Element im Markup. Eins, was nur der Darstellung dient. Eins, was nicht ins Markup gehört.

Die saubere Trennung von Auszeichnung des Inhalts (HTML) und Angaben zur Darstellung (CSS) ist nicht nur ein akademischer Selbstzweck. Da hängen auch ganz praktische Dinge dran.

Wie z.B. Wartbarkeit. Jemand sieht im Code <span></span> stehen und denkt sich „Da räum ich doch mal auf. Weg damit!“ (Der jemand kannst auch du selbst sein – in zwei Jahren. Oder zwei Monaten. Oder zwei Tagen.)

Also besser gar nicht erst das Markup mit unsinnigen Elementen vollmüllen.

Diese Methode ist ok, aber eigentlich doch ein bisschen krank.

1. Nein. 2. Ja. Und kranker als nur ein bisschen. Ich würde den Zustand des Patienten als kritisch einstufen.

Eine richtig saubere Methode gibt es nicht?

Doch. Es im Stylesheet zu lösen. Dabei die Möglichkeiten von CSS auszuschöpfen. Wenn man etwas braucht, was nicht da ist, bietet CSS die Möglichkeit der Pseudoelemente. Was sollte daran nicht sauber sein, diese zu nutzen?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Da kuckst du.

Im Sinne besserer Wartbarkeit (Änderungen an so wenigen Stellen wie möglich) würde ich die Styles für die erste Überschrift und das Pseudoelement zusammenfassen. In deinem Fall also

section:first-child h2, section:last-child h2::before
{
	content: "";
	font-size: 3.2rem;
}

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Im Sinne besserer Wartbarkeit (Änderungen an so wenigen Stellen wie möglich) würde ich die Styles für die erste Überschrift und das Pseudoelement zusammenfassen.

Guter Punkt.

Ich hatte für DRY leichtfertig an custom properties (CSS-Variablen) oder Präprozessor gedacht, aber so geht’s natürlich auch. Besser.

Ich hab das leicht abgewandelt und in beide Richtungen gemacht. Dann kann man auch die Schriftgrößen ändern und die vormals größere Überschrift zur kleineren machen, ohne dass man dazu noch was anderes ändern müsste.

section:first-child h2,
section:last-child h2::before
{
	font-size: 1.8rem;
}

section:last-child h2,
section:first-child h2::before
{
	font-size: 2.4rem;
}

h2::before
{
	content: "";
}

Kuckst du.

LLAP 🖖

[Kerstin83]

Liebes Forum :)

ich bin ja mächtig erstaunt, wieviele Beiträge zu diesem Thema zusammengekommen sind. Die Lösung ist sehr gut brauchbar, ich bin begeistert von diesem Forum.

Ich möchte noch ein paar Dinge dazu sagen:

Verschieden große Schriften innerhalb einer Zeilenbox werden per Default an der selben Grundlinie ausgerichtet.

Genau das kann man sich zunutze machen. In die kleinere Überschrift wird per CSS ein unsichtbares Zeichen (wie U+2060) in der Schriftgröße der größeren Überschrift eingefügt, womit die Grundlinien in beiden Containern gleich wären.

Diesen Beitrag von Gunnar Bittersmann hätte ich gerne positiv bewertet und ich sehe es wie er, dass er es mehr verdient hätte als ich. Ich kann es aber leider nicht tun ("zu wenige Punkte"). Sorry. Aber ich danke dir wirklich sehr!!!

(btw. Was bedeutet in diesem Beitrag von dir am Anfang @@Gunnar Bittersmann. Ich kenne das nur mit einem @)

Ich habe zwei nebeneinander liegende div-Container in denen jeweils eine Überschrift ist,

Ein sicheres Zeichen dafür, dass es keine div-Container sein sollten, sondern sections.

Ob das richtig ist sei dahingestellt. In meinem Falle handelt es sich um ein cms-System. Da möchte ich nicht die gesamte Struktur ändern. Das cms-System zeichnet sich übrigens von Hause aus durch sehr gute google-Sichtbarkeit aus.

Und ::before ist definitiv besser als mein vorgeschlagenes ::after. Zumal in dem cms-System ohnehin schon viele ::after auftreten und sich das dann evtl. stören würde.

Das wechselseitige einsetzen der jeweils anderen Überschrift hatte ich auch gemacht (zwei dumme ein Gedanke :)

Tolles Forum

Kerstin

[Tabellenkalk]

Hallo,

Diesen Beitrag von Gunnar Bittersmann hätte ich gerne positiv bewertet und ich sehe es wie er, dass er es mehr verdient hätte als ich. Ich kann es aber leider nicht tun ("zu wenige Punkte"). Sorry. Aber ich danke dir wirklich sehr!!!

du müsstest die "Antwort akzeptieren" können. Oben rechts am Posting setzt du dafür ein Häkchen, das sollte auch ohne Punkte gehen.

Gruß
Kalk

[Kerstin83]

Danke. Akzeptiert habe ich jetzt die Antwort, was auch immer das heißen mag. Akzeptieren tue ich eigentlich alle Antworten die gegeben wurden.

[Matthias Apsel]

Hallo Kerstin83,

Danke. Akzeptiert habe ich jetzt die Antwort, was auch immer das heißen mag. Akzeptieren tue ich eigentlich alle Antworten die gegeben wurden.

Hast du denn einen besseren Vorschlag? Wiki/Bewertungsregeln

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Danke.

Bitte.

Akzeptiert habe ich jetzt die Antwort, was auch immer das heißen mag.

Das heißt, dass du diese Antwort als Lösung für dein Problem ansiehst. Daher wird sie jetzt im Ursprungsposting als solche direkt verlinkt. Außerdem hat der Autor dafür 15 Punkte bekommen.

Gruß
Kalk

[Kerstin83]

Ich wusste nicht, dass es das bewirkt.

Für jemanden, der hier zum Beispiel via Googl landet, wären spätere Posts besser. Diese sind aber nicht die Ideengeber. Hmmm...

[Gunnar Bittersmann]

@@Kerstin83

Für jemanden, der hier zum Beispiel via Googl landet, wären spätere Posts besser. Diese sind aber nicht die Ideengeber. Hmmm...

Der Threadersteller kann ja auch mehrere Antorten „akzeptieren“.

Sicher ist das Feature nicht optimal. So ist beispielsweise nicht sichergestellt, dass der Threadersteller bei mehreren angebotenen Lösungen wirklich die beste „akzeptiert“. Möglicherweise „akzeptiert“ sie/er die für sie/ihn vermeintlich verständlichste, die aber dennoch ziemlicher Unsinn sein kann und nicht empfehlenswert ist.

LLAP 🖖

[Gunnar Bittersmann]

@@Kerstin83

Danke. Akzeptiert habe ich jetzt die Antwort, was auch immer das heißen mag.

Die „akzeptierte(n) Antwort(en)“ wird (werden) im Originalposting in einem speziellen Feld angezeigt. Dadurch kommen Leser schnell von der Frage zur (vermeintlichen) Antwort, auch wenn sich im Thread noch andere, möglicherweise vom urspünglichen Thema abschweifende Postings häufen.

Akzeptieren tue ich eigentlich alle Antworten die gegeben wurden.

Das ist gut. ;-) Über die Formulierung „akzeptierte Antwort“ für dieses Feature muss wohl nochmal nachgedacht werden.

LLAP 🖖

[Kerstin83]

@@Kerstin83

Was bedeutet @@ ?

[Gunnar Bittersmann]

@@Kerstin83

Was bedeutet @@ ?

Ein Hack Workaround. Ich möchte gelegentlich ein Posting von mir (author:gunnar) im Archiv wiederfinden, bei dem ich mich sogar dran erinnere, wem ich damals geantwortet hatte. Die Forumssuche bietet aber kein Feld in-reply-to dafür an. Da behelfe ich mir mit @@.

LLAP 🖖

[Der Martin]

Hallo,

Danke. Akzeptiert habe ich jetzt die Antwort, was auch immer das heißen mag.

ja, der Begriff ist vielleicht etwas unglücklich gewählt. :-(

Akzeptieren heißt im Sinne dieses Forums, dass du eine Antwort (oder auch mehrere) quasi öffentlich für gut erklärst. Links zu diesen Antwortbeiträgen erscheinen dann prominent direkt unter deinem Eröffnungsposting, und der Autor des "akzeptierten" Beitrags bekommt 15 Punkte auf sein Konto, wenn es ein registrierter Nutzer ist.

Akzeptieren tue ich eigentlich alle Antworten die gegeben wurden.

Ja, ich sag ja, der Begriff ist nicht ganz optimal.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Ja, ich sag ja, der Begriff ist nicht ganz optimal.

Inspirated by stackoverflow.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Ja, ich sag ja, der Begriff ist nicht ganz optimal.

Inspirated by stackoverflow.

Du meinst „inspired“ oder „inspirited“ – was von beidem ist mir nicht ganz klar 😂

LG,
CK