Alle Artikel mit dem Schlagwort: CSS

Geheime Schleichwege in CSS: Wenn Rahmen aus dem Rahmen fallen

Wenn sich die Buttons in Ihrer Navigationsleiste berühren und Sie jeden Link mit einem Rahmen versehen, werden zwischen den Links die Begrenzungslinien doppelt dargestellt. Die unteren und oberen Rahmenlinien berühren sich. Das können Sie umgehen, indem Sie nur die untere Rahmenseite weglassen. Auf diese Weise wird zwischen den Links jeweils nur eine Begrenzungslinie angezeigt. Durch diese Methode fehlt jetzt aber die Begrenzungslinie unterhalb des letzten Links. Das können Sie jedoch beheben, indem Sie eine Klasse für die richtigen Rahmeneinstellungen definieren und diese dem letzten Link zuweisen. Noch besser ist es, wenn Sie die untere Rahmenseite einfach für das <ul>-Element definieren, das die Navigationsleiste umgibt. Auszug aus dem neuerschienenen CSS Missing Manual von David Sawyer McFarland.

Häufig gestellte Fragen zu CSS: Listen gut aussehen lassen

Wann werde ich jemals einen Kind-Selektor benutzen? Ich kenne so viele Selektoren, dass ich im Prinzip auf jedes Seitenelement zugreifen kann. Warum sollte ich also einen weiteren lernen? Allerdings gibt es im Webdesign eine Herausforderung, bei der Kind-Selektoren unschlagbar sind und die auf mehr Websites vorkommt, als Sie denken. Jedes Mal wenn Sie mit verschachtelten, ungeordneten Listen (wie in der Abbildung oben) arbeiten, können Sie Kind-Selektoren verwenden, um diese Kategorien und Unterkategorien visuell voneinander zu unterscheiden. Sie können die erste Ebene der Einträge anders gestalten als die zweite usw. Auf diese Weise präsentierte Inhalte wirken aufgeräumt, professionell und lesbar (und Ihre Besucher werden Sie dafür lieben). Legen Sie hierfür zuerst eine klassenbasierte Stildefinition für die oberste Listenebene an, z.B. mit dem Namen .hauptListe. Für diese Ebene soll eine serifenlose Schrift (sans-serif, z.B. Helvetica oder Arial) verwendet werden, die etwas größer ist als der übrige Text, vielleicht fett oder in einer anderen Farbe. Die folgenden Ebenen erhalten eine kleine Schriftgröße, dafür aber eine Serifenschrift (z.B. Times), um die Lesbarkeit zu erhöhen. Gerade bei viel Text hilft …