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.

<p style="line-height: 50px; text-align: center">vertikal zentriert</p>

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.

<p class="code" style="display: table-cell; vertical-align: middle; height: 50px;">vertikal zentriert</p>

vertikal zentriert

Für einzelne Hintergrundgrafiken gibt es schon lange Workarounds. Die funktionieren mit Hilfe von CSS, respektive der ab IE 5.5 vorhandenen Filterfunktion. Mittlerweile sind aber Webworker darauf gekommen dieses Problem per Javascript zu fixen. Ist auch kein grundsätzlich verkehrter Ansatz, aber halt auch nicht perfekt. Stichwort Firmennetzwerke mit IE 6 und abgeschalteten Javascript! Auch die Performance von Websites leidet, also vorsichtig sein bei Projekten mit viel Traffic. Oder auf PNG-8 beim IE 6 zurückgreifen.

Aber sonst spannende Geschichte und danke David fürs Testen.

Mehr Infos: IE PNG Fix v1.0 / 2.0 Alpha 2 | PNG Fix Testcase | Using PNG8 in Fireworks

textarea {
overflow:auto;
}

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

Website besuchen: 8 Premium One Line Css Tips

Man kann sich mit einer CSS-Klasse zum Beispiel .ext-link behelfen, die man dem a-Tag hinzufügt. Als CSS-Regel wird hinterlegt:

a.ext-link {padding-right: 10px; background: url(images/extern-icon.jpg) right no-repeat;}

Dieses zu Fuß gehen hat den Vorteil, dass es unter jedem Browser funktioniert. Nachteilig ist, wenn man diese Klasse nachträglich bei einer Masse von Links nachrüsten muss. Da schafft die etwas kompliziertere Regel mit der sich Elemente mittels spezifischen Werten für Attribute auswählen lasssen:

a[href^="http:"] { background: transparent url('/images/extern-icon.jpg') right no-repeat; padding-right: 10px;}

Links auf eigene Domain ausschließen:

a[href^="http://pixeldrama.de"], a[href^="http://www.pixeldrama.de"] { background: transparent; padding-right: 0px;}

Damit muss der HTML-Code nicht angerührt werden. Ausgeschlossen von der Iconisierung sind Links, die auf die eigene Domain zeigen. Großer Nachteil der Methode ist, dass sie nur von modernen Browsern unterstützt wird. Erst der Internet Explorer 7 stellt alles korrekt dar, alle Internet Explorer darunter verweigern die Gefolgschaft. Hier ist die Zeit auf unserer Seite, irgendwann wird der Internet Explorer 6 wohl aussterben. Bis diese Stunde gekommen ist, sichern nur CSS-Klassen maximale Browserkompatibilität.

Fein raus sind wie üblich die WordPressnutzer, denn diese können auf das Plugin Link Indication zurückgreifen. Dieses läuft unter allen WordPressversionen aufwärts von 2.0. Es hängt dynmaisch Klassen an externe Links, so dass auch ältere Beiträge und Seiten nicht alle nochmal angefasst werden müssen, bietet aber die Möglichkeit unter Seiten wie Wikipedia oder Heise zu unterscheiden. Diese erhielten dann ein extra Icon. Macht alles noch mehr usable. Hätte es diese Plugin noch nicht gegeben, der Zeitpunkt für ein WordPress-Plugin aus meiner Feder wäre nahe herangerückt.

Aber das ist so das Kreuz mit WP, es gibt einfach schon alles für das System, man kann sich ruhig zurücklehnen und fett werden, wenn man nur weiß, wie man Google bedient.

Einfach für Alle (Efa) hat sich der Sache in einer umfassenden Artikelserie angenommen. Das Thema ist sehr gut aufgegliedert nach Design, technische Aspekte, Tests und schon beim ersten Überfliegen der Artikel stellen sich schnell Erkenntnisse ein, mit denen sich ein Formular zugänglicher aufbereiten ließe.
Und auch Leute, die nicht gerne am Monitor lesen, kommen mit der Printversion der Artikelreihe nicht zu kurz.

Sollte unbedingt von jedem, der sich Webdesigner schimpft, gelesen werden: Reine Formsache

(via)

Infolgedessen muss, falls man nicht einen Editor benutzt, der dies automatisch tut – wie z.B. E-TextEditor :-), auch mal eine Entität nachgeschlagen werden. Zu diesem Zweck kann man sich HTML Entity Character Lookup näher ansehen. Mit dem Einsatz von AJAX Javascript, hat nichts mit AJAX zu tun, fühlt sich nur so an, bekommt man augenblicklich nach Eingabe des Sonderzeichens die Entität angeboten. Sehr angenehmer Service.

Zusätzlich ist natürlich auch möglich, sich auf die altmodische Art durch entsprechende Listen, wie bei e-workers oder XHTML Character Entity Reference oder HTML-Zeichenreferenz zu quälen.

Website HTML Entity Character Lookup besuchen…