Dropdown-Menu zur Sprachenerweiterung

[Rolf B]

Hallo Gustav,

diverse Probleme.

1. Syntax

nav details {
  position:absolute
  background-color: ffffff;
}

• CSS Eigenschaften werden mit einem Semikolon abgeschlossen (fehlt bei position:relative auch)
• RGB-Farbangaben benötigen ein vorangestelltes #

nav details {
  position:absolute;
  background-color: #ffffff;
}

2. Flex-Basis

  flex: 3 0 auto;
  flex: 1 1 0%

Beides nicht so gut, wenn der Inhalt einer Box absolut positioniert wird. Da der absolut positionierte Inhalt aus dem Flow 'raus ist, hat die Box keinen Inhalt mehr, der die Breite bestimmt. Ich würde in beiden Fällen 3em oder so (oder mehr, je nach Lage) als flex-basis angeben, also dem 3. Parameter der flex Eigenschaft.

3. Ich lag falsch.

Was ich jetzt beim Probieren gemerkt habe: ich war auf dem Holzweg. Das <details> Element darf nicht position:absolute bekommen. Ich habe mir nochmal Jürgens Tutorial aus unserem Wiki angeschaut. Leg ein <div> um deine Sprachlinks und mach das position:absolute. Damit lösen sich einige Probleme in Luft auf, unter anderem die Breite der Hauptmenüpunkte. Dann noch ein paar Justierungen für paddings und margins, damit der Globus sauber platziert ist, und das Popup-div platzierst Du im Cinemascope-Modus mit right:0, und im Handymodus mit right: 50%; transform: translate(50%,0);

Achso: die Background-color muss nur auf das Popup-div. Nicht aufs Details-Element.

Rolf