CODEWITHSUNDEEP
htmlcss
user3813511
user3813511

Reputation: 39

CSS HTML img position absolute

Ok, So I have made an interactive map, when users go with their mouse over one or red dots they get a little information screen.

But it slides a little when people with smaller screens view the web page: example:

This is a screenshot of how it should look

This screenshot shows how it should look:

Screen minimized

enter image description here
As you can see, the green and red dots get out of place, and I want to prevent this from happening.

Code:

<div style="position: relative; left: 0; top: 0;">
    <img src="images/overhead.png" width="1000" height="1000" style="position: relative; top: 0; left: 0;"/>
    <img src="images/taken.png" class="masterTooltip" height="18" width="18" title="This house is owned by:&nbsp;<?php echo $owner ?>" style="position: absolute; top: 400px; left: 960px;"/>
</div>

Remeber, this:

<img src="images/taken.png" class="masterTooltip" height="18" width="18" title="This house is owned by:&nbsp;<?php echo $owner ?>" style="position: absolute; top: 400px; left: 960px;"/>

Does one dot in the map. Thanks for the help.

Upvotes: 1

Views: 158

Answers (2)

Hector
Hector

Reputation: 216

you can add the size of image in css with percent.
for example if you add 

height:100%;
width:100%;

when the screen get smaller or bigger, your images has 100% width and height in screen.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

Two solutions here, either assign a static width to the container element or you need to use %.

Demo (Fixed width wrapper element)

Also, you might want to take a look at <map> tag as well.

Upvotes: 3

Related Questions