Ich hatte denOriginal-Artikel zwar auch gesehen, aber irgendwie hat Perun mit seiner Übersetzung des Artikels mein Interesse mehr geweckt. Gut die Hälfte dieser „Tricks“ habe ich aber irgendwie schon in die Schublade „bekannt“ einsortiert.

Die folgenden Kommentare beziehen sich auf die Übersetzung von Perun, es ist also sinnvoll, sich „den dort gespeicherten Artikel“:http://www.perun.net/archiv/2004/09/05/10-css-tricks/ zuerst durchzulesen.

h3. Zu 5. Image replacement

Der Grund für die „linksverlagerung“ des ursprünglichen Inhaltes ist, dass einige Screenreader Text ignorieren, der auf display:none gestellt ist. Der negative Einzug, der den Text vom Bildschirm drängt, macht den Text unsichtbar, aber trotzdem lesbar für Screenreader. Es gibt auch eine Möglichkeit, visibility:hidden einzusetzen, aber das habe ich gerade nicht griffbereit.

h3. Zu 8. Vertikales zentrieren

line-height bewirkt, dass die Inhalt vertikal zentriert werden. Nachteil ist, dass man eine bestimmte Höhe angeben muss. Entweder in Pixeln, was etwas unflexibel werden kann, oder in Bezug auf die Zeichengröße. line-height eignet sich also z. B. für Navigationselemente, bei denen die Höhe ja meist bekannt ist. Und natürlich für die Zeilenhöhe von Fließtext ;-)

Die vertikale Zentrierung einer Logografik in der Mitte des Bildschirms ist damit schwer möglich; dafür verwende ich (wenn es wirklich mal sein muss) eine Tabelle. Nicht schön, aber es geht eben.

h3. Zu 9. Positionieren innerhalb einer Box

Die relative Positionierung eröffnet mir zwei Möglichkeiten:

Zum einen kann ich die Box „positionieren“, wodurch sie zur Referenz für darin liegende, absolut positionierte Elemente wird. Ich verwende das z. B. hier, um ein zweispaltiges Layout mit flexibler Kopfzeile zu bekommen. Genauer erklärt hat das Doug Bowman (englisch).

Zum anderen kann man die relative Positionierung verwenden, um ein Element leicht zu verschieben und so mehrere Elemente leicht übereinander zu legen.