Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt.

Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt. · MichaL (Gast) · 17.06.2011 19:33 · [flux]

Hallo,

ich habe ein Problem beim Einbinden der Karte in eine Homepage. Die Karte selbst, als auch die darauf enthaltenen Elemente sind z.T. um ca. 10px verschoben. Es sieht so aus, als ob eine meiner CSS-Eigenschaften nicht durch die beim Einbinden der Karte geladenen Eigenschaften überschrieben wird. Leider habe ich bisher nicht herausfinden können, wo das Problem liegt.

Neben der Verschiebung, die auch auf allen "linken" Marker-Sprechblasen und dem Layermenü zu sehen ist, wird die ZoomBar auch falsch dargestellt. ZoomBar und Layermenü könne ich zur Not abstellen. Die Verschiebung der Karte selbst könnte ich mit -10px auch korrigieren aber die Sprechblasen bleiben an der falschen Stelle (oder die Marker selbst sind falsch).

Ich habe mal eine Beispielseite hochgeladen.

Ich hoffe, Ihr könnte das Problem nachvollziehen und mit Tipps geben, was ich noch probieren könnte, um die Verschiebung weg zu bekommen.

Besten Dank
Micha

(URL entfernt, da nicht mehr benötigt)
- Re: Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt. · maxbe (Gast) · 17.06.2011 19:50 · [flux]
  Hi MichaL
  
  MichaL wrote:
  
  Es sieht so aus, als ob eine meiner CSS-Eigenschaften nicht durch die beim Einbinden der Karte geladenen Eigenschaften überschrieben wird. Leider habe ich bisher nicht herausfinden können, wo das Problem liegt.
  
  Mein Firebug sagt mir, dass Du
```
#content␣.article␣div␣{padding-left:␣10px;padding-right:␣10px;}
```
  aus der style.css Zeile 179 weitervererbst bis zur Karte. Wenn ich das ausschalte, wirken Zoombar und Menü recht hübsch. Ich würde es für #usermap einfach nochmal auf 0 setzen.
  
  Grüße, Max
- Re: Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt. · MichaL (Gast) · 17.06.2011 19:56 · [flux]
  Hallo Max,
  
  vielen Dank für Deine schnelle Hilfe.
  
  Ich würde es für #usermap einfach nochmal auf 0 setzen.
  
  Ich habe padding (und margin) auf Null für diese ID
```
#usermap␣{
width:100%;
height:100%;
margin:0;
padding:0;
/*
position:␣relative;
left:␣-10px;␣*/
}
```
  Laut Dragonfly wird eine weitere CSS-Klasse hinzugefügt (olMap), wo diese Eigenschaften auch explizit gesetzt werden:
```
div.olMap␣{
cursor:␣default;
margin-bottom:␣0px␣!important;
margin-left:␣0px␣!important;
margin-right:␣0px␣!important;
margin-top:␣0px␣!important;
padding-bottom:␣0px␣!important;
padding-left:␣0px␣!important;
padding-right:␣0px␣!important;
padding-top:␣0px␣!important;
z-index:␣0;
}
```
  Ich könnte, ohne das ich die Tragweite abschätzen kann im Moment, direkt das folgende DIV ansprechen via
```
#content␣.article␣>␣div
```
  Das würde aber nur die Symptome bekämpfen und nicht die wirkliche Ursache.
  
  Warum wird sie nicht berücksichtigt?
  
  Gruß Micha
- Re: Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt. · maxbe (Gast) · 17.06.2011 21:22 · [flux]
  
  So richtig schlau werd ich auch nicht draus, aber es scheint, dass "#content .article div" bei der Beurteilung der Spezifität deiner divs einfach höher eingestuft wird als ein schlichtes "#usermap".
  
  Vergiss mal die Karte, gib eine Textfarbe für "#content .article div", "#usermap" und "##mapwrapper div" vor und schreib ein paar Zeilen in die divs. Bei mir gewinnt da immer die Farbe für "#content .article div".
  
  Edit:
  
  Nach dieser Tabelle komm ich für Dein CSS auf diese Wertigkeiten:
  
  "#content .article div" = 1 Id, 1 Klasse, 1 Element = 0111
  "#usermap" = 1 Id = 0100
  "#mapwrapper div" = 1 Id, 1 Element = 0101
  
  Die CSS-Eigenschaften werden also in der Reihenfolge "#usermap" -> "#mapwrapper div" -> "#content .article div" verwendet und der letzte gewinnt.
- Re: Kartenelemente sind auf Homepage verschoben bzw. falsch dargestellt. · MichaL (Gast) · 18.06.2011 00:24 · [flux]
  Hallo Max,
  
  wow, darauf wäre ich nicht gekommen. Ich war bisher immer der Meinung, dass eine ID eine Klasse schlägt, da sie ja eindeutig ist. Das dem hier nicht so ist, habe ich so noch nicht bewusst bemerkt. Deine Aufschlüsslung bringt mich aber zu folgender trivialen Lösung:
```
#content␣.article␣div#mapwrapper␣{}
#content␣.article␣div#mapwrapper␣div{}
#content␣.article␣div#mapwrapper␣div#usermap␣{␣}
```
  (Natürlich mit Inhalt)
  
  Ich verfeinere einfach die Beschreibung, sodass sie in der Wertigkeit steigen und schon ist die Karte zentriert. ;-)
  
  Vielen Dank für Deine schnelle Hilfestellung!
  
  beste Grüße
  Micha