Anmerkung/Frage zu frickl-Beispiel

[Lydia]

Hallo,

in dem Beispiel

springt der Text auf der linken Seite nach unten, wenn man auf das Menu-Symbol klickt.

Wie kann man dies vermeiden? Der Textbereich links könnte schmaler sein.

Gruß Lydia

[MudGuard]

Hi,

in dem Beispiel

springt der Text auf der linken Seite nach unten, wenn man auf das Menu-Symbol klickt.

Wie kann man dies vermeiden? Der Textbereich links könnte schmaler sein.

z.B. mit diesen beiden Zusatz-Rulesets:

main { max-width: 33em; }
nav details { position: absolute; right:0; top:0; }

ob das eine gute Lösung ist, wird Gunnar vermutlich demnächst anmerken.

cu,
Andreas a/k/a MudGuard

[Lydia]

Hallo Andreas,

z.B. mit diesen beiden Zusatz-Rulesets:

main { max-width: 33em; }
nav details { position: absolute; right:0; top:0; }

im Frickl sieht es gut aus, an meinem PC (1052x760) rutscht das ganz nach rechts.

Über border-Angaben wollte ich es genauer untersuchen, und mit der Angabe

main { border: 1px dotted green; }

liegt es wieder direkt rechts vom Text.

Für mich ist das CSS noch ein Buch mit sieben Siegeln, mit vielen Überraschungen, für Euch wahrscheinlich ein offenes Buch!

[Rolf B]

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?), 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 (die mit dem -- davor). Du könntest also dem details-Element hinzufügen:

   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.

Ich habe das Beispiel entsprechend überarbeitet. Da war eh ein Typo drin (<header> war doppelt).

Rolf

[MudGuard]

Hi,

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?), ist aber - denke ich - nicht nötig. Andreas wollte damit vermutlich erreichen, dass die Navigation nicht den Text im main-Teil überdeckt.

Ja, dazu kam noch:

Der Textbereich links könnte schmaler sein.

cu,
Andreas a/k/a MudGuard

[Lydia]

Hallo Rolf,

Ich habe das Beispiel entsprechend überarbeitet. Da war eh ein Typo drin (<header> war doppelt).

Wie lautet die Adresse des überarbeiteten Beispiels? An der mir bekannten Adresse ist <header> nach wie vor doppelt.

[JürgenB]

Hallo

Wie lautet die Adresse des überarbeiteten Beispiels? An der mir bekannten Adresse ist <header> nach wie vor doppelt.

kann es sein, dass du noch die alte Version im Cache hast?

Hier bzw. hier ist es richtig.

Gruß
Jürgen

[Lydia]

Hallo

Hier bzw. hier ist es richtig.

danke, und ich bin hier richtig gut bedient!