CSS Positionierungsproblem

Dieses Thema im Forum "Webentwicklung" wurde erstellt von leex, 6. April 2014 .

Schlagworte:
  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?
     
  2. 6. April 2014
    AW: CSS Positionierungsproblem

    Benutze einfach prozentuale Angaben statt Pixel Angaben.

    LG, Chris
     
  3. 6. April 2014
    AW: CSS Positionierungsproblem

    Das habe ich schon versucht, klappt aber nicht.
    Positionen passen dann trotzdem nicht.
     
  4. 6. April 2014
    AW: CSS Positionierungsproblem

    die seite statisch in px angeben damit der mobile-browser diese nicht verkleinert.
     
  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.
     
  6. 6. April 2014
    AW: CSS Positionierungsproblem

    Das musst du mit javascript ausrechnen und entsprechend positionieren.
     
  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.
     
  8. 7. April 2014
    AW: CSS Positionierungsproblem

    Also bei mir funktioniert es: Edit fiddle - JSFiddle
    Zugegeben da ist ein Trick dabei
     
  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?!
     
  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.
     
  11. 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.
     
  12. 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.
     
  13. 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
     
  14. 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.
     
  15. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.