1
I am developing an interactive map and need to position some images inside it, I am using the top and left properties to position the element, the problem is that the position changes in different resolutions. The map is as body background and cover size.
3
Your problem is because the background image will be adaptable to each resolution, which would be impossible to make the markings with an Absolute position.
See this example that recreates your situation: jsfiddle
The solution would be to leave the image inside a fixed size div, so your markings will work and remain.
See this example working: jsfiddle
The marking in the state of São Paulo is fixed, no matter the resolution.
The procedure to make this responsive, would be to create some pre-set sizes according to your @media.
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
How do you need to position? What is the expected result? What code have you used? Can you share? We need to know what you’ve tried, what you have at the moment and what you intend to do to help.
– celsomtrindade
@Celsomtrindade imagine any place in the body for positioning, I need to put the element in this place using any unit of measurement, I’m using pixels by top and left properties in CSS, this has already been done, the problem is that in different computer screens the elements positioned on top of the map are in different locations than the ones I put, I do not think it necessary to post excerpts of the code.
– Junior CT
Yes, I get that. But I can’t guess how you’re working to try a solution. But I believe that you should use the image with a fixed size so that the positioning is always the same, changing only when you exceed a certain
@media. But share your code to analyze better– celsomtrindade
@Celsomtrindade I don’t have the original code here, but I did an example with the same structure: http://pastebin.com/4mFQpbPc
– Junior CT