Anmerkung/Frage zu frickl-Beispiel
bearbeitet von
Hallo Lydia,
das liegt an der max-width Angabe für main, würde ich sagen. Diese Angabe limitiert die Breite des main-Elements auf 33em ([Was ist ein em?](https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben/relative_Einheiten)), ist aber - denke ich - nicht nötig. Andreas wollte damit vermutlich erreichen, dass die Navigation nicht den Text im main-Teil überdeckt.
Bei einem Drop-Down Menü ist das aber eigentlich genau das, was man möchte. Damit der Hintergrundtext durch das Dropdown-Menü hindurch nicht sichtbar ist, braucht das Menü eine Hintergrundfarbe.
Im Beispiel ist es so, dass das nav-Element die Größe 0×0 hat, weil sein Inhalt, das details-Element, mit position:absolute herausgezogen und oben rechts platziert wird. Die Hintergrundfarbe muss deshalb für das details-Element gesetzt werden. Das Beispiel ist auf Darkmode ausgelegt und speichert seine Farbpalette in [custom properties](https://wiki.selfhtml.org/wiki/CSS/Custom_properties_(CSS-Variablen)) (die mit dem -- davor). Du könntest also dem details-Element hinzufügen:
~~~css
nav details {
background-color: var(--bgcolor);
}
~~~
mit var() liest Du den Inhalt eines custom property aus. Dadurch kann das Dropdown den möglicherweise darunterliegenden Text komplett überdecken und dieser Text muss nicht mit anderen Mitteln ferngehalten werden.
_Rolf_
--
sumpsi - posui - obstruxi