#1 6. April 2014 Hey, ich habe eine Deutschlandkarte auf der ich 3 Orte "markiert" habe. Das ganze ist eine image-sprite und die Standorte werden darauf plaziert. siehe: Dynamische Kartenanwendung Mein Problem ist, dass es auf mobilen Geräten mit geringer Auflösung nicht funktioniert, da die Karte dann verkleinert wird, ich aber nicht weiß wie ich meine Standortpunkte proportional dazu auch verkleinern und die Position anpassen kann. siehe: Screenfly / Test Your Website at Different Screen Resolutions Einfach mal die verschiedenen Geräte oben durchprobieren. Jemand eine Idee? + Multi-Zitat Zitieren
#2 6. April 2014 AW: CSS Positionierungsproblem Benutze einfach prozentuale Angaben statt Pixel Angaben. LG, Chris + Multi-Zitat Zitieren
#3 6. April 2014 AW: CSS Positionierungsproblem Das habe ich schon versucht, klappt aber nicht. Positionen passen dann trotzdem nicht. + Multi-Zitat Zitieren
#4 6. April 2014 AW: CSS Positionierungsproblem die seite statisch in px angeben damit der mobile-browser diese nicht verkleinert. + Multi-Zitat Zitieren
#5 6. April 2014 AW: CSS Positionierungsproblem ja gut das ist aber so nicht gewünscht ... soll schon kleiner werden und sich dem mobile-bildschirm anpassen. + Multi-Zitat Zitieren
#6 6. April 2014 AW: CSS Positionierungsproblem Das musst du mit javascript ausrechnen und entsprechend positionieren. + Multi-Zitat Zitieren
#7 6. April 2014 AW: CSS Positionierungsproblem wie genau? ich habe es schon versucht mit $('.de-karte').width(). Es mir aber dann immer die orginalgröße des bildes wiedergegeben und nicht die tatsächliche Größe. + Multi-Zitat Zitieren
#8 7. April 2014 AW: CSS Positionierungsproblem Also bei mir funktioniert es: Edit fiddle - JSFiddle Zugegeben da ist ein Trick dabei + Multi-Zitat Zitieren
#9 7. April 2014 AW: CSS Positionierungsproblem wow super funktioniert. kannst du mir auch erklären wo genau der trick jetzt lag und warum das so ist? padding-bottom?! + Multi-Zitat Zitieren
#10 7. April 2014 AW: CSS Positionierungsproblem background-size: 100% setz die Breite des Hintergrundbildes auf die Breite des Elements dazu wird die Höhe proportional angepasst. Wenn du Prozentwerte für left und top benutzt dann beziehen diese beiden werte auf die Breite und Höhe des Eltern-Elements. In deinem Code wird zwar die Breite .karte 100% automatisch angepasst, aber die höhe wurde dazu nicht proportional verändern. Mit dem padding-bottom wird die höhe proportional erzwungen was anders leider nicht in css möglich ist. Dazu habe ich mit margin-top und margin-left den ausgangspunkt deiner Marker auf Unten-Mitte gesetzt damit die Spitze des Markers auf die richtige Position zeigt. + Multi-Zitat Zitieren
#11 7. April 2014 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: CSS Positionierungsproblem @Nanobyte: + Multi-Zitat Zitieren
#12 7. April 2014 AW: CSS Positionierungsproblem Sind wir hier im Screenshot Thread? @Murdoc ... etwas mehr Kontext bitte! Ja in dem Emulator/Simulator/Faker kann man nicht scrollen, funktioniert auf dem Smartphone aber bestens. + Multi-Zitat Zitieren
#13 7. April 2014 AW: CSS Positionierungsproblem Das ist die Landscapeansicht deines Codes (via Firefox Devtools, dachte das wäre ersichtlich). 360x640 Das Bild passt sich generell in der Höhe nicht an. Scrollen geht. Wenn eine Anpassung der Höhe nicht gewünscht ist, dann vergiss es einfach. + Multi-Zitat Zitieren
#14 7. April 2014 AW: CSS Positionierungsproblem Ich bin von dem vorhandenen Code ausgegangen der background-size: 100% auto also breite 100% und Höhe Automatisch vorgibt. Wenn eine Anpassung von Breite und Höhe gefordert ist, dann geht das nur mit JS. Aus dem Code müsste nur padding-bottom entfernt und die Breite und Höhen berechnung per JS passieren. @Murdoc: Das dass ein Screenshot der Firefox Devtools war habe ich nicht gesehen, ich dachte das wäre eine weitere Website mit der man die Auflösungen testen kann. Ich benutze nur die Chrome Devtools + Multi-Zitat Zitieren
#15 8. April 2014 AW: CSS Positionierungsproblem Wie genau liese sich denn die breite und höhe mit JS berechnen, denn als ich es mit $('.de-karte').width() versucht habe, hat er mir immer die orginalmaße des Backgroundimages angegegen und nicht die eigentliche. + Multi-Zitat Zitieren