x

OSM und CSS3 Media Queries

  1. OSM und CSS3 Media Queries · Hardyy (Gast) · 22.12.2012 12:00 · [flux]

    Hallo,
    meine Homepage mit OSM funktioniert einwandfrei.
    Damit alles auch unter anderen Auflösungen bis hin zum iPad und iPhone funktioniert, habe ich CSS3 Media Queries eingesetzt
    in der Form:

    @media␣screen␣and␣(orientation:portrait)␣and␣(max-width:730px)␣{
#side,␣#columnleft,␣#columnright,␣#content,␣␣{
width:␣100%;
float:none;
}
}

    img␣{
height:␣auto;
max-width:␣100%;
}

    Die Skalierung klappt sehr gut, mein Logo wird dank dem Zusatz: img{....... mit skaliert.

    Nur gerade dieser Zusatz "zerschießt" mir die Kartendarstellung.

    Lasse ich den img-Zusatz weg, ist alles wieder in Ordnung aber mein Logo wird nicht mit skaliert und verschiebt mir das ganze Layout.

    Weiß jemand eine Lösung?

    d:/dokumente/OSM mit Media Queries.png

    • Re: OSM und CSS3 Media Queries · Hardyy (Gast) · 22.12.2012 12:01 · [flux]

      [img]d:/dokumente/OSM mit Media Queries.png[/img]

    • Re: OSM und CSS3 Media Queries · Hardyy (Gast) · 22.12.2012 12:03 · [flux]

      Wollte eigentlich ein Bild einfügen, aber es klappt nicht.

      Die Darstellung der Karte erscheint in dicken senkrechten Streifen mit etwa gleich breiten Streifen dazwischen,
      je nach Auflösung 3-4x im Fenster.

    • Re: OSM und CSS3 Media Queries · Augustus Kling (Gast) · 22.12.2012 12:08 · [flux]

      Um das Bild hier einfügen zu können, muss es auf einem Webserver liegen. Von deiner lokalen Festplatte kann es nicht gelesen werden.

      Vergebe eine Klasse für dein Bild und skaliere mit Hilfe der Klasse. Wenn der Selektor nur „img“ lautet beeinflusst die Regel auch die Kartendarstellung.
      Beispiel:

      Im␣HTML:␣<img␣class="scale"␣src="logo.png">
Im␣CSS:␣img.scale␣{height:␣auto;␣max-width:␣100%;}
    • Re: OSM und CSS3 Media Queries · Hardyy (Gast) · 22.12.2012 12:21 · [flux]

      Vielen Dank für den Tip.
      Das war´s.