Fähnchen auf einer Karte ausrichten

[henman]

Hallo! Ich habe ein winziges Problem, aber ich bin wohl noch kleiner ;)

Ich habe ein kleines Script geschrieben (außer das Javascript, das hab ich nur etwas abgewandelt bei Google gefunden), dass Usern ermöglicht, den eigenen Wohnsitz auf einer Karte zu markieren. Sie klicken einfach auf die Karte, die Koordinaten werden per Get weitergegeben und dann in eine Datenbank geschrieben.
Das Problem ist jetzt nur, dass ich nicht weiß, ich die "Fähnchen" auf der Karte positionieren soll.
CSS sollte das doch schaffen können? Bisher wurden die Fähnchen so ausgegeben, als würden sie die CSS-Formatierung ignorieren, also nebeneinander. Dann hab ich es noch mit position:absolute versucht, allerdings hingen sie dann alle übereinander, also auf der gleichen Stelle.
Float hat auch nicht funktioniert.
Ist das jetzt einfach nur ein Tippfehler und ganz leicht oder gibt es einen Trick, die Bilder komplett unabhängig voneinander positionieren zu können?
Google und auch die Forensuche wollten mir nicht helfen oder ich hab die falschen Begriffe benutzt.

<?php  
include ("include/connect.php");  
if (!$_GET["x"] OR !$_GET["y"])  
	{}  
	else  
	{  
        $x = intval($_GET["x"]);  
        $y = intval($_GET["y"]);  
	$eintragen = mysql_query("INSERT INTO arena_map(x,y)  
        VALUES ('$x','$y')");  
	}  
$schon_da = mysql_query('SELECT x,y FROM arena_map');  
echo '<script type=text/javascript>  
<!--  
function setCords(e)  
{  
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;  
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;  
x -= document.getElementById("karte").offsetLeft;  
y -= document.getElementById("karte").offsetTop;  
}  
document.onmousemove = setCords;  
function getCords()  
{  
parent.location.href="usermap.php?x=" + x + "&y=" + y;  
}  
-->  
</script>  
<div style="background-image:url(bilder/usermap/locator.gif);width:900px;height:1074px;" id="karte" onclick="getCords()" />';  
while ($coords = mysql_fetch_object($schon_da))  
	{  
	echo '<div style="position:absolute;margin-left:'.$coords->x.';margin-top:'.$coords->y.';"><img src="bilder/usermap/mark.jpg"></div>';  
	}  
echo "</div>";  
?>  

Wie man sieht, in der letzten Schleife sind die Fähnchen. Die Übergabe, das Speichern und auch das Auslesen funktioniert einwandfrei, nur halt nicht die Ausrichtung.

Bis neulich!

[Felix Riesterer]

Lieber henman,

bitte poste nurden Code, der auch im Browser ankommt - besser noch poste einen Link zu einer Beispielseite. Wenn Du eine CSS-Frage stellst, ist PHP-Code denkbar ungeeignet!

Liebe Grüße,

Felix Riesterer.

[henman]

Hallo Felix!
Mein Fehler, sorry. Beim ordentlichen Abtippen ist mir der Fehler dann auch aufgefallen, ich hab einfach die Einheit px bei den margins vergessen.

Das sollte richtig sein, wobei position:absolute im div mit der Karte als Hintergrund irrelevant sein sollte.

  
<div style="background-image:url(bilder/usermap/locator.gif);position:absolute;width:900px;height:1074px;" id="karte" onclick="getCords()" />  
    <div style="position:absolute;margin-left:127px;margin-top:127px;">  
        <img src="bilder/usermap/mark.jpg">  
    </div>  
    <div style="position:absolute;margin-left:127px;margin-top:127px;">  
        <img src="bilder/usermap/mark.jpg">  
    </div>  
</div>

Asche über mein Haupt.

Danke trotzdem, die Zurechtweisung hat Wunder gewirkt ;)

Bis neulich!

[Felix Riesterer]

Lieber henman,

<div style="background-image:url(bilder/usermap/locator.gif);position:absolute;width:900px;height:1074px;" id="karte" onclick="getCords()" />

<div style="position:absolute;margin-left:127px;margin-top:127px;">
        <img src="bilder/usermap/mark.jpg">
    </div>
    <div style="position:absolute;margin-left:127px;margin-top:127px;">
        <img src="bilder/usermap/mark.jpg">
    </div>
</div>

  
muss ich diese <div>-Suppe mit inline-Styles jetzt gut finden? Meines Erachtens hätte es auch folgender Code getan:  
  
~~~html
<p id="landkarte">  
    <span style="top:20px;left:120px" title="Standort von $userX" />  
    <span style="top:120px;left:60px" title="Standort von $userY" />  
</p>

Mittels CSS kann man dann weitestgehend auf inline-Styles verzichten, bis auf die top- und left-Angaben zur absoluten Positionierung der <span>-Elemente. Der Rest wandert ins Stylesheet, inklusive der Hintergrundbilder!

Liebe Grüße,

Felix Riesterer.

[henman]

Ok, so ausgeklügelt hab ich noch nicht gedacht in dem Bereich. Und ja, das ist Suppe. Zwar Knoblauchsuppe, aber sie macht auch satt ;)

Danke für die Hilfe

lg

[Der Martin]

Hallo,

Und ja, das ist Suppe. Zwar Knoblauchsuppe, aber sie macht auch satt ;)

... und eröffnet gute Chancen auf einen Sitzplatz im Bus, schafft freie Räume und ist gut gegen Vampire!

*scnr*
 Martin