Grafikposition bei Änderung der Größe des Browserfensters

[Ecki]

Hallo,
ich erstelle gerade eine Seite und nun habe ich folgendes Problem:
Wenn ich folgenden Tag einsetze wird die Grafik angezeigt.
<div id="dot1" style="position:absolute; left:445px; top:468px; width:14px; height:24px; z-index:1;">

Allerdings nicht an korrekter Position im Browser und ausserdem bleibt die Grafik (kleiner Punkt) bei der Grössenänderung des Browserfensters stehen.

Kann man das irgendwie lösen, dass die Grafik an der entsprechenden Position stehenbleibt?

Ich möchte diesen kleinen Punkt über eine andere Grafik als Hotspot einsetzen.
Bin für jeden Vorschlag dankbar...

[michi911]

position:relative

damit wird der punkt relativ am eltern element gemessen.

[Ecki]

position:relative

damit wird der punkt relativ am eltern element gemessen.

Danke, hab ich ausprobiert, klappt aber nicht.
Der Punkt bleibt immer noch stur an seinem Platz :-(

[Detlef G.]

Hallo Ecki

Der Punkt bleibt immer noch stur an seinem Platz :-(

Wo in deinem Quelltext steht das Div mit dem Punkt?
Wo würde es ohne Positionsangabe angezeigt?

Schreibe deinen Quelltext mit dem Div (ersteinmal ohne Positionsangabe) so, dass dein Punkt-Div direkt bei der Grafik immer die selbe Position zur dieser hat. (z.B. direkt drüber oder drunter)
Dann verschiebe sie mittels "position:relative" so weit, bis sie an genau der richtigen Position auf deinem Bild liegt.

MFG
Detlef

[michi911]

... ich glaub ich weiss was du meinst!
ich glaube!!! du musst erst ein div objekt um den gesamten bereich ziehen.
und den punkt dann absolute an diesen div bereich ausrichten.
denn position absolute verhält sich auch relativ.
is ein wenig arg kompliziert... habs selbst probiert und der aufwand, ein element so zu positionieren, das es am vorgesehenden punkt bleibt is mir echt zu gross. da nehme ich doch lieber wieder die gute alte tabelle und setz die entsprechende grafik als hintergrund!

[wahsaga]

hi,

is ein wenig arg kompliziert... habs selbst probiert und der aufwand, ein element so zu positionieren, das es am vorgesehenden punkt bleibt is mir echt zu gross.

hm, verstehe ich nicht.

da nehme ich doch lieber wieder die gute alte tabelle und setz die entsprechende grafik als hintergrund!

auch andere elemente als tabellen können hintergrundbilder haben.
jetzt wieder in die steinzeit zurückzumaschieren, dazu besteht also kaum ein anlass.

gruss,
wahsaga

[Ecki]

Also Detlef G.´s Ansatz mit "Ebene auf Ebene" hat zwar funktioniert, der Punkt wird an der richtigen Stelle angezeigt. ;-)

Wie kann ich das Problem lösen, dass bei dieser Methode die Ebenen bei der "Browserfenstergrössenänderung" mitwandern, weil ich auch Tebellen auf der gleichen Seite verwende? Das sieht nämlich gar nicht gut aus, wenn das Bild stehen bleibt :-( Gibt es andere Methoden soetwas zu ändern?

Ich möchte eine Landkarte erstellen, wo die einzelnen Orte auf dieser Karte mit eben diesem Punkt (also viele Punkte)"ausgerüstet" werden soll. Von einer Hauptkarte will ich in einzelne Detailkarten gelangen. Die Hauptkarte ist in 16 Teilen aufgeteilt...

Ich habe auch schon mit dem Gedanken gespielt, auf der eigentlichen Landkarte jedesmal einen neuen Punkt zu malen....

[wahsaga]

hi,

Wie kann ich das Problem lösen, dass bei dieser Methode die Ebenen bei der "Browserfenstergrössenänderung" mitwandern, weil ich auch Tebellen auf der gleichen Seite verwende?

verwende keine tabellen für layout-zwecke.

(oder sorge dafür, dass die grafik selbst ihre position relativ in bezug auf die tabelle/tabellenzelle einnimmt.)

gruss,
wahsaga

[Ecki]

Ich kriegs nicht hin :-(
Wie gesagt, bei zwei Ebenen funktioniert´s, allerdings bleibt die Karte "stehen".
Die Karte soll zentriert im Browserfenster stehen...

Ich werd dann wohl immer den Punkt in die Karte zeichnen...

Habt trotzdem vielen Dank für Eure Unterstützung!

[wahsaga]

hi,

Ich kriegs nicht hin :-(
Wie gesagt, bei zwei Ebenen funktioniert´s, allerdings bleibt die Karte "stehen".
Die Karte soll zentriert im Browserfenster stehen...

was hast du denn bisher versucht, um meinen vorschlag

sorge dafür, dass die grafik selbst ihre position relativ in bezug auf die tabelle/tabellenzelle einnimmt

umzusetzen?

gruss,
wahsaga

[Ecki]

Ich habe die ganze Zeit versucht, das ganze in div Container reinzupacken, das hat funktioniert, allerdings stand dann alles still.

Den einen Link zu dem Beispiel mit dem X ist zu aufwendig, da 100 oder mehr dieser kleinen roten Punkte eingetragen werden.
Oben hab ich ein Beispiel erstellt.

[Detlef G.]

Hallo Ecki

Ich habe die ganze Zeit versucht, das ganze in div Container reinzupacken, das hat funktioniert, allerdings stand dann alles still.

Wegen position:absolute!

...da 100 oder mehr dieser kleinen roten Punkte eingetragen werden.

Das könnte ein Problem werden.

Oben hab ich ein Beispiel erstellt.

Und ich hab es geändert: http://d-graff.de/demos/selfhtml/posenkieker.htm

MFG
Detlef

[Ecki]

Mensch Detlef, Du bist mein Held :-))
Hab vielen Dank!
Nun weiß ich wie ich das machen muß!

So einfach!
Aber manchmal sieht man den Wald vor lauter Bäumen nicht! ;-)

[Ecki]

So, nun muß ich Euch nochmal nerven...

Detlef, soweit ist alles Super.
Nun hab ich noch ein Problem: Kann ich diesem Punkt einen Link verpassen?

<img style="position:relative;left:125px;top:-150px;z-index: 1;" src="../pics/dot1.gif" width="15" height="15">

Etwa so:

<img style="position:relative;left:125px;top:-150px;z-index: 1;" src="../pics/dot1.gif" width="15" height="15" href="../../bericht.html>

Ist soetwas möglich?

[at]

Hallo.

Ist soetwas möglich?

Nein, so natürlich nicht. Aber du weißt doch, dass Bilder in folgender Form als Verweis einsetzt werden können:
<a href="../../bericht.html"><img style="position:relative;left:125px;top:-150px;z-index:1;" src="../pics/dot1.gif" width="15" height="15" alt="Bericht" /></a>
MfG, at

[Detlef G.]

Hallo Ecki

<img style="position:relative;left:125px;top:-150px;z-index: 1;" src="../pics/dot1.gif" width="15" height="15" href="../../bericht.html>

Ist soetwas möglich?

So nicht!

Lies bitte: http://selfhtml.teamone.de/html/grafiken/verweise.htm

Dann überlege, was positioniert werden muss.
Wenn dann alles stimmt, wird noch das Problem auftreten, dass zumindest Opera 6.04 Probleme häufig mit Verweisen hat, die mittels CSS positioniert sind.

Ich kann mir das überhaupt nicht so richtig vorstellen, eine Karte mit etwa 100 Punkten als Verweis, jeder als einzeln positioniere Grafik.

MFG
Detlef

[Ecki]

Hallo Ecki

<img style="position:relative;left:125px;top:-150px;z-index: 1;" src="../pics/dot1.gif" width="15" height="15" href="../../bericht.html>

Ist soetwas möglich?

So nicht!

Lies bitte: http://selfhtml.teamone.de/html/grafiken/verweise.htm

Dann überlege, was positioniert werden muss.
Wenn dann alles stimmt, wird noch das Problem auftreten, dass zumindest Opera 6.04 Probleme häufig mit Verweisen hat, die mittels CSS positioniert sind.

Ich kann mir das überhaupt nicht so richtig vorstellen, eine Karte mit etwa 100 Punkten als Verweis, jeder als einzeln positioniere Grafik.

MFG
Detlef

Moin Detlef, schreib mir bitte eine email, dann kann ich dir zeigen was ich vorhab ;-)

[wahsaga]

hi,

Moin Detlef, schreib mir bitte eine email, dann kann ich dir zeigen was ich vorhab ;-)

für diese kurze aufforderung Detlefs komplettes posting zu zitieren, ist sicher unnötig.

bitte lies dir mal </faq/#Q-09a> und http://learn.to/quote durch.

gruss,
wahsaga

[Ecki]

Sorry wahsaga, kommt nicht wieder vor...

[Detlef G.]

Hallo Ecki,

ein paar Gedanken zur Wahl der Methode:

Wenn du immer das selbe Bild (Karte) auf verschiedenen Seiten, nur mit unterschiedlichen Punkten brauchst, dann wäre ein positionierter Verweis sinnvoll.

Wenn du jedes Bild (Karte) nur einmal verwendest, wären eingezeichnete Punkte und eine Imagemap (einfach rechteckige Areas) einfacher zu handhaben. Dabei sind imho auch weniger Browserprobleme zu befürchten.

MFG
Detlef

[Ecki]

dann wäre ein positionierter Verweis sinnvoll.

Das ist einem Semi-Laien ein wenig zu hoch :-)

Wenn du jedes Bild (Karte) nur einmal verwendest, wären eingezeichnete Punkte und eine Imagemap (einfach rechteckige Areas)

Du meinst also in jeder Karte die Punkte (mit Bildbearbeitungsprogramm) eintragen. Ja, ich glaub so werde ich das machen, alles andere wird zu kompliziert.

Vielen Dank für Deine Bemühung!

[Detlef G.]

Hallo Ecki

Wie kann ich das Problem lösen, dass bei dieser Methode die Ebenen bei der "Browserfenstergrössenänderung" mitwandern,...

Wieso? Tun sie es nicht?
Bei mir tun sie es jedenfalls.

MFG
Detlef

[Detlef G.]

Hallo michi911

... ich glaub ich weiss was du meinst!

Nein, nicht wirklich.
Es ist überhaupt kein Div um das Bild herum nötig, auch keine absolute Positionierung.
Mit "position:relative" kann ein Element verschoben werden, ohne es aus dem Elementenfluss herauszunehmen.

Auch wahsage hat eine mögliche Lösung gepostet [pref:t=74684&m=430359].

Als Beispiel beide Varianten: http://d-graff.de/demos/selfhtml/relative.html

MFG
Detlef

[Ecki]

Hallo michi911

... ich glaub ich weiss was du meinst!

Nein, nicht wirklich.
Es ist überhaupt kein Div um das Bild herum nötig, auch keine absolute Positionierung.
Mit "position:relative" kann ein Element verschoben werden, ohne es aus dem Elementenfluss herauszunehmen.

Auch wahsage hat eine mögliche Lösung gepostet [pref:t=74684&m=430359].

Als Beispiel beide Varianten: http://d-graff.de/demos/selfhtml/relative.html

MFG
Detlef

Hallo,
sorry, dass ich mich jetzt erst melde, hatte wenig Zeit...
Also Detlef, die Beispiele sehen sehr interessant aus, nur wird das schwer umzusetzen sein.Ich möchte eine Landkarte erstellen, wo die einzelnen Orte auf dieser Karte mit eben diesem Punkt (also viele Punkte)"ausgerüstet" werden soll.  Ein weiteres Problem stellt die Karte dar. die ist in 16 Teilen aufgeteilt...

Trotzdem Danke für Deine Hilfe ;-)

[Detlef G.]

Hallo Ecki

sorry, dass ich mich jetzt erst melde, hatte wenig Zeit...

Kein Problem, solange der Thread nicht im Archiv verschwindet.

... (also viele Punkte)

Das hättest du gleich sagen können!
Dazu meine Frage. Wie ist das zu verstehen?

• viele Punkte gleichzeitig oder
• auf verschiedenen Seiten, die gleiche Landkarte mit einem anderen Punkt oder
• werden bzw. soll der jeweilige Punkt dynamisch gesetzt werden

Ein Link auf deine Seite (auch unfertig wäre hilfreich.

... Ein weiteres Problem stellt die Karte dar. die ist in 16 Teilen aufgeteilt...

Warum?

MFG
Detlef

[Ecki]

Hallo Detlef,

• viele Punkte gleichzeitig oder

Es werden viele Punkte gleichzeitig.

• werden bzw. soll der jeweilige Punkt dynamisch gesetzt werden

???

Ein Link auf deine Seite (auch unfertig wäre hilfreich.

Das kann (darf) ich leider nicht, Du könntest mir aber eine email zukommen lassen, damit ich Dir einen Link schicken kann.

... Ein weiteres Problem stellt die Karte dar. die ist in 16 Teilen aufgeteilt...

Warum?

16 Teile, weil die Karte von einer "Hauptkarte", oder besser, "Übersichtskarte" grob in einzelne Kartenausschnitte "zoomt"

MFG
Detlef

Ecki

[Detlef G.]

Hallo Ecki

Um nicht noch weitere Lösungsmöglichkeiten, die für dich nicht richtig passen zu posten, solltest Du dein Problem noch einmal genauer schildern. Ich meine nicht das Problem, dass bei deinem Lösungsansatz besteht, sondern präzisere Angaben zu dem Ziel, welches du erreichen willst.

Zur Anregung ein paar Gedanken und Fragen, bitte verbessere mich, wenn ich etwas falsch verstanden habe.

Du hast 16 Teilkarten (welche Größe in Pixeln?), diese sollen aneinandergelegt verkleinert als Gesamtkarte angezeigt werden. Dabei sollen einige (wie viele?) Punkte auf der Karte angezeigt werden, die jeweils angeklickt werden können (wozu, was soll dann passieren?). Die einzelnen Teilkarten sollen als Zoom angezeigt werden (in der selben oder einer anderen Seite? Werden diese dazu vergrößerte oder in ihrer Originalgröße angezeigt?).
Die Karte soll horizontal zentriert angezeigt werden und sich mit dem Inhalt der Seite mehr oder weniger nach unten verschieben.
Die Punkte (Hotspot) sollen genau einen Kartenpunkt bezeichnen, oder sollen sie lediglich als Link für die Vergrößerung des Kartenausschnitts dienen?

MFG
Detlef

[Ecki]

Hallo Detlef,
kann sein dass die Lösung nicht im CSS Bereich zu finden ist...

Also, ich möchte das so umsetzen:

Die Startseite beinhaltet eine Karte, wo ich Hotspots auf 16 weitere Karten gesetzt habe, die jeweils grob eine Region darstellen.

Auf diese Regionskarten möchte ich mehrere (können je nach Region bis zu 100 werden) kleine rote Punkte setzen.
Hier ein Beispiel:

http://ww.asv-posenkieker.de/start.htm

So ähnlich solls werden.
Deswegen stört michs, dass die kleinen Punkte nicht mit der Karte mitwandern, sondern an der Stelle stehenbleiben.

Gibt es andere Lösungswege als mit Containern zu arbeiten?

Schicke mir doch bitte eine Mail, damit ich Dir das Original zeigen kan :-(

[e-mail]

[wahsaga]

hi,

Wenn ich folgenden Tag einsetze wird die Grafik angezeigt.
<div id="dot1" style="position:absolute; left:445px; top:468px; width:14px; height:24px; z-index:1;">

Allerdings nicht an korrekter Position im Browser

und wo wäre die, deiner meinung nach?

und ausserdem bleibt die Grafik (kleiner Punkt) bei der Grössenänderung des Browserfensters stehen.

mit deiner formatierung platzierst du sie nun mal 445px von links und 468px von oben aus gesehen, bezug auf den body, oder ein anderes elternelement, dessen position vom default static abweicht.
wenn du das nicht willst, warum machst du es dann?

Ich möchte diesen kleinen Punkt über eine andere Grafik als Hotspot einsetzen.

um einen bezug der absoluten position zu dieser grafik hinzubekommen, solltest du sie beide in ein div packen, welches wie oben beschrieben nicht mit static positioniert ist.

gruss,
wahsaga