Thomas: Grafik absolut positionieren, mit Berücksichtigung der Abmessung

Beitrag lesen

Hallo!

Ich möchte für eine Landkartenanwendung Grafiken (Quadrate unterschiedlicher Größe) absolut per Prozentwerte auf einer Landkarte positionieren. Das funktioniert mit einer 1px x 1px -Grafik ganz exakt. Nun möchte ich aber auch größere Quadrate genau positionieren, beispielsweise soll ein 9px x 9px Quadrat exakt in der Mitte liegen.

<img src="pixel.gif" style="position:absolute; bottom:50%; left:50%; width:9px; height:9px" />

Derzeit wird aber nur der linke,untere Pixel des Quadrats in der Mitte gezeichnet, alle anderen sind nach rechts, oben verschoben, somit liegt das 9px-Quadrat nicht in der Mitte sondern ist nach rechts oben verschoben.
Es ist übrigens egal ob ich das 9px-Quadrat per width/height einer 1px-Grafik definiere, oder direkt ein 9px-Quadrat-Image dazu verwende.

Kennt jemand von euch CSS-Experten eine Möglichkeit solche Grafiken unter Berücksichtung deren Höhe/Breite exakt zu positionieren?

  1. ev. wäre auch eine statische Lösung brauchbar, bei der von den vom Browser errechneten Positionswerten anschließend immer 3px von left und bottom abgezogen werden und danach erst die Grafik gezeichnet wird (Problem: gleichzeitige Verwendung von %- und px- Positionierung möglich?)

  2. falls es per HTML/CSS nicht geht, wäre auch eine JS-Lösung möglich.

Danke für eure Hilfe!