How to keep my div's from moving off the image when page is resized

offroadfreak23 · September 2, 2017, 10:59pm

HTML

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<link href='https://fonts.googleapis.com/css?family=Sedgwick Ave Display' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="ui-bootstrap-tpls-2.5.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="myApp.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</head>

<body class="color" ng-app="PopupBones">
<div class="word" ng-controller="PopupBonesCont">
  <h1 >Human Body</h1>
<div class="Parent">

  <img src="human.png" alt="Human Body" />

  <div id="Tarsals" ng-click="open('tarsals')">Tarsals</div>
  <div id="Tibia" ng-click="open('tibia')">Tibia</div>
  <div id="Femur"ng-click="open('femur')">Femur</div>
  <div id="Metacarpals" class="rot" ng-click="open('metacarpals')">Metacarpals</div>
  <div id="Radius"ng-click="open('radius')">Radius</div>
  <div id="Ulna"ng-click="open('ulna')">Ulna</div>
  <div id="Ribs"ng-click="open('ribs')">Ribs</div>
  <div id="Clavicle"ng-click="open('clavicle')">Clavicle</div>
  <div id="Cranium"ng-click="open('cranium')">Cranium</div>
  <div id="Scapula"ng-click="open('scapula')">Scapula</div>
  <div id="Humerus"ng-click="open('humerus')">Humerus</div>
  <div id="Vertebrae"ng-click="open('vertebrae')">Vertebrae</div>
  <div id="Pelvis"ng-click="open('pelvis')">Pelvis</div>
  <div id="Carpals"ng-click="open('carpals')">Carpals</div>
  <div id="Phalanges"ng-click="open('phalanges')">Phalanges</div>
  <div id="Patella"ng-click="open('patella')">Patella</div>
  <div id="Fibula"ng-click="open('fibula')">Fibula</div>
  <div id="Metatarsals"ng-click="open('metatarsals')">Metatarsals</div>
</div>

</body>
</html>
<div class="modal-header">
  <div ng-if="'' == bodyPart">Body Part Information</div>
  <div ng-if="'tarsals' == bodyPart">Tarsals</div>
<span id="myModal1">
  <div ng-if="'tibia' == bodyPart">Tibia</div>
</span>
<span id="myModal2">
  <div ng-if="'femur' == bodyPart">Femur</div>
</span>
<span id="myModal3">
  <div ng-if="'metacarpals' == bodyPart">Metacarpals</div>
</span>
<span id="myModal4">
  <div ng-if="'radius' == bodyPart">Radius</div>
</span>
<span id="myModal5">
  <div ng-if="'ulna' == bodyPart">Ulna</div>
</span>
<span id="myModal6">
  <div ng-if="'ribs' == bodyPart">Ribs</div>
</span>
<span id="myModal7">
  <div ng-if="'clavicle' == bodyPart">Clavicle</div>
</span>
<span id="myModal8">
  <div ng-if="'cranium' == bodyPart">Cranium</div>
</span>
<span id="myModal9">
  <div ng-if="'scapula' == bodyPart">Scapula</div>
</span>
<span id="myModal10">
  <div ng-if="'humerus' == bodyPart">Humerus</div>
</span>
<span id="myModal11">
  <div ng-if="'vertebrae' == bodyPart">Vertebrae</div>
</span>
<span id="myModal12">
  <div ng-if="'pelvis' == bodyPart">Pelvis</div>
</span>
<span id="myModal13">
  <div ng-if="'carpals' == bodyPart">Carpals</div>
</span>
<span id="myModal14">
  <div ng-if="'phalanges' == bodyPart">Phalanges</div>
</span>
<span id="myModal15">
  <div ng-if="'patella' == bodyPart">Patella</div>
</span>
<span id="myModal16">
  <div ng-if="'fibula' == bodyPart">Fibula</div>
</span>
<span id="myModal17">
  <div ng-if="'metatarsals' == bodyPart">Metatarsals</div>
</span>
</div>
<div class="modal-body">
    <!--You clicked on {{bodyPart}}.-->

  <div ng-if="'' == bodyPart">You didnt specify a body part.</div>
  <div ng-if="'tarsals' == bodyPart">Tarsals – A set of seven irregularly shaped bones. They are situated proximally in the foot, in the ankle area.</div>
<span id="myModal18">
  <div ng-if="'tibia' == bodyPart">The tibia is the main bone of the leg, forming what is more commonly known as the shin. It expands at the proximal and distal ends, articulating at the knee and ankle joints respectively.
      It is the second largest bone in the body, this is due to its function as a weight bearing structure.</div>
</span>
<span id="myModal19">
  <div ng-if="'femur' == bodyPart">The femur is the only bone in the thigh. It is classed as a long bone, and is the longest bone in the body. The main function of the femur is to transmit forces from the tibia to the hip joint.
      It acts as the site of origin and attachment of many muscles and ligaments, and can be divided into three areas; proximal, shaft and distal.</div>
</span>
<span id="myModal20">
  <div ng-if="'metacarpals' == bodyPart">Metacarpals – There are five metacarpals, each one related to a digitMetacarpal 1–Thumb.  Metacarpal 2–Index finger.  Metacarpal 3–Middle finger.  Metacarpal 4–Ring finger. Metacarpal 5–Little finger.  Each metacarpal consists of a base, shaft and a head.
      The medial and lateral surfaces of the metacarpals are concave, allowing attachment of the interoessei muscles.</div>
</span>
<span id="myModal21">
  <div ng-if="'radius' == bodyPart">The radius is a long bone in the forearm. It lies laterally and parallel to ulna, the second of the forearm bones. The radius pivots around the ulna to produce movement at the proximal and distal radio-ulnar joints</div>
</span>
<span id="myModal22">
  <div ng-if="'ulna' == bodyPart">The ulna is a long bone in the forearm. It lies medially and parallel to the radius, the second of the forearm bones. The ulna acts as the stabilising bone, with the radius pivoting to produce movement. Proximally, the ulna articulates with the humerus at the elbow joint.
      Distally, the ulna articulates with the radius, forming the distal radio-ulnar joint.</div>
</span>
<span id="myModal23">
  <div ng-if="'ribs' == bodyPart">The ribs are a set of twelve bones which form the protective ‘cage’ of the thorax. They articulate with the vertebral column posteriorly, and terminate anteriorly as cartilage (known as costal cartilage). As part of the bony thorax, the ribs protect the internal thoracic organs.
      They also have a role in breathing – during chest expansion the ribcage moves to permit lung inflation.</div>
</span>
<span id="myModal24">
  <div ng-if="'clavicle' == bodyPart">The clavicle (collarbone) extends between the sternum and the acromion of the scapula. It is classed as a long bone, and can be palpated along its length. In thin individuals, it is visible under the skin. <br>The clavicle has three main functions:
    <br>Attaches the upper limb to the trunk.
    <br>Protects the underlying neurovascular structures supplying the upper limb.
    <br>Transmits force from the upper limb to the axial skeleton.</div>
</span>
<span id="myModal25">
  <div ng-if="'cranium' == bodyPart">Cranium: The top portion of the skull, which protects the brain. The cranium includes the frontal, parietal, occipital, temporal, sphenoid, and ethmoid bones.</div>
</span>
<span id="myModal26">
  <div ng-if="'scapula' == bodyPart">The scapula is also known as the shoulder blade. It articulates with the humerus at the glenohumeral joint, and with the clavicle at the acromioclavicular joint.
      In doing so, the scapula connects the upper limb to the trunk.  It is a triangular, flat bone, which serves as a site for attachment for many (17!) muscles.</div>
</span>
<span id="myModal27">
  <div ng-if="'humerus' == bodyPart">The humerus is the bone that forms the upper arm, and joins it to the shoulder and forearm.
    <br>The proximal region articulates with the scapula and clavicle, forming part of the shoulder joint. Distally, the humerus articulates with the forearm bones (radius and ulna), to form the elbow joint.
    <br>The humerus acts as an attachment site for many muscles and ligaments, resulting in various raised roughening on the bony surface.</div>
</span>
<span id="myModal28">
  <div ng-if="'vertebrae' == bodyPart">Each of the series of small bones forming the backbone, having several projections for articulation and muscle attachment, and a hole through which the spinal cord passes.</div>
</span>
<span id="myModal29">
  <div ng-if="'pelvis' == bodyPart">The large bony structure near the base of the spine to which the hind limbs or legs are attached in humans and many other vertebrates. The part of the abdomen including or enclosed by the pelvis. The broadened top part of the ureter into which the kidney tubules drain.</div>
</span>
<span id="myModal30">
  <div ng-if="'carpals' == bodyPart">The carpal bones are a group of eight, irregularly shaped bones. They are organised into two rows – proximal and distal.
    <br>In the proximal row, the bones are (lateral to medial):
    <br>Scaphoid
    <br>Lunate
    <br>Triquetrum
    <br>
    Pisiform – A sesamoid bone, formed within the tendon of the flexor carpi ulnaris.<br> In the distal row, the bones are (lateral to medial):
    <br>Trapezium
    <br>Trapezoid
    <br>Capitate
    <br>Hamate – has a projection on its palmar surface called the hook of hamate
    <br>Proximally, the scaphoid and lunate articulate with the radius to form the wrist joint. In the distal row, all of the carpal bones articulate with the metacarpals.</div>
</span>
<span id="myModal31">
  <div ng-if="'phalanges' == bodyPart">The phalanges are the bones of the toes. Most toes have three phalanges – proximal, intermediate and distal. The great toe only has proximal and distal phalanges.</div>
</span>
<span id="myModal32">
  <div ng-if="'patella' == bodyPart">The patella (knee-cap) is located at the front of the knee joint, within the patellofemoral groove of the femur. It attaches superiorly to the quadriceps tendon and inferiorly to the patellar ligament.
    It is classified as a sesamoid type bone due to its position within the quadriceps tendon, and is the largest sesamoid bone in the body. In this article we will look at the anatomy of the patella – its surface features, functions and clinical relevance.</div>
</span>
<span id="myModal33">
  <div ng-if="'fibula' == bodyPart">The fibula, along with the tibia, makes up the bones of the leg. The fibula is found laterally to the tibia, and is much thinner. As it does not articulate with the femur at the knee joint, its main function is to act as an attachment for muscles, and not as a weight bearer.
    <br>At the proximal end, the fibula has an enlarged head, which contains a facet for articulation with the lateral condyle of the tibia. On the posterior and lateral surface of the fibular neck, the common fibular nerve can be found.
    <br>The fibular shaft has three surfaces – anterior, lateral and posterior. The leg is split into three compartments, and each surface faces its respective compartment e.g anterior surface faces the anterior compartment of the leg.
    <br>Distally, the lateral surface continues inferiorly, and is called the lateral malleolus. The lateral malleolus is more prominent than the medial malleolus, and can be palpated at the ankle on the lateral side of the leg</div>
</span>
<span id="myModal34">
  <div ng-if="'metatarsals' == bodyPart">The metatarsals are located in the midfoot, between the tarsals and phalanges. They are numbered I-V (medial to lateral).
    <br>Each metatarsal has a similar structure. They consist of a distal head and proximal base, which are joined by a shaft of bone. They have three or four articulations:
    <br>Proximally:  Tarsometatarsal joint – between the metatarsal bases and the cuneiforms or cuboid bones.
    <br>Laterally: Intermetatarsal joint(s) – between the metatarsal and the adjacent metatarsals.
    <br>Distally: Metatarsophalangeal joint – between the metatarsal head and the proximal phalanx.
</span>
</div>
</div>
<div class="modal-footer">
  <button class="btn btn-info" type="button"
  ng-click="close()">CLose</button>
</div>

CSS

.color {
  background-color: black;
}
.word {
  color:white;
}
.Parent {
  position: relative;
}

img {
  position:relative;
  width: 100%;
}

.modal-header {
  font-size: 40px;
  font-style: italic;
  font-family:monospace;
  background-color:black;
  color:#4274f4;
}

.modal-body {
  background-color:black;
  color:#4274f4;
  font-size: 20px;
  font-family: 'Sedgwick Ave Display';
}

.modal-footer {
  background-color:black;
}

#myModal1 {
  color:#41f4ca;
}

#myModal18 {
  color:#41f4ca;
}

#myModal2 {
  color:#f45241;
}

#myModal19 {
  color:#f45241;
}

#myModal3 {
  color:#503B7F;
}

#myModal20 {
  color:#503B7F;
}

#myModal4{
  color:#716F72;
}

#myModal21 {
  color:#716F72;
}

#myModal5 {
  color:darkgreen;
}

#myModal22 {
  color:darkgreen;
}

#myModal6 {
  color:darkblue;
}

#myModal23 {
  color:darkblue;
}

#myModal7 {
  color:#503B7F;
}

#myModal24{
  color:#503B7F;
}

#myModal8 {
  color:#4274f4;
}

#myModal25 {
  color:#4274f4;
}

#myModal9 {
  color:brown;
}

#myModal26 {
  color:brown;
}

#myModal10 {
  color:#41f4ca;
}

#myModal27 {
  color:#41f4ca;
}

#myModal11 {
  color:#114162;
}

#myModal28 {
  color:#114162;
}

#myModal12 {
  color:crimson;
}

#myModal29 {
  color:crimson;
}

#myModal13 {
  color:#f44197;
}

#myModal30 {
  color:#f44197;
}

#myModal14 {
  color:#829AAA;
}

#myModal31 {
  color:#829AAA;
}

#myModal15 {
  color: blueviolet;
}

#myModal32 {
  color: blueviolet;
}

#myModal16 {
  color:#CC0EF1;
}

#myModal33 {
  color:#CC0EF1;
}

#myModal17 {
  color:#114162;
}

#myModal34 {
  color:#114162;
}

#Tarsals {
  position: absolute;
  font-family: 'Sedgwick Ave Display';
  color: #4274f4;
  font-size: 31px;
  left: 20%;
  bottom: 1%;
  border: solid 1px;
}

#Tibia {
  position: absolute;
  left:30%;
  bottom: 17%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #41f4ca;
  font-size: 31px;
}

#Femur {
  position: absolute;
  left: 30%;
  bottom: 41%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #f45241;
  font-size: 31px;
}

#Metacarpals {
  position: absolute;
  left: -3%;
  bottom: 68%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #503B7F;
  font-size: 31px;
}

.rot
{
   -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

    width:100px;
}

#Ulna{
  position: absolute;
  left: 16%;
  bottom: 67%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: darkgreen;
  font-size: 31px;
}

#Radius {
  position: absolute;
  left: 28%;
  bottom: 73%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: brown;
  font-size: 31px;
}

#Ribs {
  position: absolute;
  left: 48%;
  bottom: 75%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: darkblue;
  font-size: 31px;
}

#Clavicle {
  position: absolute;
  left: 35%;
  top: 13%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #503B7F;
  font-size: 31px;
}

#Cranium {
  position: absolute;
  left:42%;
  top: 0%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #4274f4;
  font-size: 31px;
}

#Scapula {
  position: absolute;
  left: 60%;
  top: 18%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color:brown;
  font-size: 31px;
}

#Humerus {
  position: absolute;
  left:65%;
  top:13%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #41f4ca;
  font-size: 31px;
}

#Vertebrae {
  position: absolute;
  left: 41%;
  bottom:63%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #114162;
  font-size: 31px;
}

#Pelvis {
  position: absolute;
  left:45%;
  bottom: 55%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: crimson;
  font-size: 31px;
}

#Carpals {
  position: absolute;
  left: 80%;
  top:20%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #f44197;
  font-size: 31px;
}

#Phalanges {
  position: absolute;
  left:74%;
  top: 26%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #829AAA;
  font-size: 31px;
}

#Patella {
  position: absolute;
  left: 64%;
  bottom: 37%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: blueviolet;
  font-size: 31px;
}

#Fibula {
  position: absolute;
  left: 78%;
  bottom: 17%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #CC0EF1;
  font-size: 31px;
}

#Metatarsals {
  position: absolute;
  left: 70%;
  bottom: 0%;
  border: 1px solid;
  font-family: 'Sedgwick Ave Display';
  color: #114162;
  font-size: 31px;
}

chrisofarabia · September 2, 2017, 11:06pm

Do you have any HTML to go with this?

WebMachine · September 2, 2017, 11:06pm

Welcome to the forums, @offroadfreak23. We can’t really do much to help you with your CSS without the full HTML that goes with it. Could you please post that code also?

offroadfreak23 · September 2, 2017, 11:07pm

How do I add my HTML to this page?

chrisofarabia · September 2, 2017, 11:08pm

Paste it in as you did with the CSS, but put 3 backticks ( ``` ) on the line before, and 3 more on the line after.

offroadfreak23 · September 2, 2017, 11:27pm

I’m very new to all this so any tips would be greatly appreciated.

coothead · September 2, 2017, 11:33pm

Tips will follow fast and furious once you have
supplied salivating members with the HTML
that they have requested.

coothead

offroadfreak23 · September 2, 2017, 11:35pm

I did add the HTML

chrisofarabia · September 2, 2017, 11:39pm

See the original post. The HTML has been added there.

coothead · September 2, 2017, 11:41pm

Can we now have your human.png ?

coothead

offroadfreak23 · September 3, 2017, 12:02am

human.png

offroadfreak23 · September 3, 2017, 1:28am

Not sure if I adding everything correctly. All I am trying to figure out right now is how to keep my text on the image in the same spot when the page is resized. The image resizes perfectly its just the text that keeps moving. I know it probably is an easy fix but I’m stuck.

coothead · September 3, 2017, 2:03am

Hi there offroadfreak23,

I would suggest that youi get rid of the “arty-farty-fonts”,
“Bootcrap”, “jquery” and “w3schools” and then just
concentrate on keeping it clean and simple,

Like this perhaps…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    margin: 0;
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
h1 {
    color: #666;
    text-align: center;
 }
#container {
    position: relative;
    max-width: 19.5em;
    margin: auto;
 }
#container img {
    width: 100%;
    height: auto;
}
#container ul {
    padding: 0;
    margin: 0;
    list-style: none;
 }
#container ul a {
    position: absolute;
    padding:  0 0.25em;
    border: 1px solid  #999;
    border-radius: 0.4em;
    background-color: rgba( 255, 255, 255, 0.75 );
    font-size: 0.75em;
    color: #000;
    text-decoration: none;
 }
#Cranium {
    left: 42%;
    top: 0;
 }
#Clavicle {
    left: 35%;
    top: 11%;
 }
#Humerus {
    left: 65%;
    top: 11%;
 }
#Radius {
    left: 28%;
    bottom: 73%;
 }
#Ribs {
    left: 48%;
    bottom: 75%;
 }
#Scapula {
    left: 60.5%;
    top: 18%;
 }
#Carpals {
    left: 80%;
    top: 20%;
 }
#Metacarpals {
    left: -3%;
    bottom: 72%;
 }
#Ulna{
    left: 16%;
    bottom: 66%;
 }
#Phalanges {
    left: 74%;
    top: 27%;
 }
#Vertebrae {
    left: 41%;
    bottom: 63%;
 }
#Pelvis {
    left: 45%;
    bottom: 55%;
 }
#Femur {
    left: 30%;
    bottom: 41%;
 }
#Patella {
    left: 64%;
    bottom: 37%;
 }
#Tibia {
    left: 30%;
    bottom: 17%;
 }
#Fibula {
    left: 78%;
    bottom: 17%;
 }
#Tarsals {
    left: 20%;
    bottom: 1%;
 }
#Metatarsals {
    left: 70%;
    bottom: 0;
 }
</style>
</head>
<body> 
  <h1>Human Body</h1>
<div id="container">
  <img src="https://sea2.discourse-cdn.com/sitepoint/community/uploads/default/optimized/3X/1/7/17265c780b42aa5dffcdd47c21c9e5e53b8df56e_1_312x500.png" alt="Human Body" >
 <ul>
  <li><a href="cranium.html" id="Cranium">Cranium</a></li>
  <li><a href="clavicle.html" id="Clavicle">Clavicle</a></li>
  <li><a href="humerus.html" id="Humerus">Humerus</a></li>
  <li><a href="radius.html" id="Radius">Radius</a></li>
  <li><a href="ribs.html" id="Ribs">Ribs</a></li>
  <li><a href="scapula.html" id="Scapula">Scapula</a></li>
  <li><a href="carpals.html" id="Carpals">Carpals</a></li>
  <li><a href="metacarpals.html" id="Metacarpals">Metacarpals</a></li>
  <li><a href="ulna.html" id="Ulna">Ulna</a></li>
  <li><a href="phalanges.html" id="Phalanges">Phalanges</a></li>
  <li><a href="vertebrae.html" id="Vertebrae">Vertebrae</a></li>
  <li><a href="pelvis.html" id="Pelvis">Pelvis</a></li>
  <li><a href="femur.html" id="Femur">Femur</a></li>
  <li><a href="patella.html" id="Patella">Patella</a></li>
  <li><a href="tibia.html" id="Tibia">Tibia</a></li>
  <li><a href="fibula.html" id="Fibula">Fibula</a></li>
  <li><a href="tarsals.html" id="Tarsals">Tarsals</a></li>
  <li><a href="metatarsals.html" id="Metatarsals">Metatarsals</a></li>
 </ul>
</div>

</body>
</html>

coothead

coothead · September 4, 2017, 12:21am

Hi there offroadfreak23,

check out the attachment, which contains a
rather more precise indication of the bones.

offroadfreak23.zip (103.6 KB)

coothead

offroadfreak23 · September 4, 2017, 12:24am

That’s awesome. Thanks!

coothead · September 4, 2017, 12:30am

No problem, you’re very welcome.

coothead

system · December 4, 2017, 7:30am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.