✔ Image Map: Positionierung der Informationsfenster

J

julieann

Erfahrenes Mitglied
Hallo!

Habe bei folgender Karte ein Problem:

http://www.oecocolor.de/TEST/karte.php

Das CSS-File:
http://www.oecocolor.de/TEST/css/popupkarte.css


Beim Mouseover soll ein Informationsfeld erscheinen mit Adresse etc. Funktioniert grundsätzlich auch (sieht noch nicht gut aus und ist auch noch nicht an der richtigen Stelle, also beim unteren roten Punkt muss man etwas weiter oben/rechts hinfahren), aber derzeit erscheinen die Fenster immer in einem bestimmten Abstand vom vordefinierten Punkt aus gesehen.
Sie sollen jedoch rechts unter dem Logo in einem extra div (#aussen, eingebettet in #rechts) angezeigt werden.
Kann mir da jemand weiterhelfen?

Folgendes soll nämlich gleichzeitig erfüllt werden:
Unter der Karte gibt es Eingabefeld, wo man bei Eingabe der entsprechenden Postleitzahl (und "suchen") ebenfalls rechts die passende Adresse sieht, also das div angezeigt wird. Das wird über PHP geschehen (müssen)?
Für Tipps, Hilfe bin ich echt dankbar!
 
Hi,

da deine übergeordneten DIV-Blöcke im Viewport absolut positioniert sind, beziehen sich die Positionsangaben des Popup-Blocks auf sein Elternelement, aus dem du so nicht herauskommst, außer in dem DIV lediglich einen Scrollbalken zu erzeugen, sobald darin das Popup angezeigt wird.

Anders sieht die Welt jedoch aus, wenn du stattdessen das Popup im rechten DIV-Block unterbringst, wo es erscheinen soll, und es dann via JS aufrufst. Der derzeit genutzte CSS-Selektor "li:hover div" würde mit diesem Markup nämlich nicht mehr greifen.

mfg Maik
 
Echt blöd, an allen anderen Stellen ist js nun vermieden :(

OK, wenn ich das also so mache, kann ich dann mit js auch die PLZ-Suche über js realisieren? Ich müsste also den "suchen" button per js auswerten und daraufhin das DIV sichtbar machen, oder? ebenso wie beim enstprechenden mouseover?
 
Dann verzichte auf die derzeitige Positionierungstechnik der Spaltenblöcke (#mitte, #oben, #links, #rechts, #unten), und nutze stattdessen ein fliessendes Spaltenlayout (float-Eigenschaft).

Grundsätzliche Beispiele hierfür stecken in den letzten beiden Links meiner Signatur :)

mfg Maik
 
Hey, ich bin´s mal wieder...
Da ich bei der Karte nu dabei bleibe, die kleinen Infofelder per CSS einfach anzeigen zu lassen, folgende Frage:
Warum lässt sich die <h1> Überschrift dieser Fenster nicht verändern?
Ich habe im CSS File:

http://www.oecocolor.de/TEST/css/popupkarte.css

ganz unten definiert:
Code: 
.popup h1 {font-size:0.9em; color:#000; font-family: "Arial", sans-serif; text-align:left;}

Allerdings habe ich an der font-size Größe schon rumgespielt und es passiert nichts, die Schrift bleibt so groß :(
Was habe ich übersehen?
 
Moin,

du hast da ein Problem mit der Relevanz der Selektoren.

Code: 
.popup h1
hat eine geringere Priorität als
Code: 
#mitte h1

...weil ID-Selektoren wichtiger eingestuft werden als Klassen-Selektoren.

Lösung:
verwende !important, um die Gewichtung zu Ändern.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück