Am Bildschirm sind 2cm eine sehr sehr relative Längenangabe. Dank zahlreicher Browserbugs gilt das gleiche leider oft auch für eigentlich so eindeutige Anweisungen wie 20 Pixel. Über Perus Weblog fand ich nun kürzlich etwas, das bei derartigen Fragen Abhilfe verspricht: Ein großes Raster mit Pixelangaben als Hintergrundbild zum präzisen Abmessen von Positionen und Längen. Eine schöne Idee, allein, die Grafiken, die's dort zu laden gab erschienen mir aus zweierlei Gründen nicht besonders brauchbar.

Warum ein neues Raster?

Erstens scheine ich der einzige zu sein, der bei der Gestaltung seiner Websites das Layout nicht in 10er-Schritten, sondern in Zweierpotenzen anlegt - bei mir ist nie etwas 250 Pixel breit, sondern bestenfalls 256 Pixel. Erscheint mir bei Computergrafiken sinnvoll, der Bildschrim ist ja in der Regel auch 1024 Pixel und nicht 1000 Pixel breit.

Zweitens ist diesere Raster-als-Hintergrundbild-Konstruktion ebenfalls nicht sinnvoll, sobald auf der Seite andere Elemente ebenfalls Hintergründe sporten und damit das Raster überdecken. Also heißt es mal wieder selbst ist der Mann.

Download und How-To

In mühevoller Kleinarbeit habe ich also ein mir zusagendes Raster in verschiedenen Farben gebaut. Als transparentes PNG lässt sich jede Version als absolut positioniertes img sehr schön über allen bestehenden Inhalt legen - an den Linien kann man dann seine Elemente präzise ausrichten.

Die Anwendung ist ebenfalls denkbar einfach, muss man doch lediglich die Grafik als absolut positioniertes Element auf seiner Seite einfügen.

<img src="grid-blue.png"
    style="position:absolute; top:0; left:0;" />

Und schon hat man ein schönes Raster über seiner Seite liegen und kann in Bequemlichkeit Pixel schubsen.

Raster bei Kram-hochladen.de im Einsatz
Wenn mal ein Element nicht genau sitzt, lässt es sich mit Hilfe eines Rasters genauestens nachvollziehen.

Einen (geringfügigen) Nachteil hat diese Technik allerdings. Das Raster ist ein absolut positionirtes Element über überdeckt als solches alle anderen Elemente - oder zumindest die meisten. Das heißt, dass Links u.Ä. die unter dem Raster liegen aufgrund der Transparenz der PNGs zwar sichtbar, aber nicht mehr anklickbar sind. Nicht weiter schlimm, weil außer dem Entwickler eh niemand das Raster zu sehen bekommen sollte. Und schließlich hat man ja seine statischen URLs sowieso im Kopf. Alles kein Problem.