CODEWITHSUNDEEP
htmlcss
Don 'Solo' Franklin
Don 'Solo' Franklin

Reputation: 3

Keeping css points in place

Good afternoon guys,

I'm working on a small project for my job and they have asked me to make a map and pinpoint specific cities. I have finished it on my pc and I'm trying to make sure that when I load it up onto another pc (such as their laptops) that the points stay in place. I hope this is enough information for what I am trying to do as this is my first post. Any and all help would be greatly appreciated.

The basics of the code is:

<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>

Upvotes: 0

Views: 103

Answers (1)

Tyler Fowle
Tyler Fowle

Reputation: 569

There are a couple of things going on here.

First, position: absolute; is relative to its parent container. so if you wrap your image and dots in a wrapper div, you can position your dots relative to this .wrapper. This .wrapper needs position: relative; in order to function as the relative parent to position: absolute; children

Second, you will need to position your dots with percentages so that they scale with the image

Third, we apply a transform: translate(-50%,-50%) which is relative to the height and width of itself. This will make it so that the center of the dot is what we are positioning, so that when the image scales the center of the dot stays the same

Also, we can DRY up your css by moving the common rules into a .dot class

example: https://codepen.io/tylerfowle/pen/MrwreX

HTML:

<div class="wrapper">
  <img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map"
       class="statesMap" usemap="#States">
  <span class="Vegasdot dot"></span>
  <span class="SaltLakedot dot"></span>
  <span class="Phoenixdot dot"></span>
</div>

CSS:

html,body{
  background-color: #AADAFE;
}

.wrapper {
  position: relative;
}

.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: black;
  z-index: 2;
  position: absolute;
  transform: translate(-50%,-50%);
}
.Vegasdot{
  top: 48%;
  left: 17%;
}

.SaltLakedot{
  top: 37%;
  left: 24.5%;
}

.Phoenixdot{
  top: 60%;
  left: 22%;
}

.statesMap{
  width: 100%;
  z-index: 1;
}

Upvotes: 1

Related Questions