Hi,

I have a div called target which is centred and displayed over a google map when you pan to a map marker, i have since added a menu to the left of the map which means that when the google map pans to a marker it is no longer the centre of the screen.

i need to move the div to the right but i cant seem to move it.

#target {position: fixed; display: none; width: 51px; height: 51px; top: 50%; left: 50%; margin: -40px 0 0 -26px; background: url(../img/target.png) no-repeat center bottom; z-index: 2;}

See screenshot - http://i.imgur.com/gtz6v.png

Recommended Answers

All 4 Replies

left: 50%;

needs to be changed to accomodate the width of the menu

eg menu = 10% of width, left becomes 55%

hmm no doesnt work when window is resized.
i need to put the map and targer div in a wrapper div but when i do that the map doesnt load.. any ideas?

The div needs to be relative to the map, to get this to match i would put the map and the target div inside the same div - leaving the menu outside.

Then make the target div position itself relative to the resizing div.
eg <div id='mapbox' style='position:relative;'>
<mapobjectthing></mapobjectthing>
<div id='targetdiv' style='position:absolute;left:40%;'></div>
</div>

all i can think of on it not loading properly is the structure of divs or id's have changed.

ie
<div id='map'>
<div>
<div></div>
</div>
</div>

check to make sure that an extra div hasn't change the structure breaking the map code.

also the reason left:55%; wont work on resize is probably cause there is something on the page forcing the page width to say 800px so when the window goes any smaller left:55% wont get any smaller than 440px changing that so the page will collapse smaller could be another idea to fix it

sorted it thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.