Mein letzter CSS Aha-Moment
Moin!
Vor ein paar Wochen hatte ich einen Aha-Moment, den ich heute unbedingt mit dir teilen möchte.
Die Situation: Ich arbeite gerade an einem umfangreichen Website-Relaunch, der mich und meine Fähigkeiten auf eine Weise fordert, wie es schon länger nicht mehr der Fall war.
Eine Herausforderung, vor der ich stand, war die Anordnung von Logo und Navigation auf kleinen vs. großen Bildschirmen: Während das Logo auf kleinen Bildschirmen mittig im Header stehen und links und rechts jeweils 3 Menüpunkte (Icons) angezeigt werden sollten, sollte das Logo auf großen Bildschirmen linksbündig stehen und alle Menüpunkte (nicht als Icons) sollten rechts davon stehen.
Ich hatte eine ähnliche Darstellung (Logo mittig links und rechts Navigation) schon vor ca. 2 Jahren einmal umgesetzt und war damals ziemlich unglücklich mit meiner Lösung. Denn ich gestaltete den Startseitenpunkt als Logo (mit Hintergrundbild und Text verstecken) und nutzte dann Flexbox und order, um das Logo an die richtige Stelle zu bringen.
So wollte ich es dieses Mal auf keinen Fall wieder machen. Aber auch 2 oder mehr Navigationsmodule zu verwenden fand ich mehr als ungünstig. Musste ich auch nicht, denn die Lösung fiel mir im Schlaf ein (kein Witz):
Mit display: contents kannst du einem Container sagen, dass er sich so verhalten soll, als wäre er gar nicht da. Und wenn du das sowohl für das NAV- als auch das UL-Element machst, dann kannst du die Reihenfolge der Menüpunkte frei wählen.
Hammer, oder?!
Du verstehst nur Bahnhof? Keine Sorge. Ich habe eine Demo erstellt, um es besser verständlich zu machen:
Kennst und nutzt du display: contents bereits? Hattest du einen ähnlichen CSS Aha-Moment? Lass es mich gerne wissen, indem du auf diese Nachricht antwortest.
Viele Grüße,
Dennis