kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Bildunterschriften mit CSS immer perfekt ausrichten

Die Gestaltung von Bildunterschriften kann mitunter lästig werden. Es ist schwierig zu entscheiden ob der Text zentriert oder linksbündig unter dem Bild angezeigt werden soll, da die Textmenge oft stark variiert. Zentrierte Bildunterschriften sehen bei kurzen Texten gut aus. Linksbündig passt besser wenn die Bildunterschrift mehrere Zeilen umfasst. Was also tun?

In diesem Beitrag findet ihr ein CSS-Snippet, dass automatisch dafür sorgt, dass kurze Bildunterschriften zentriert werden, und mehrzeilige Bildunterschriften linksbündig ausgerichtet werden.

Beitrag zu Ende lesen

Kommaseparierte Listen mit CSS

Eine HTML-Liste wird üblicherweise untereinander und mit Aufzählungszeichen dargestellt. Häufig wünscht man sich jedoch auch eine horizontale Darstellung, bei der die einzelnen Listenelemente nebeneinander stehen und mit Komma von einander getrennt sind. Nur hinter dem letzten Element soll natürlich kein Komma mehr stehen. Mit Hilfe der CSS-Pseudoklasse :not und des -Pseudoelements ::after kann die gewünschte Ansicht elegant hergestellt werden.

Beitrag zu Ende lesen