HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div id="votingwindow">
<div class="votequestion">Lorem ipsum dox archeriores. Laboriosamque dolorum!</div>
<button id="voteanswer1" onclick="button1()"><p id="answerOne">Ans1</p></button>
<button id="voteanswer2" onclick="button2()"><p id="answerTwo">Ans2</p></button>
<button id="voteanswer3" onclick="button3()"><p id="answerThree">Ans2</p></button>
<button id="voteanswer4" onclick="button4()"><p id="answerFour">Ans2</p></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS :
.main {
width: 100vw;
height: 100vh;
background-color: #1f5673;
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}
#votingwindow {
width: 500px;
height: 400px;
background-color: #d4cdf4;
}
.votequestion {
background-color: #6290c3;
width: 99%;
height: 20%;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
display: flex;
justify-content: center;
align-items: center;
}
/* VOTE ANSWERS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
#voteanswer1 {
background-color: #b5e2fa;
width: 88%;
height: 15%;
margin-left: auto;
margin-right: auto;
margin-top:2%;
margin-bottom: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
#voteanswer2 {
background-color: #b5e2fa;
width: 88%;
height: 15%;
margin-left: auto;
margin-right: auto;
margin-top:2%;
margin-bottom: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
#voteanswer3 {
background-color: #b5e2fa;
width: 88%;
height: 15%;
margin-left: auto;
margin-right: auto;
margin-top:2%;
margin-bottom: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
#voteanswer4 {
background-color: #b5e2fa;
width: 88%;
height: 15%;
margin-left: auto;
margin-right: auto;
margin-top:2%;
margin-bottom: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
/* VOTE ANSWERS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
JAVASCRIPT :
var clicks1 = 0;
var clicks2 = 0;
var clicks3 = 0;
var clicks4 = 0;
var rel1;
var rel2;
var rel3;
var rel4;
var sumOfVotes;
var onePercent;
// FUNCTION 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button1() {
clicks1 += 1;
sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
onePercent = sumOfVotes / 100;
rel1 = Math.round((clicks1 / onePercent)*100)/100;
rel2 = Math.round((clicks2 / onePercent)*100)/100;
rel3 = Math.round((clicks3 / onePercent)*100)/100;
rel4 = Math.round((clicks4 / onePercent)*100)/100;
document.getElementById("voteanswer1").innerHTML = clicks1 + " votes " + rel1 + "%";
document.getElementById("voteanswer2").innerHTML = clicks2 + " votes " + rel2 + "%";
document.getElementById("voteanswer3").innerHTML = clicks3 + " votes " + rel3 + "%";
document.getElementById("voteanswer4").innerHTML = clicks4 + " votes " + rel4 + "%";
// document.getElementById("voteanswer1").style.position = "absolute";
// document.getElementById("voteanswer2").style.position = "absolute";
// document.getElementById("voteanswer3").style.position = "absolute";
// document.getElementById("voteanswer4").style.position = "absolute";
document.getElementById("voteanswer1").style.zIndex = "1";
document.getElementById("voteanswer2").style.zIndex = "1";
document.getElementById("voteanswer3").style.zIndex = "1";
document.getElementById("voteanswer4").style.zIndex = "1";
var div = document.createElement("div");
document.getElementById("answerOne").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel1 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
div.style.zIndex = "0";
var div = document.createElement("div");
document.getElementById("answerTwo").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel2 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
div.style.zIndex = "0";
var div = document.createElement("div");
document.getElementById("answerThree").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel3 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
div.style.zIndex = "0";
var div = document.createElement("div");
document.getElementById("answerFour").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel4 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
div.style.zIndex = "0";
}
// FUNCTION 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// FUNCTION 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button2() {
clicks2 += 1;
sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
onePercent = sumOfVotes / 100;
rel1 = Math.round((clicks1 / onePercent)*100)/100;
rel2 = Math.round((clicks2 / onePercent)*100)/100;
rel3 = Math.round((clicks3 / onePercent)*100)/100;
rel4 = Math.round((clicks4 / onePercent)*100)/100;
document.getElementById("voteanswer1").innerHTML = clicks1 + " votes " + rel1 + "%";
document.getElementById("voteanswer2").innerHTML = clicks2 + " votes " + rel2 + "%";
document.getElementById("voteanswer3").innerHTML = clicks3 + " votes " + rel3 + "%";
document.getElementById("voteanswer4").innerHTML = clicks4 + " votes " + rel4 + "%";
var div = document.createElement("div");
document.getElementById("voteanswer1").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel1 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer2").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel2 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer3").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel3 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer4").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel4 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
}
// FUNCTION 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// FUNCTION 3 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button3() {
clicks3 += 1;
sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
onePercent = sumOfVotes / 100;
rel1 = Math.round((clicks1 / onePercent)*100)/100;
rel2 = Math.round((clicks2 / onePercent)*100)/100;
rel3 = Math.round((clicks3 / onePercent)*100)/100;
rel4 = Math.round((clicks4 / onePercent)*100)/100;
document.getElementById("voteanswer1").innerHTML = clicks1 + " votes " + rel1 + "%";
document.getElementById("voteanswer2").innerHTML = clicks2 + " votes " + rel2 + "%";
document.getElementById("voteanswer3").innerHTML = clicks3 + " votes " + rel3 + "%";
document.getElementById("voteanswer4").innerHTML = clicks4 + " votes " + rel4 + "%";
var div = document.createElement("div");
document.getElementById("voteanswer1").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel1 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer2").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel2 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer3").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel3 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer4").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel4 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
}
// FUNCTION 3 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// FUNCTION 4 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function button4() {
clicks4 += 1;
sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
onePercent = sumOfVotes / 100;
rel1 = Math.round((clicks1 / onePercent)*100)/100;
rel2 = Math.round((clicks2 / onePercent)*100)/100;
rel3 = Math.round((clicks3 / onePercent)*100)/100;
rel4 = Math.round((clicks4 / onePercent)*100)/100;
document.getElementById("voteanswer1").innerHTML = clicks1 + " votes " + rel1 + "%";
document.getElementById("voteanswer2").innerHTML = clicks2 + " votes " + rel2 + "%";
document.getElementById("voteanswer3").innerHTML = clicks3 + " votes " + rel3 + "%";
document.getElementById("voteanswer4").innerHTML = clicks4 + " votes " + rel4 + "%";
var div = document.createElement("div");
document.getElementById("voteanswer1").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel1 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer2").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel2 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer3").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel3 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
var div = document.createElement("div");
document.getElementById("voteanswer4").appendChild(div);
div.style.position = "absolute";
div.style.left = 0;
div.style.width = rel4 + "%";
div.style.height = "120px";
div.style.backgroundColor = "#9fd6f5";
}
// FUNCTION 4 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Hi everyone.
Here the full code.
I want the color box div to go beneath the text that is shown inside the button box, but the color div box just jumps over it.
I tried z-index, maybe the wrong way.
Tried positioning relative/absolute, maybe the wrong way.
Anyone any suggestions ? I’m starting getting nuts with this.
In an exercise before, i gave a positioning absolute value to two equal children, and a relative to their parent: so the div color box went under the text.
But here, I don’t know why it just wont work.
You people have a nice day, I m going to the nut house…