Probleme mit Positionierung von Pseudo-Element

[heinetz]

Hallo Forum,

in meinem Design wird über jeder Headline ein kurzer Strich mit einer festen Länge angezeigt.

Den habe ich, wie folgt, als Pseudo-Element umgesetzt:

  &:before{
    content : "";
    display:block;
    border-top: 2px solid get-color(dark-soft);
    width: 53px;
    position: static;
    height: 0;
    margin-bottom: 20px;

... und der Strich wird, ensprechend den Texten, linksbündig angezeigt. In einem anderen Fall werden die Headlines aber nicht linksbündig, sondern zentriert angezeigt. Siehe hier

Die Zentrierung der Texte erfolgt über ein align-items: center; des umschliessenden Containers. In diesem Fall sollte der kurze Strich eigentlich auch zentriert dargestellt werden. Ich wüsste zwar wie ich den Strich zentriert darstelle aber ich habe keine Idee, wie ich das in Abhängigkeit von der Ausrichtung der Headlines hinbekommen soll. Sprich, ihc müsste den Strich so definieren, dass er linksbündig dargestellt wird, wenn die Headline linksbündig dargestellt wir und zentriert darstellen, wenn die Headline zentriert ist.

Hat jemand eine Idee?

1000 Dank und

beste gruesse, heinetz

[Rolf B]

Hallo heinetz,

Wenn Du die Flexbox bzw. das Grid nur zum Zentrieren nutzt, dann kannst Du das Problem vielleicht so umgehen:

<h2 class="center">Eine Überschrift für die Welt</h2>
<p>Lorem ipsum dolor sit irgendwas.</p>

/* h2 Element färben um zu zeigen wo das eigentliche Element sitzt */
h2 {  background-color: #ccf; }

h2:before {
  content: "";
  display: block; width: 5em; height: 0.2em;
  border-top: 5px solid red;
}

/* Zentrieren mit width: max-content und margin:auto */
h2.center {
    margin: auto; width: max-content;
}
/* :before Teil ebenfalls innerhalb des h2 zentrieren */
h2.center:before {
  margin:auto;
}

Siehe auch hier: https://jsfiddle.net/cv00ma28/ ?

Wenn Du die Flexbox oder das Grid aus anderen Gründen brauchst, dann guck mal, wie Du Selektoren basierend auf dem Container bauen kannst, um meine .center Klasse anders zu realisieren.

Rolf

[Rolf B]

Ich habe mein Beispiel oben mal rot angemalt - EXAKT so soll es natürlich nicht sein. Eine Klasse .center ist präsentationsbezogenes Markup und zu vermeiden.

Die zu zentrierenden Überschriften befinden sich sicherlich in irgendeiner Art von Container. Dieser Container sollte eine Klasse oder ID haben, der den sachlichen Zusammenhang beschreibt, z.B. class="speisekarte". Im praktischen Einsatz sollte man dann statt h2.center Selektoren finden wie

.speisekarte h2
.speisekarte h2:before

Rolf

[drdf]

Mein Lösungsvorschlag:

h1 {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 53px 2px;
  background-repeat: no-repeat;
  background-position: left top;
}

h1.center
{
  background-position: center top;
  text-align: center;
}

[Gunnar Bittersmann]

@@drdf

h1.center

Aus der Aufgabenstellung: „Die Zentrierung der Texte erfolgt über ein align-items: center; des umschliessenden Containers.“ Da steht nichts von präsentationsbezogenem Markup.

LLAP 🖖

[Gunnar Bittersmann]

@@heinetz

Die Zentrierung der Texte erfolgt über ein align-items: center; des umschliessenden Containers.

Der Container ist eine Flexbox?

Hat jemand eine Idee?

Der Trick ist: die Überschrift ebenfalls eine Flexbox sein lassen und align-items von der Container-Flexbox vererben.

☞ Codepen

LLAP 🖖

[heinetz]

Hallo Gunnar,

Die Zentrierung der Texte erfolgt über ein align-items: center; des umschliessenden Containers.

Der Container ist eine Flexbox?

Vielen Dank für die Idee. Die Lösung funktioniert wenn der umschliessende Container eine Flexbox ist. Ist er das nicht, funktioniert die Lösung nicht mehr. Gibt es eine Lösung, die ohne diese Vorgabe funktioniert?

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Die Zentrierung der Texte erfolgt über ein align-items: center; des umschliessenden Containers.

Der Container ist eine Flexbox?

Vielen Dank für die Idee. Die Lösung funktioniert wenn der umschliessende Container eine Flexbox ist. Ist er das nicht, funktioniert die Lösung nicht mehr.

Weil align-items gar nicht wirkt‽ (Es sei denn, der umschliessende Container ist ein Grid.)

Gibt es eine Lösung, die ohne diese Vorgabe funktioniert?

Wenn align-items nun doch nicht die Vorgabe sein soll, was denn dann?

LLAP 🖖

[Rolf B]

Hallo heinetz,

align-items ist eine Flexbox-Eigenschaft. D.h. die Anforderung "Flexbox" kam ursprünglich von Dir.

Einen Lösungsvorschlag ohne Flexbox hatte ich weiter oben gemacht.

Wenn Dir das nocht nicht reicht, dann gibt etwas Butter bei die Fische: Was genau willst Du tun, in welchem Umfeld? Sonst stochern wir nur im Nebel. Schick uns einen Link auf die Seite, an der Du baust. Oder wenn das nicht geht, mache bitte ein Muster in einem Weblabor wie codepen oder jsfiddle.

Danke schön :)
Rolf

[Gunnar Bittersmann]

@@Rolf B

Einen Lösungsvorschlag ohne Flexbox hatte ich weiter oben gemacht.

drdf auch. Das Markup mit Darstellungsangaben vollzumüllen ist aber keine Lösung, die man anstreben sollte.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

das stimmt, darauf hätte ich eingehen sollen. Ich übersehe immer, dass solche Beispiele unreflektiert als Kopiervorlage verwendet werden könnten.

Sicherlich hat der OP einen irgendwie gearteten Container um die zentrierten Überschriften, der den Sachverhalt identifiziert. Zum Beispiel <section class="speisekarte">. Die beabsichtigte Lösung wäre dann

.speisekarte h2 { ... }
.speisekarte h2:before { ... }

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die beabsichtigte Lösung wäre dann

.speisekarte h2 { ... }
.speisekarte h2:before { ... }

Schon besser.

Noch besser ist es aber, wenn die Dekoration sich automatisch mit der Überschrift ausrichtet, ohne dass man dafür noch gesonderte Angaben machen muss. Ist ja nicht so, dass das nicht ginge.

LLAP 🖖

[Gunnar Bittersmann]

@@heinetz

Wenn nicht mit align-items, dann mit text-align?

Ein Pseudoelement wird über die volle Breite zur Überschrift absolut positioniert, darin eine entsprechende Anzahl von NBSP. Diese werden horizontal automatisch genauso ausgerichtet wie der Text der Überschrift. Die Linie ist die Überstreichung. (Unterstreichung ginge auch, muss man dann halt anders positionieren.) Die Dicke der Linie wird durch die Schriftgröße fürs Pseudoelement bestimmt; danach richtet sich dann die Anzahl der NBSP.

☞ Codepen

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ein Pseudoelement wird über die volle Breite zur Überschrift absolut positioniert

Volle Breite ja, absolutute Positionierung muss nicht. Das Pseudoelement kann ja auch in y-Richtung über der Überschrift liegen statt in z-Richtung. Der obere Abstand der Überschrift ist dann entsprechend zu verringern.

darin eine entsprechende Anzahl von NBSP. […] Die Linie ist die Überstreichung.

Oder man verwendet stattdessen gleich Zeichen, die eine geschlossene Linie ergeben: '_' sollte das tun.

☞ noch ein Codepen

LLAP 🖖

[heinetz]

@@Gunnar Bittersmann

Ich kann nicht sagen, in welchem Umfeld die Headlines angezeigt werden. Von daher gehe ich davon aus, dass sie u.U. auch einfach Kind von <body> sein können. In de Fall werden sie meinem Verständnis nach mit text-align und dessen default-Wert ausgerichtet.

Die Lösung mit dem Unterstrich gefällt mir auch sehr gut. Damit verhält sich die Linie genau wie Text. Allerdings hat man dann nicht mehr so direkten Einfluss auf die Grösse des Strichs.

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Die Lösung mit dem Unterstrich gefällt mir auch sehr gut. Damit verhält sich die Linie genau wie Text. Allerdings hat man dann nicht mehr so direkten Einfluss auf die Grösse des Strichs.

Hast du doch: Mit der Schriftgröße des Pseudoelements legst du die Strichdicke fest. Danach legst du mit der Anzahl der NBSP bzw. '_' grob die Breite fest. Dann geht’s ans Finetuning: Mit (dem Nachkomma-Anteil) der Schriftgröße kannst du die Breite ändern, ohne dass sich die Strichdicke merklich ändert.

Du hättest aber lieber eine Möglichkeit, Strichdicke und Breite direkt anzugeben? Dem Ingenör ist nichts zu schwör. content kann statt einer Zeichenkette auch einen URL einer Grafik als Wert haben; SVG bietet sich an – mit width und height. Kann auch als Data-URL im Stylesheet sein. Da muss nichts drin sein, nur Hintergrundfarbe. Nur dass die Farbe im SVG angegeben werden muss und nicht die Textfarbe der Überschrift übernehmen kann. Oder ginge das auch irgendwie?

Jetzt ha’m wa’s aber: ☞ Codepen

LLAP 🖖

[heinetz]

@@Gunnar Bittersmann

GROSSARTIG!

frohes fest