Aus der Praxis – nicht aus dem Lehrbuch

Ich bin Marcel. Webdesigner, Motorradfahrer und ich schreibe. Das hier ist meine eigene Ecke im Netz – hier sammle ich, was mich beschäftigt: Bikelife, Webdesign und alles dazwischen.

Mehr über mich


Zwei stilisierte lange Tabellen nebeneinander, getrennt durch ein nach rechts weisendes Winkelzeichen. Ein heller Kasten zeigt jeweils den sichtbaren Bereich, die Zeilen darüber und darunter sind ausgegraut. Links ist der dunkle Tabellenkopf oberhalb des Kastens aus dem sichtbaren Bereich gescrollt; rechts ist der Tabellenkopf weinrot eingefärbt am oberen Rand des Kastens angedockt, während die Zeilen darunter weiterlaufen.

Stehen bleiben, bitte – Sticky Header bei langen Tabellen

Bei langen Tabellen verliert man schnell die Übersicht, wenn der Tabellenkopf aus dem Sichtfeld scrollt. Wenn man den Tabellenkopf mit CSS festhält, während die Zeilen darunter durchlaufen, behält man die Übersicht. Und das ist weniger aufwendig, als man denkt.

Weiterlesen: Stehen bleiben, bitte – Sticky Header bei langen Tabellen
Viele Zuschauer beim Grid-Walk am Anneau du Rhin zwischen aufgereihten Porsche-Rennwagen, vorne rechts ein weisser Porsche mit der Startnummer 79. Blick von der Böschung über den Zaun, links die Wand mit dem Schriftzug «Anneau du Rhin» und dem Streckenplan, dahinter Zuschauer auf dem Hügel, Bäume und Berge unter blauem Himmel.

30 Jahre Anneau du Rhin

Ein Festival of Speed mit wunderbaren Eindrücken und grosser Zuschauermenge: Am 12. September 2026 feierte die Rennstrecke Anneau du Rhin im Elsass ihren 30. Geburtstag – und ich war dabei, etwas über ein Jahr nach meinem schweren Unfall auf genau dieser Rennstrecke.

Weiterlesen: 30 Jahre Anneau du Rhin
SCSS-Code in einem dunklen Editor, in der Bildmitte scharf, oben und unten unscharf. Im Fokus steht der Selektor .widget_social_links mit mehreren @extend-Anweisungen auf Bootstrap-Utilities wie .d-flex, .gap-3, .gap-md-4 und .justify-content-sm-end, darunter ein verschachteltes .menu-item mit @extend .d-flex und @include icon(2rem, 100%).

@extend mit Bootstrap – gemessen statt geglaubt

Bootstrap-Klassen per @extend zu übernehmen ist sehr praktisch. Bläht sich die CSS-Datei aber unkomprimiert auf 27 MB auf, ist das nicht OK. Man könnte folgern, dass sich @extend und Bootstrap nicht vertragen. Das hält einer Messung nicht stand: Teuer wird es nur bei wenigen, klar benennbaren Mustern.

Weiterlesen: @extend mit Bootstrap – gemessen statt geglaubt
Ein Motorradfahrer in rot-weiss-schwarzer Lederkombi und weissem Helm sitzt auf einem schwarz-roten Naked Bike auf einem Kiesplatz, dahinter Nadelwald und ein Bergpanorama.

Zuschneiden ohne zuzuschneiden – Bildformate mit CSS steuern

Bilder für Webseiten liegen oft nicht im richtigen Format vor, obwohl sie in einen Bereich mit fest vorgegebenem Seitenverhältnis passen sollen. Fehlt die Möglichkeit, sie zuzuschneiden, kann man sich mit «aspect-ratio» und «object-fit» im CSS behelfen: Der Ausschnitt sitzt, die Bilddatei bleibt unangetastet. Zugeschnitten wird also schon, aber nur optisch statt in der Datei selbst.

Weiterlesen: Zuschneiden ohne zuzuschneiden – Bildformate mit CSS steuern
Eine Wand aus weissem Lorem-ipsum-Text auf weinrotem Grund, zur Bildmitte hin scharf und zu den Rändern unscharf. Mehrere Worte sind unterstrichen und heben sich vom übrigen Text ab.

Unterstrichen, aber richtig

Eine Unterstreichung in HTML mit CSS ist mehr als ein Strich unter dem Text. Mit «text-decoration: underline» ist die Unterstreichung erreicht, doch es steckt mehr dahinter. Mit Beispielen aus dem Alltag möchte ich aufzeigen, wie sich das feiner steuern lässt und «border-bottom» unnötig werden kann.

Weiterlesen: Unterstrichen, aber richtig
JavaScript-Code des Lightbox-Moduls, Fokus auf der Pinch-Zoom-Logik

Lightbox für WordPress – ohne Plugin

Jeder kennt sie, man setzt sie fast voraus, und sie rückt ein Bild oder anderen Inhalt vor einem abgedunkelten Hintergrund in den Fokus – eine Lightbox. Für WordPress lässt sich so etwas mit einem Plugin lösen – oder man programmiert etwas Schlankes, das nur lädt, wenn es gebraucht wird, und sonst nicht.

Weiterlesen: Lightbox für WordPress – ohne Plugin