Please help me solve CSS positioning problem

Eugene666 · January 6, 2021, 3:14pm

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 dolor sit amet consectetur adipisicing elit. Ex architecto iusto totam sed id asperiores. Laboriosam et officiis doloremque dolorum!</div>
            <button id="voteanswer1" onclick="button1()"><div id="moveBoxOne"></div>Answer1</button>
            <button id="voteanswer2" onclick="button2()">Answer2</button>
            <button id="voteanswer3" onclick="button3()">Answer3</button>
            <button id="voteanswer4" onclick="button4()">Answer4</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;
}
#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;
}
#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;
}
#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;
}
#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;
}

#moveBoxOne {
    width: 200px;
    height: 100px;
    background-color: darkgoldenrod;
}
JS =



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 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 + "%";
}
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 + "%";
}
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 + "%";
}
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 + "%";
}

Hi everyone.
I m building a web page voting box, as in news papers web pages where people get asked what they think about a certain thing, with a few answers that they can click.
After one clicks, the inside of the answer box changes: the voting results of the other people are shown.
The voting results are shown proportionally in percentage.
Doing it that way, I not only want a calculus in my JS to show the % results in each box ( which I did fine ), but, to make this look nice, I also want the clicked button bar ( small height, long width ) to get, proportionally to the percentage of the votes, filled with A NEW COLOR Div from left to right.
So, I made a new Div inside the Button Tag, I gave it a new bg-color.
Made the Button Div overflow hidden, which is all nice.
Here comes the problem: the new colored Div is kinda positioning itself to the Text inside the Button Div, and WORSE: it wont move UNDER the text but start pushing it.
You get the picture here ?
Text is in mid of Button Div, new color Div, when reaches about 50%(mid) wont move under the Text, without moving the text whatsover. It sees the text as equal.

Sorry for your peoples time. I m kinda new to web dev. There are a few things I know already but sometimes I get stucked at the very basics because of luck of practice.

Any suggestions would be appreciated.
You people have a good day.

ilenia · January 6, 2021, 3:15pm

thank you for the detailed question, can you also provide the code you are asking about?

Eugene666 · January 6, 2021, 3:18pm

Don’t know if this is what you wanted to see, but here you go…

<button id="voteanswer1" onclick="button1()"><div id="moveBoxOne"></div>Answer1</button>

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

}
#moveBoxOne {

    width: 25px;

    height: 100px;

    background-color: darkgoldenrod;

}

ilenia · January 6, 2021, 3:19pm

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

ilenia · January 6, 2021, 3:23pm

you have not provided enough code to see the issue you are describing. Do you have a codepen or something similar where you can show the issue?

Eugene666 · January 6, 2021, 3:24pm

First come code, surrounded by lines of 3 backticks.
Got it !

Eugene666 · January 6, 2021, 3:31pm

how do I delete this post ?

ilenia · January 6, 2021, 3:34pm

there is a policy of no duplicate posts on this forum, also as I already said

ilenia · January 6, 2021, 3:37pm

only mods can delete posts,to ask for deletion you can flag the first post in the topic

you can also edit the first post here instead of opening a new topic

I’m trying to help you if you please answer my question

Eugene666 · January 6, 2021, 3:39pm

Got it !
Easier to correct this post, which I did.
Thank you for your help.
Are you a real person or bot ?

ilenia · January 6, 2021, 3:40pm

I’m a real person, and as you are not answering my question, good luck with your code, I hope you find someone that can help you

Eugene666 · January 6, 2021, 3:46pm

Only mods can delete posts, got it !
Better to edit previous one than delete and recreate new, got it !
First come code surrounded by lines of 3 backticks, as shown in visual, got it !

“not enough code” ok, got you. Will take a bit to figure out what is “necessary code”.

Thank you for your attention

Eugene666 · January 6, 2021, 3:50pm

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 dolor sit amet consectetur adipisicing elit. Ex architecto iusto totam sed id asperiores. Laboriosam et officiis doloremque dolorum!</div>
            <button id="voteanswer1" onclick="button1()"><div id="moveBoxOne"></div>Answer1</button>
            <button id="voteanswer2" onclick="button2()">Answer2</button>
            <button id="voteanswer3" onclick="button3()">Answer3</button>
            <button id="voteanswer4" onclick="button4()">Answer4</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;
}
#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;
}
#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;
}
#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;
}
#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;
}

#moveBoxOne {
    width: 200px;
    height: 100px;
    background-color: darkgoldenrod;
}
JS =



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 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 + "%";
}
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 + "%";
}
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 + "%";
}
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 + "%";
}

Here is full code,
you get the picture ?
That new div colored bar, which i trough JS will later move within the button box properly, I want it to not influence the text that is inside the button div , but rather move beneath it, coming from left going to the right.

Thx once more

lasjorg · January 6, 2021, 5:20pm

You can move the text before the box and set the flex-direction to column. I doubt just having the content stacked will give you what you want in the end but I guess it’s a start.

Also, a div element is not valid content for a button, you can use a span (or other Phrasing content but no Interactive content)

<button id="voteanswer1" onclick="button1()">
  Answer1
  <span id="moveBoxOne"></span>
</button>

#voteanswer1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

BTW, you have a lot of duplicate code in your JS.

system · July 8, 2021, 5:21am

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