nicht angemeldet
Grafik absolut positionieren, mit Berücksichtigung der Abmessung
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?
-
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?)
-
falls es per HTML/CSS nicht geht, wäre auch eine JS-Lösung möglich.
Danke für eure Hilfe!
-
Moin,
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.Meine Idee wäre die Grafiken statisch (mit px-Angaben) innerhalb eines Divs zu positionieren und diesen mit
margin:auto;zu zentrieren. Habs aber jetzt nicht getestet.Grüße Marco
-
Meine Idee wäre die Grafiken statisch (mit px-Angaben) innerhalb eines Divs zu positionieren und diesen mit
margin:auto;zu zentrieren. Habs aber jetzt nicht getestet.Die 50% waren nur ein Beispiel, die Prozentwerte entsprechen der Lage der Punkte auf der Landkarte. Sie werden aus der Lage der Koordinaten des Punktes auf einer beliebigen Landkarte dynamisch per JS erzeugt.
Also sollte auch z.B. bottom=24.8%; left=62.7% exakt funktionieren.-
Moin,
Die 50% waren nur ein Beispiel, die Prozentwerte entsprechen der Lage der Punkte auf der Landkarte. Sie werden aus der Lage der Koordinaten des Punktes auf einer beliebigen Landkarte dynamisch per JS erzeugt.
Das dachte ich mir schon. Du kannst ja trotzdem innerhalb eines Rahmen-Divs mit pixelgenauen Angaben arbeiten (die Dimensionen der Bilder kann man ja mit JS auslesen), und dann den Rahmen zentrieren. Dann hast du deine Karte innerhalb des Divs quasi. Oder vielleicht versteh ich das auch falsch. Hast du eine Beispielseite?
Grüße Marco
-
-
-
Hi,
du könntest das Bild mit negativem margin entsprechend der Hälfte seiner Höhe/Breite verschieben.
Bei deinem Beispiel also so:
<img src="pixel.gif" style="margin-bottom:-5px;margin-left:-5px;position:absolute; bottom:50%; left:50%; width:9px; height:9px" />Funktioniert nur wenn dir die Maße der Bilder bekannt sind oder du mit Javascript nacharbeitest.
~dave
-
du könntest das Bild mit negativem margin entsprechend der Hälfte seiner Höhe/Breite verschieben.
Bei deinem Beispiel also so:
<img src="pixel.gif" style="margin-bottom:-5px;margin-left:-5px;position:absolute; bottom:50%; left:50%; width:9px; height:9px" />Funktioniert nur wenn dir die Maße der Bilder bekannt sind oder du mit Javascript nacharbeitest.
Hi Dave,
Genial einfach, einfach schenial :-) So kann ich gleichzeitig mit Prozent- und Pixelpositionierung arbeiten. Funktioniert wie gewünscht, danke!
Theoretisch könnte man auch mit z.B. 2 übergeordneten, verschachtelten <div> arbeiten, in denen man getrennt Prozentpositionierung und Pixelkorrektur vornimmt. Aber für meinen Fall reicht die eine style-Zeile im <img>-Element volkommen aus.
-
... Kleinigkeit noch:
bei einem 9px x 9px Quadrat muß die Margin-Korrektur 4px und nicht 5px sein, damit genau der Mittelpixel auf den Prozent-Koordinaten liegt.
-
-
-
Hi,
- 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?)
Mit calc() könntest du
left:calc(50%-5px)o.ä. angeben.
Die Browser die calc unterstützen kenne ich nicht, aber AFAIK nur Firefox mit Vendor-Prefix.~dave