Php echo changes position when I maximize window-CodePudding

So i'm try to make a globe that is clickable. After i click on it i want it to redirect me to a respective file from my localhost. This is the PHP part that i'm using to echo the globe.

<?php
    echo '<a href="13.3.html"><div > <div ><font size="5" color="#f70505"><b> 13.3</b></font></div></div></a><br/>';
    echo '<a href="13.4.html"><div ><div ><font size="5" color="#dbb700"><b> 13.4</b></font></div></div></a><br/>';
    echo '<a href="13.5.html"><div ><div ><font size="5" color="#6d36c5"><b> 13.5</b></font></div></div></a><br/>';
    echo '<a href="13.6.html"><div ><div ><font size="5" color="#f70505"><b> 13.6</b></font></div></div></a><br/>';
  ?>

And the css file is this.

.container {
    position: relative;
    width: 800px;
    height: 800px;
    margin: auto;
    margin-top: 3vh;
    background: #0b1a5e;
    border-radius: 120px;
    z-index: -2;
    margin: 0 auto;
}


.tree {
  position: relative;
  width: 100%;
  height: 100%;
  left: 13%;
  top: 5%;
  margin: 0 auto;
}

.tree-triangle3 {
  position: absolute;
  width: 66%;
  height: 36%;
  bottom: 20%;
  left: 3.5%;
  background: #034f33;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree-triangle2 {
  position: absolute;
  width: 53%;   
  height: 33%;
  bottom: 35%;
  left: 10%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #046944;
  z-index: 2;
}

.tree-triangle1 {
  position: absolute;
  width: 42%;
  height: 25%;
  bottom: 50%;
  left: 15.5%;
  background: #038052;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 3;
}

.trunk {
  position: absolute;
  width: 10%;
  height: 16%;
  background: #66503e;
  z-index: -1;
  bottom: 5%;
  left: 32%;
}


.ornament {
    position: absolute;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    box-shadow: 0 0 3px #033b26;
    /*   background: #eb5252; */
    z-index: 2;
    text-align: center;
}


.shine {
  position: absolute;
  width: 55%;
  height: 55%;
  top: 10%;
  right: 11%;
  border-radius: 50%;
  background: white;
  filter: opacity(60%);
}

.or1 {
  left: 50%;
  top: 34%;
  background: #0742d9;
}

.or2 {
  left: 45%;
  top: 45%;
  background: #c91212;
}

.or3 {
  left: 28%;
  top: 60%;
  background: #dbb700;
}

.or4 {
  left: 60%;
  top: 68%;
  background: #6d36c5;
}

.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffe380;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #5df505;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    50% 70%,
    50% 60%,
    50% 46%,
    50% 36%
  );
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

My problem is that when T maximize the chrome window the ornaments change their width and position. Anyone has an idea on how to fix it?

CodePudding user response：

This is not a problem with PHP echo. In fact, as your viewport is resized the HTML (and CSS) remain the same - the PHP is not invoked again.

I am assuming that everything is contained within the container which is set to be square. You don't need to use media queries to reset its dimensions, but you probably do need to make sure that it never gets too wide or high for the viewport (this is a decision you need to make though, is it OK for the user to have to scroll). This snippet simply limits the max width to the width of the viewport. It also sets the height by using the CSS aspect-ratio property to ensure it's always square.

.container {
  position: relative;
  width: 800px;
  max-width: 100vmin;
  aspect-ratio: 1;
  margin: auto;
  margin-top: 3vh;
  background: #0b1a5e;
  border-radius: 120px;
  z-index: -2;
  margin: 0 auto;
}

.tree {
  position: relative;
  width: 100%;
  height: 100%;
  left: 13%;
  top: 5%;
  margin: 0 auto;
}

.tree-triangle3 {
  position: absolute;
  width: 66%;
  height: 36%;
  bottom: 20%;
  left: 3.5%;
  background: #034f33;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree-triangle2 {
  position: absolute;
  width: 53%;
  height: 33%;
  bottom: 35%;
  left: 10%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #046944;
  z-index: 2;
}

.tree-triangle1 {
  position: absolute;
  width: 42%;
  height: 25%;
  bottom: 50%;
  left: 15.5%;
  background: #038052;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 3;
}

.trunk {
  position: absolute;
  width: 10%;
  height: 16%;
  background: #66503e;
  z-index: -1;
  bottom: 5%;
  left: 32%;
}

.ornament {
  position: absolute;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  box-shadow: 0 0 3px #033b26;
  /*   background: #eb5252; */
  z-index: 2;
  text-align: center;
}

.shine {
  position: absolute;
  width: 55%;
  height: 55%;
  top: 10%;
  right: 11%;
  border-radius: 50%;
  background: white;
  filter: opacity(60%);
}

.or1 {
  left: 50%;
  top: 34%;
  background: #0742d9;
}

.or2 {
  left: 45%;
  top: 45%;
  background: #c91212;
}

.or3 {
  left: 28%;
  top: 60%;
  background: #dbb700;
}

.or4 {
  left: 60%;
  top: 68%;
  background: #6d36c5;
}

.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffe380;
  clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #5df505;
  clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
  left: 26.5%;
  top: 11%;
  z-index: 4;
}

<div >
  <a href="13.3.html">
    <div >
      <div >
        <font size="5" color="#f70505"><b> 13.3</b></font>
      </div>
    </div>
  </a><br/>;
  <a href="13.4.html">
    <div >
      <div >
        <font size="5" color="#dbb700"><b> 13.4</b></font>
      </div>
    </div>
  </a><br/>;
  <a href="13.5.html">
    <div >
      <div >
        <font size="5" color="#6d36c5"><b> 13.5</b></font>
      </div>
    </div>
  </a><br/>;
  <a href="13.6.html">
    <div >
      <div >
        <font size="5" color="#f70505"><b> 13.6</b></font>
      </div>
    </div>
  </a><br/>;
</div>