CODEWITHSUNDEEP
csshtmlresizeposition
jQuerybeast
jQuerybeast

Reputation: 14490

Placing Div anywhere in the document and have the same position after window resize

I feel noob asking this question but it seems that I cant find the perfect answer.

I have a map and I'm trying to set few pins on it. The map is a static image and the pins are background images of a div. To set the pins on my desire location, I set its position to absolute and move the pins accordingly (top,left). Now if the window resizes, its obvious that the pins won't stay on the map.

If I use % for top and left, the pins move with the map but the location of the pins are too specific. Something like 56px, 896px etc. so percentage isn't helping.

Is there any other way I can do this? I wouldn't mind using jQuery but if there is a way with CSS im more than happy.

Here is an example: http://jsfiddle.net/RKyGV/2/show/ Try to resize the window.

Thanks alot

Upvotes: 0

Views: 1967

Answers (2)

scumah
scumah

Reputation: 6383

Like Antti Haapala says, pins should be absolute positioned child elements of your relative positioned map. Here is a fiddle showing that.

HTML

<div id="map">
    <div class="pin">
    </div>
</div>

CSS

#map{
    background:url("http://placehold.it/200x200");
    width:200px;
    height:200px;
    position:relative;
}

.pin {
    background:url("http://placehold.it/16x16/915");width:16px;height:16px;position:absolute;top:150px;left:30px;
}

Upvotes: 1

Antti Haapala -- Слава Україні
Antti Haapala -- Слава Україні

Reputation: 133879

Set position: relative on your map; place the pins as child elements of your map with position: absolute. Now their coordinates are relative to the map.

Upvotes: 3

Related Questions