[ERLEDIGT] Headline | Balken neben Text

[rantanplan2000]

Hallo,

ich suche gerade eine Lösung einen verticalen Balken neben meine Headline zu machen. Aktuell habe ich es mit

border-left: 3px solid red;

gelöst. allerdings habe ich so natürlich das padding der schrift, und der Balken ist etwas größer als die Schrift.

Alternative fällt mir nur ein, eine Tabellenspalte zu machen ... gibt es noch mehr Lösungen, dass der Balken die gleiche Höhe hat wie die Schrift?

 

[MrMurphy]

Hallo

Deine Frage ist für eine konkrete Antwort leider viel zu undifferenziert.

Was verstehst du überhaupt unter "gleiche Höhe" bei einer Schrift? Es gibt verschieden hohe Buchstaben, die zudem nach oben und unten aus dem Schriftbild herausragen.

Zu jeder Schrift gehört zudem eine Mindestfreifläche über dem höchsten und unter den untersten Buchstaben. Diese Mindestfreiflächen hängen zudem von der jeweiligen Schriftart ab.

Das seitliche Striche länger als die eigentliche Schrifthöhe sind ist zudem der Normalfall. Striche nur in Buchstabenhöhe wirken deshalb auf Besucher eher falsch.

Und wie soll sich der Strich bei Zeilenumbrüchen verhalten? Wenn der Strich genau der Buchstabenhöhe entspricht wird die Linie gestrichelt.

so natürlich das padding der schrift

Wieso natürlich? Das padding kannst du doch anpassen.

Seitliche Striche können auf vielfältige Art erzeugt werden und damit auch ihre Länge bestimmt werden.

So kann ein span-Element vor den Text gesetzt und formatiert werden.

Oder ein CSS-before-Element.

Oder eine Hintergrund-Rastergrafik.

Oder eine SVG als Hinter- oder Vordergrundgrafik.

Oder ein senkrechter Strich aus dem UTF-8-Zeichensatz.

Oder ein Icon-Font.

Oder ...

Es gibt also viele Möglichkeiten.

Gruss

MrMurphy

 

[rantanplan2000]

Hallo MrMurphy,

hier mal ein Foto wie es mit Border-Left aussieht:

Jetzt wollte ich den Balken eben auf gleiche Höhe bringen wie das D bzw eben die Headline. Wenn ich den Padding anpasse und die Überschrift zwei Zeilig wird, sieht das eben doof aus.

Wie würdest du sowas umsetzen?

Danke und Grüße

 

[MrMurphy]

Hallo

Wie würdest du sowas umsetzen?

Padding kleiner, margin größer.

Gruss

MrMurphy

 

[rantanplan2000]

;) Danke.