Verschiebung von Buttons

[Rolf B]

Hallo Centrino,

Es geht grundlegend darum mit dem Script meinen Info-Lehrer zu verarschen XD

Statt ihn zu vera... hättest Du besser mal zugehört als er über Grids gesprochen hat.

1. Ist ein Grid zweidimensional, darum ist es das falsche Mittel wenn es um ein einzeiliges Menü geht. Hier wäre Flexbox besser.

2. Solltest Du nicht so viel Auto fahren, vor allem nicht in der Column-Definition des Grid. Auto heißt: Lieber Browser, mach's so breit wie der Inhalt erfordert. Und wenn der Text fett wird, erfordert der Inhalt mehr Breite. Besser wäre hier eine Einteilung in vier Viertel, also grid-template-columns: repeat(4, 1fr). Oder flex: 1 1 25% bei Flexbox. Und bei schmalem Viewport (Handy) fällt deine Navigation auseinander, da wäre eine Media Query angesagt die dann eine andere Darstellung wählt.

3. Ach ja, Navigation. `<div class="menu-grid"> ist schlecht. Aus zwei Gründen. Erstens beschreibt der Klassenname eine Layout-Idee. Das sollen Klassennamen nicht tun, sie sollen ein Element fachlich beschreiben. Der Klassenname müsste also "navigation" oder "menü" heißen. Und damit kommen wir zum zweiten Grund: Für sowas gibt's ein spezielles Element: <nav>. Der Inhalt eines nav ist typischerweise eine Liste von Menüpunkten, d.h. bekommt markup mit ul und li, darin die Navigationslinks. Der Liste musst Du margin und padding wegnehmen und list-style:none verpassen. Und das ul Element stylest Du dann als Flexbox oder Hamburger-Menü, je nach Viewportbreite.

4. Deine Galerie möchte wohl lieber ein Grid oder eine Flexbox (mit wrap) sein; Tabellenlayout war aktuell als Du gerade geboren wurdest.

Rolf