Icon Flyout / slidern ähnlich wie bei meiner Navigation

[Rolf B]

Hallo einsiedler,

Der Esel erscheint nicht, weil Du einen meinen persönlichen Lieblingsfehler gemacht hast: Die Eigenschaft background-image vs background.

Falsch:

background-image: center no-repeat url(...);

Richtig:

background-image: url(...);
background-position: center;
background-repeat: no-repeat

oder

background: center no-repeat url(...);

Der Esel fliegt noch nicht; ich denke, soweit warst Du noch nicht mit meinem vorigen Beitrag. Dort stehen Hinweise dazu.

Jetzt noch zu ein paar anderen Dingen.

• Viele deiner Elemente haben eine id und eine class. Die Formatierung machst Du mit einem bunten Strauß an Eigenschaften, die teils bei der ID und teils bei der class stehen. Das ist unübersichtlich und verwirrend.

  • Wenn die Eigenschaft nur für genau dieses eine Element wichtig ist, setze sie bei der ID

  • Wenn es mehrere Elemente mit der gleichen Klasse gibt und die Eigenschaft für alle Elemente dieser Klasse gelten soll, setze sie für die Klasse.

  • Wenn eine Eigenschaft für alle Elemente einer Klasse gelten soll, die Kindelement eines bestimmten Elements sind, gib dem Elternelement eine ID und selektiere nach dem Schema #parent-id .elem-class. Geschicktes Selektieren im CSS ist nicht ganz einfach und eine einmal gefundene Lösung muss nicht dauerhaft richtig sein.

  • Wenn eine Klasse für nur ein Element verwendet wird, überlege genau, warum, es diese Klasse überhaupt gibt. Gründe für Einmalklassen:

    • Sie werden mit JavaScript gesetzt oder entfernt
    • Du möchtest eine wiederverwendbare Komponente bauen (oder verwendest eine)

  • Bei jeder Änderung überlege genau, ob die Verteilung auf ID und Klasse weiterhin gerechtfertigt ist.

  • Ich weiß natürlich nicht, wie deine Planung ist und ob die Klassen, die derzeit nur einmal verwendet werden, künftig öfter vorkommen.

• Das nav id="main-nav" Element braucht noch ein display: flex, damit Button und ul nebeneinander sind.

• Die #global-navigations müssen kein Grid sein. Ich würde das so machen:

  • #global-navigations bekommt position:relative und padding: 0.45em; (das horizontale Padding ist relativ egal)
  • Das details-Element (pagecontent-titelbox) bekommt width:25em und margin: 0 auto, damit ist es zentriert. Alternativ zu width:25em ginge auch width:fit-content und etwas Padding im Summary.
  • Das main-nav Element bekommt position:absolute, top:0 und right:0.5em. Weg mit grid-column, justify-self, flex-basis und height.
  • Wenn Du möchtest, dass der Button in der global-navigations Box drin bleibt, mach ihn entweder kleiner oder verringere seinen margin. Derzeit hat er 0.7em. Tu das nicht blindlings für alle Buttons, sondern nur für #main-nav button.

Rolf