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 class="ornament or1"> <div class="shine"><font size="5" color="#f70505"><b> 13.3</b></font></div></div></a><br/>';
echo '<a href="13.4.html"><div class="ornament or2"><div class="shine"><font size="5" color="#dbb700"><b> 13.4</b></font></div></div></a><br/>';
echo '<a href="13.5.html"><div class="ornament or3"><div class="shine"><font size="5" color="#6d36c5"><b> 13.5</b></font></div></div></a><br/>';
echo '<a href="13.6.html"><div class="ornament or4"><div class="shine"><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?
Advertisement
Answer
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 class="container">
<a href="13.3.html">
<div class="ornament or1">
<div class="shine">
<font size="5" color="#f70505"><b> 13.3</b></font>
</div>
</div>
</a><br/>;
<a href="13.4.html">
<div class="ornament or2">
<div class="shine">
<font size="5" color="#dbb700"><b> 13.4</b></font>
</div>
</div>
</a><br/>;
<a href="13.5.html">
<div class="ornament or3">
<div class="shine">
<font size="5" color="#6d36c5"><b> 13.5</b></font>
</div>
</div>
</a><br/>;
<a href="13.6.html">
<div class="ornament or4">
<div class="shine">
<font size="5" color="#f70505"><b> 13.6</b></font>
</div>
</div>
</a><br/>;
</div>