Einem umrandeten div einen Text im border hinzufügen

[Linuchs]

Moin,

in meinem Geneology-Projekt habe ich Rechtecke mit border. Nun möchte ich das Rechteck mit einem Text im border markieren (Mutter, Vater, Opa, ...), aber die Hintergrundfarbe #fff wird nicht akzeptiert, warum nicht?

  .E1:before {
    position: absolute;
    display: block;
    font-size: 80%;
    left: .5em;
    top: -.5em;
    color: #88f;
    content: " Mutter ";
    background: #fff ! important;
  }

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

da müsste man mehr vom HTML sehen, um das einschätzen zu können. Ich nehme an, die Z-Ordnung passt da nicht.

Es heißt übrigens mittlerweile ::before, nicht :before, um Pseudoelemente von Pseudoklassen klarer zu unterscheiden.

Vielleicht hilft schon die Verwendung von ::after statt ::before, damit das Pseudoelement weiter oben auf den Stapel kommt.

Du könntest statt eines ::before auch überlegen, ein <fieldset> Element mit <legend>Mutter</legend> zu verwenden. Ich glaube, genau diesen "Group-Box" Effekt willst Du haben.

Rolf

[Linuchs]

Hallo Rolf,

habe die Seite mit senkrechten Strichen im 10-Jahres-Raster versehen, die Personen mit fieldset, legend und margin-left an das Geburtsjahr gekoppelt.

Darüber ein Zeitstrahl, von wann bis wann sie gelebt haben. Da möchte ich noch das Alter eintragen, siehe meine Frage Alter einer Person in ganzen Jahren

Ungewöhnliche Darstellung, werde ich wohl noch ändern. Womöglich helfen Verbindungsstriche:

Linuchs

[Rolf B]

Hallo Linuchs,

Ungewöhnliche Darstellung, werde ich wohl noch ändern. Womöglich helfen Verbindungsstriche:

Das ist ziemlich schick.

Bei den Verbindungsstrichen teste aber auch den Fall, dass bspw. der Vater von 1919 bis 1942 gelebt hat und seine Eltern von 189x bis 196y.

Rolf

[Der Martin]

Hallo,

in meinem Geneology-Projekt habe ich Rechtecke mit border. Nun möchte ich das Rechteck mit einem Text im border markieren (Mutter, Vater, Opa, ...), aber die Hintergrundfarbe #fff wird nicht akzeptiert, warum nicht?

  .E1:before {
    position: absolute;
    display: block;
    font-size: 80%;
    left: .5em;
    top: -.5em;
    color: #88f;
    content: " Mutter ";
    background: #fff ! important;
  }

mein erster Gedanke: Wie ist das mit der z-Ordnung? Liegt das Pseudoelement etwa hinter seinem Masterelement? Außerdem ist es ein Pseudoelement, wird deshalb mit einem Doppeldoppelpunkt notiert.

Live long and pros healthy,
 Martin

[Linuchs]

Weder der Doppel-Doppelpunkt After noch der z-index hilft:

  .E1::after {
    position: absolute;
    display: block;
    font-size: 80%;
    left: .5em;
    top: -.5em;
    color: #88f;
    content: " Mutter ";
    background: #fff ! important
    z-index: 99; 
  }

auch important; mit ; ist nicht die Lösung.

[Matthias Scharwies]

Servus!

Moin,

in meinem Geneology-Projekt habe ich Rechtecke mit border. Nun möchte ich das Rechteck mit einem Text im border markieren (Mutter, Vater, Opa, ...), aber die Hintergrundfarbe #fff wird nicht akzeptiert, warum nicht?

  .E1:before {
    position: absolute;
    display: block;
    font-size: 80%;
    left: .5em;
    top: -.5em;
    color: #88f;
    content: " Mutter ";
    background: #fff ! important;
  }

Es müsste eigentlich !important; heißen. Der Firefox akzeptiert bei mir auch das Leerzeichen, wenn ich einen Farbnamen verwende.

Bei #fff ! important;steigt er aus!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Es müsste eigentlich !important; heißen.

Ja.

Der Firefox akzeptiert bei mir auch das Leerzeichen, wenn ich einen Farbnamen verwende.

Bei #fff ! important;steigt er aus!

??

Bei mit ergibt background: #080 ! important grün – sowohl in Firefox als auch in Safari als auch in Chrome. Test

😷 LLAP

[Rolf B]

Hallo Linuchs,

es wäre wichtig zu wissen, was Du sonst noch so alles gemacht hast. Dein CSS allein ist's nicht.

Gerade probiert:

article {
  position: absolute;
  border: 1px solid black;
  padding: 0.5em;
  width: 6em;
  height: 2em;
}

article.mutter::before {
  content: "Mutter";
  position: absolute;
  font-size: 75%;
  top: -0.5em; left: 1em;
  background: #fff;
  padding: 0 0.5em;
}

<article class="eltern mutter">
Elisabeth Müller
</article>

Einwandfreier weißer Hintergrund für die Mama, auch ohne Nuke

Ich bin aber noch nicht überzeugt davon, dass ein ::before-Element die richtige Lösung ist. Ein Screenreader würde seinen Inhalt nicht vorlesen, hier sagt das W3C beispielsweise, dass Texte in ::before und ::after rein dekorativen Charakter haben müssen und keine relevanten Inhalte zeigen dürfen. Bei "Mutter" ist das aber der Fall. Deswegen tendiere ich zum Fieldset mit legend - in der Hoffnung, dass die Semantik passt.

Look Ma, no absolute positioning necessary:

fieldset {
  width: 6em;
  margin: 0;
  padding: 0 0.5em 0.5em 0.5em;
}
fieldset legend {
  font-size: 75%;
  margin: 0;
  padding: 0 0.5em;
}
fieldset p {
  margin: 0; padding: 0;
}

<fieldset>
  <legend>Mutter</legend>
  <p>Elisabeth Müller</p>
</fieldset>

Rolf

[Der Martin]

Hallo Rolf,

Deswegen tendiere ich zum Fieldset mit legend - in der Hoffnung, dass die Semantik passt.

das war auch mein erster Gedanke, weil es "von ganz allein" die gewünschte Darstellung ergibt. Naja, Farben und Schriftgrößen muss man noch setzen, aber die Positionierung auf dem Rahmen passt schon mal.

Aber meines Erachtens ist fieldset eigentlich zum Gruppieren von Form Controls in Formularen gedacht.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Rolf B

Deswegen tendiere ich zum Fieldset mit legend - in der Hoffnung, dass die Semantik passt.

Wenn du Zeifel hast, warum schaust du dann nicht nach? Nicht im SELFHTML-Wiki, sondern in der Spec.

“The fieldset element represents a set of form controls (or other content) grouped together, optionally with a caption.”

Etwas vage, wie weit man „or other content“ auslegen kann. Aber fieldset steht unter 4.10 Forms.

Von einem Formular hier keine Spur. Mir scheint fieldset hier unangebracht zu sein.

Das Ganze ist doch eine Liste, oder? Und zwar eine, wo die Listitems jeweils einen Titel haben. Also eine Beschreibungsliste dl.

Die Items (div) bekommen den Rahmen, der Titel (dt) wird in den Rahmen platziert, fertig.

😷 LLAP

[Rolf B]

Hallo Gunnar,

ja, genau das waren meine Zweifel. Aber da in der Spec auch dies steht:

Contexts in which this element can be used:
Where flow content is expected.

dachte ich, das wäre machbar.

Eine Definitionsliste ist aber sicherlich das semantisch beste. Über Klassen sortiert man das in die Spalten eines Grid ein, und ein Screenreader liest einfach die Definitionsliste vor. Man sollte dann noch eine ordentliche Sortierung finden, damit die Lesereihenfolge stimmt.

Stammbaum von Manuel. Großvater mütterlicherseits: Ludwig. Großmutter mütterlicherseits: Luise. Großvater väterlicherseits: Moritz. Großmutter väterlicherseits: Maria. Mutter: Laura. Vater: Max. Kind: Susi. Deren Kinder: Sabine, Stefani, Sven. Kind: Paul. Dessen Kinder: Peter, Patrizia.

Dafür muss man geschickt anordnen und vermutlich noch ein paar Aria-Labels verteilen.

Viel Spaß, Linuchs 😀

Rolf

[Linuchs]

Hallo Rolf,

danke für deine aktive Hilfe.

es wäre wichtig zu wissen, was Du sonst noch so alles gemacht hast. Dein CSS allein ist's nicht.

Dem div habe ich ein overflow:hidden verpasst, damit lange Namen nicht aus dem Rahmen fallen.

Damit darf auch der border nicht überschrieben werden trotz z-index:99. Nun muss ich mir überlegen, wie ich den Inhalt im Rahmen halte:

Linuchs