Hello everyone,
I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in their correct positions. This is my first time posting here, so I hope this information gives you an idea of what I am trying to achieve. Any help or advice would be greatly appreciated.
Here is a snippet of the code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>States/Cities</title>
</head>
<style media="screen">
html,body{
background-color: #AADAFE;
}
.Vegasdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 246px;
left: 306px;
position: absolute;
z-index: 2;
}
.SaltLakedot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 88px;
left: 395px;
position: absolute;
z-index: 2;
}
.Phoenixdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 333px;
left: 386px;
position: absolute;
z-index: 2;
}
.statesMap{
padding-top:3%;
padding-left:12%;
position: absolute;
z-index: 1;
}
<img src="StatesGIMP.png" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot"></span>
<span class="SaltLakedot"></span>
<span class="Phoenixdot"></span>