[HTML+CSS] Punten plaatsen op een landkaart

[Verwijderd]

Hoi,

ik lees vanuit een databank bepaalde coordinaten in van plaatsen. Aan de hand van deze coordinaten moet ik bolletjes plaatsen op een landkaart (een jpg). Nu, dit lukt me wel als ik alles een absolute positie meegeef. Ik wil echter de landkaart willekeurig ergens op een pagina kunnen plaatsen en dan zouden de bolletjes er ook op geplaatst moeten kunnen worden. Ik heb dit geprobeerd maar dan komen de bolletjes nooit juist uit, ze verspringen. Dit is de HTML/CSS die ik gebruik.

<div style="margin-left:100px; margin-top:150px;">
<div style="position:relative; left:80px; top:100px; float:left;">[img]"dot.gif"[/img]</div>
<div style="position:relative; left:250px; top:250px; float:left;">[img]"dot.gif"[/img]</div>
<div style="position:relative; left:100px; top:300px; float:left;">[img]"dot.gif"[/img]</div>
[img]"nederland.gif"[/img]
</div>

De bolletjes komen dus niet op de juiste plaats.

[disjfa]

Waarom zet je de images in een div Kan je niet gewoon de images een margin-left en een margin-top geven. Dat scheelt al 4 div`s in de pagina

[Zoefff]

Inderdaad. Maak desnoods 1 div waar je de grote plaat in zet, en positioneer alle 'dots' vervolgens absoluut ten opzichte van die div. Dus:

Cascading Stylesheet:

#kaart {
    position:relative;
}

HTML:

<div id="kaart">
    <img src="kaart.jpg">
    <img src="dot.gif" style="left:10px; top:30px; position:absolute;">
    <img src="dot.gif" style="left:30px; top:20px; position:absolute;">
    <img src="dot.gif" style="left:50px; top:60px; position:absolute;">
</div>