Pixeldrama » CSS

CSS-Tricks: vertikales Zentrieren

Benjamin — Wed, 13 Aug 2008 08:00:55 +0000

Text mit CSS2 vertikal zentriert zu positionieren, ist nicht so besonders spaßig, da nicht vorgesehen. Die Möglichkeiten, die es gibt, sind dann obendrein partiell nicht mit dem IE 6 kompatibel. Also wenn es sich vermeiden lässt, gar nicht anfangen irgendwas vertikal mit CSS zu zentrieren. Sollte kein Weg daran vorbeiführen, hier zwei Gestaltungswege:

Methode mit line-height

Dieses Vorgehen eignet sich nur für Einzeiler, also einen Schriftzug im Header oder eine horizontales Menü in Form zu bringen. Sobald was umbricht, tut sich die Hölle auf und schlimmere Dinge.

vertikal zentriert

vertikal zentriert

Methode mit display: table-cell;

Über die CSS-Eigenschaft lässt sich jedem Element ein Tabellenverhalten aufzwingen und in Kombination mit vertical-align tatsächlich vertikales Zentrieren erreichen. Leider versteht sich der IE 6 darauf nicht. Mit zusätzlichen HTML-Code lässt sich da was machen, der Quelltext wird dann aber ein uneleganter.

vertikal zentriert

vertikal zentriert

HasyCompressPortable 1.5 beta

Benjamin — Wed, 06 Aug 2008 08:00:58 +0000

Zur Komprimierung für CSS- und Javascriptdateien eignet sich HasyCompressPortable für Windows.

Download: HasyCompressPortable | Quelle: http://labuschin.com/

Räumliche Wirkung mit a:active

Benjamin — Tue, 05 Aug 2008 07:55:51 +0000

So einfach wie genial. Ein kleiner CSS-Trick, den Gerrit publiziert hat, und sich rasant im Netz verbreitet. Dieser Trick greift bei der Pseudoklasse a:active an, anhand derer ein Link formatiert werden kann, während er gerade geklickt wird. Es entsteht das Gefühl von Tiefe im Raum. Und verhilft der eher unbeachteten Pseudoklasse :active zu einem verspäteten Popularitätsschub.

Der Code:

a:active { position: relative; top: 1px; }

Gibt einen großartigen, geschmeidigen Effekt von Räumlichkeit ohne dabei zu protzen. Hier ein kleiner Testcase: a-active

Quelle: horstscheuer.net

CSS-Premiumtips

Benjamin — Fri, 09 May 2008 11:00:34 +0000

8 Premium One Line Css Tips gibt es bei cssglobe.com. Gibt ja so mancherlei Formatierungsproblem, dass man mit umständlichsten Workarounds bewältigt. Nur manchmal liegt die Lösung so nahe. Eine Aha-Effekt habe ich mit dieser Zeile erlebt:

textarea { overflow:auto; }

Diese Zeile entfernt die lästigen Scrollbalken der Textfelder beim IE.

Website besuchen: 8 Premium One Line Css Tips