Positionierung mit CSS

Z

Zwirni

0
Hi

ich möchte auf einer Landkarte einige Punkte per CSS positionieren. Mit "position: absolute;" klappt das auch so wie es sein soll, jedoch funzt das nur bei einer Auflösung. Ändert man sie verschieben sich die Punkte nach außerhalb der Karte (logischerweise).

Meine Lösung mit "position: relative;" würde zwar das Problem mit den Auflösungen beseitigen - allerdings verschieben sich die Punkte so, dass sie übehraupt nicht mehr stimmen:

Code: 
<html><head>
<title>Titel</title>
<style>
#1
{
	position: relative; top: 128px; left: 130px; width: 10px; height: 10px;
}
#2
{
	position: relative; top: 98px; left: 130px; width: 10px; height: 10px;
}
#3
{
	position: relative; top: 120px; left: 105px; width: 10px; height: 10px;
}
#4
{
	position: relative; top: 120px; left: 155px; width: 10px; height: 10px;
}
</style></head>
<body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div id="1"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="2"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="3"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="4"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<img src="karte.gif" width="250" height="219" border="0" alt="Karte"></td>
</body></html>

Ihr könnts ja selber mal probieren. Einfach "relative" durch "absolute" ersetzen.
Und nein ich kann das nicht per Hand machen - das Ganze ist teil einer dynamischen Website, selbst die Punkte werden dynamisch eingebunden, was abder definitiv nicht das Problem ist. Das Problem ist eher das Elternelement der <div>'s ... nur wie bekomm ich es hin, dass die Punkte mit "relative" ebenso positioniert sind wie bei "absolute"?

Any solutions?

Zwirni
 
Jap, habs hinbekommen. Ausgehend von dem Code oben kam dies heraus:

Code: 
<html><head>
<title>Titel</title>
<style>
#1
{
	position: absolute; top: 128px; left: 130px; width: 10px; height: 10px;
}
#2
{
	position: absolute; top: 98px; left: 130px; width: 10px; height: 10px;
}
#3
{
	position: absolute; top: 120px; left: 105px; width: 10px; height: 10px;
}
#4
{
	position: absolute; top: 120px; left: 155px; width: 10px; height: 10px;
}
</style></head>
<body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div style="position:relative;top:0px;left:0px;width:250px;height:219px;">
<img src="karte.gif" width="250" height="219" border="0" alt="Karte">
<div id="1"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="2"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="3"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="4"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
</div>
</td>
</body></html>

Hab also die Karte lediglich relativ positioniert und innerhalb dieser positionierung (welches das elternelement ist) dann die einzelnen punkte absolut positioniert. :) (war aber ehrlich gesagt nicht meine lösung, aber funzt selbst im opera)
 
Seltsam, genau das sollte eigentlich nicht gehen, weil sich absolute immer auf das gesamte Dokumentfenster bezieht ... äh ... beziehen sollte. Na gut ich sehe gerade du hast die Karte auch so in die linke obere Ecke gesetzt, dann ist es natürlich egal. In sich logischer wäre aber, auch die Karte absolut zu positionieren, hätte dann allerdings zur Folge, dass man für darauffolgende Elemente auch Positionierungen einführen müsste :)

Greets, Ziri
 
@Zirias
ne das funzt auch wenn man die karte nicht in die linkere obere ecke setzt
habs extra ausprobiert weil ich der meinung bin dass ich es ähnlich versucht hatte und es da nicht funktioniert hatte
da war nämlich genau das passiert was du erwartest (karte irgendwo und #1-4 oben links)
weiß aber nicht mehr was ich falsch gemacht habe

hab grad nochmal nach geschaut
absolute soll sich immer aufs elternelement beziehen und nicht aufs dokumentfenster (ausser natürlich es ist das elternelement selbst)
also sollte alles "normal richtig" an Zwirnis lösung sein

@Zwirni
mal n verbesserungsvorschlag
wenn du schon schon css benutzt dann machs am besten gleich richtig
also ungefähr so (kein anspruch auf vollständigkeit):

Code: 
<html><head>
<title>Titel</title>
<style>
body
{
background:#ffffff;
margin:0;
}
#container
{
position:relative;
top:0px;
left:0px;
width:250px;
height:219px;
}
img.karte
{
width:250px;
height:219px;
border:none;
}
#1
{
position: absolute; top: 128px; left: 130px; width: 10px; height: 10px;
}
#2
{
position: absolute; top: 98px; left: 130px; width: 10px; height: 10px;
}
#3
{
position: absolute; top: 120px; left: 105px; width: 10px; height: 10px;
}
#4
{
position: absolute; top: 120px; left: 155px; width: 10px; height: 10px;
}
</style></head>
<body>
<div id="container">
<img class="karte" src="karte.gif" alt="Karte">
<div id="1"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="2"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="3"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
<div id="4"><a href="#"><img src="landkarte_punkt.gif" border="0"></a></div>
</div>
</td>
</body></html>
 
Original von Zirias
Seltsam, genau das sollte eigentlich nicht gehen, weil sich absolute immer auf das gesamte Dokumentfenster bezieht ... äh ... beziehen sollte.
Zum Vergrößern anklicken....

Falsch. Ich zitiere mal selfhtml:

Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed = absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
Zum Vergrößern anklicken....

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position

"absolute" bezieht sich auf das "Elternelement" welches in dem hier von mir wiedergegebenen Beispiel das <div> welches sich auf die relative Positionierung des Bildes bezieht wäre. Hät ich auch früher drauf kommen können (arbeitsblindheit *g*) . Im richtigen Web ist die Karte übrigens nicht einfach links oben positioniert sondern befindet sich innerhalb einer Tabellenzelle innerhalb einer zentrierten Tabelle die das gesamte Layout enthält und für eine Auflösung von 800x600 optimiert sein soll. Diese Optimierung kam in Bezug auf die Karte mit ihren Punkten erst durch die hier wiedergebenen Positionierungen zustande.

@ivegotmail
Viele Wege führen nach Rom ;) Und jeder hat seinen eigenen Stil :)
 
Hm, in der Tat, da hab ich was genau umgedreht. Jedenfalls hat speziell der IE immer mal wieder Probleme mit der Positionierungs-Art "absolute", dann eben wahrscheinlich genau andersrum ;)

Greets, Ziri
 
Ich hab das jetzt mit IE5, IE5.5, Mozilla 1.6, Opera 7 und Netscape 4 (jeweils verschiedene Systeme) getestet - und es geht einwandfrei :)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben