Die Projekttexte sind unterschiedlich lang, also waren auch die Kacheln
unterschiedlich hoch. Jetzt bekommen alle Kacheln einer Reihe dieselbe
Hoehe, naemlich die der hoechsten.
Dafuer waren drei Dinge noetig, und nur das erste ist offensichtlich:
1. "align-items: start" musste weg. Es liess jede Kachel ihre
natuerliche Hoehe behalten -- genau das war der Fehler.
2. Der Inhalt muss die zusaetzliche Hoehe auch aufnehmen koennen.
Ohne Flex-Aufbau in Kachel und Inhalt waere die Kachel zwar hoeher,
ihr Inhalt bliebe aber oben kleben und darunter entstuende ein
leeres Feld.
3. Das letzte Element sitzt am unteren Rand.
DER PUNKT, DER FAST DURCHGERUTSCHT WAERE
Gleich hohe Kacheln heissen NICHT automatisch, dass der Inhalt buendig
steht. Nach Schritt 1 und 2 waren die Kacheln exakt gleich hoch -- und
die Knoepfe standen trotzdem auf verschiedener Hoehe.
Grund: Die Abstaende standen als style-Angabe direkt im HTML
(style="margin-top:1rem"). Eine solche Angabe schlaegt jede Regel aus
dem Stilblatt, das "margin-top: auto" lief also ins Leere. Fuenf
Vorkommen entfernt.
Danach blieben 33 gegen 48 Punkte Abstand zum Kachelboden: Ein Absatz
bringt einen eigenen Abstand nach unten mit, eine Knopfreihe nicht.
Auch das ist jetzt vereinheitlicht.
Die Regel greift ueber :last-child statt nur ueber die Knopfreihe --
die Buchhaltungs-Kachel hat naemlich gar keinen Knopf, sondern einen
Hinweistext an dieser Stelle. Der soll genauso unten stehen.
DIE PRUEFUNG MISST BEIDES GETRENNT
Einmal "jede Reihe ist in sich gleich hoch", einmal "die letzten
Elemente stehen auf einer Linie". Ein einzelner Test auf die Hoehe
haette den Knopf-Versatz nie bemerkt -- die Kacheln waren ja bereits
gleich hoch, als die Knoepfe noch verrutscht waren.
Gemessen: 1129/1129, 881/881, 831 -- und ueberall 33 Punkte Abstand zum
Kachelboden.
Geprueft: 313 Pruefungen gruen (Portfolio 34, Bewegung 34, Verwaltung 62,
CRYONOVA 53, Blickfang 13, System 5, Abmelden 16, Abbruch 42,
Angebot 54).
Co-Authored-By: Claude Opus 5 <[email protected]>
DogFatherGitandClaude Opus 5
686e8924bb