Question 44139 in Html Question posted in
Some basic documentation can be found here.

Why aren't my buttons on the right, but under the headers and on the right? – Html

So, I’m trying to make a clicker game, and the buttons wont align at the top right. I’ve tried everything I know how and I’ve been looking at W3schools. Yet it aligns under the rows with the text. I have all my code in an HTML index file, because I’m new to html javascript and css, but I’ve done everything right from my perspective. Whats wrong here? My CSS is at the top, js is basically everywhere.
I get this!

Screenshot from my website
No one wants to SCROLL to play the game!

<!DOCTYPE HTML>
<html>
<head>
  <link rel="shortcut icon" type="image/x-icon" href="CursorF1.png" />
<title>Clicker Simulator</title>
<body>

<script>
var clickvalue = 0;
var rebirths = 0;
var clickperclick = 1
var presteiges = 0;
var ascensions = 0;
var reborns = 0;
var cps = 0;
</script>
<style>
body {
  background-color: black;
}
p   { 
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align: center;
}
h1   { 
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
top: 150px;
text-align: left;
}

h2   { 
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align: left;
}
h3   {
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align: top, left;
}
h4   {
font-family: "sans-serif", arial, sans-serif;
font-size: 15px;
text-align: top, left;
}
h5   {
font-family: "sans-serif", arial, sans-serif;
font-size: 15px;
text-align top, left; 
}
h6   {
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align top, left; 
}
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.button1:hover {
  background-color: #FFFFFF;
  color: blue;
}
.button {background-color: #33FFF8;}
.rebutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.rebutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.rebutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.rebutton {background-color: #FF0000;}
.prebutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.prebutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.prebutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.prebutton {background-color: #0CFF00;}
.ascbutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.ascbutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.ascbutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.rebbutton {background-color: #FAFF33;}
.rebbutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.rebbutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.rebbutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.ascbutton {background-color: #FAFF33;}
</style>
<p id="clickcounter" style="color:blue;" >Clicks: 0</p>
<h4 id="cpc" style="color:white">Clicks per click: 1</h4>
<h5 id="cps" style="color:white">Clicks per second: 0</h5>
<h1 id="rebirthcounter" style="color:red;text-align:left;" >Rebirths: 0</h1>
<h2 id="presteigecounter" style="color:lime;text-align:left;">Presteiges: 0</h2>
<h3 id="ascs" style="color:yellow">Ascensions: 0</h3>
<h6 id="reborn" style="color:purple">Reborns: 0</h6>
<div style="text-align:center;">
<button class="button button1" id="addclick" onclick="myFunction()">Click</button>
</div>
<script>
function myFunction() {
    clickvalue = clickvalue + clickperclick;
  document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
}
</script>

<div style="text-align:right;">
<button class="rebutton rebutton1" id="rebirth" onclick="rebirth()">Rebirth: -150 clicks</button>
</div>
<script>
function rebirth(){
if(clickvalue >= 150){
clickvalue = clickvalue - 150;
clickperclick = clickperclick + 1;
rebirths = rebirths + 1;
document.getElementById("rebirthcounter").innerHTML = ("Rebirths: " + rebirths);
document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
document.getElementById("cpc").innerHTML = ("Clicks per click: " + clickperclick + " clicks");
}
}
</script>
<div style="text-align:right;">
<button class="prebutton prebutton1" id="presteige" onclick="presteige()">Presteige: -650 clicks, -5 rebirths</button>
</div>
<script>
function presteige(){
if (clickvalue >= 650 && rebirths >= 5){
rebirths = rebirths - 5
clickvalue = clickvalue - 650
clickperclick = clickperclick + 3
presteiges = presteiges + 1
document.getElementById("rebirthcounter").innerHTML = ("Rebirths: " + rebirths);
document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
document.getElementById("cpc").innerHTML = ("Clicks per click: " + clickperclick + " clicks");
document.getElementById("presteigecounter").innerHTML = ("Prestieges: "+presteiges)
}
}
</script>
<div style="text-align:right;">
<button class="ascbutton ascbutton1" id="presteige" onclick="ascend()">Ascend: -3000 clicks, -10 rebs, -5 prstgs</button>
</div>
<script>
function ascend(){
if (clickvalue >= 3000 && rebirths >= 10 && presteiges >= 5){
rebirths = rebirths - 10
clickvalue = clickvalue - 3000
clickperclick = clickperclick + 7
presteiges = presteiges - 5
ascensions = ascensions + 1
document.getElementById("rebirthcounter").innerHTML = ("Rebirths: " + rebirths);
document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
document.getElementById("cpc").innerHTML = ("Clicks per click: " + clickperclick + " clicks");
document.getElementById("presteigecounter").innerHTML = ("Prestieges: "+ presteiges);
document.getElementById("ascs").innerHTML = ("Ascensions: "+ ascensions);
}
}
</script>
</body>
</head>
</html>

I tried text align, display, and I look up so much, but get no results. I was expecting the buttons to start at the top, but they start UNDER the text elements.

Tags:

3

Answers


  1. 0

    You can create a div with a class name like btn-container then put those three button into the div:

    <div class="btn-container">
  <div style="text-align: right">
    <button class="rebutton rebutton1" id="rebirth" onclick="rebirth()">
             Rebirth: -150 clicks
         </button>
  </div>

  <div style="text-align: right">
    <button class="prebutton prebutton1" id="presteige" onclick="presteige()">
            Presteige: -650 clicks, -5 rebirths
         </button>
  </div>
  <div style="text-align: right">
    <button class="ascbutton ascbutton1" id="presteige" onclick="ascend()">
                 Ascend: -3000 clicks, -10 rebs, -5 prstgs
        </button>
  </div>
</div>

    then in the style tag select that div:

    .btn-container {
  position: absolute;
  top: 0;
  right: 0;
}

    just like that you have your buttons on the top-right.

    Login or Signup to reply.
  2. 0

    Is this what you need? Please comment if it’s not. You can see the page better here: https://webtinq.nl/sc/index.html

    <!DOCTYPE HTML>
<html>
<head>
  <link rel="shortcut icon" type="image/x-icon" href="CursorF1.png" />
<title>Clicker Simulator</title>
<body>
<span id="btn-c">
<div style="text-align:right;">
<button class="rebutton rebutton1" id="rebirth" onclick="rebirth()">Rebirth: -150 clicks</button>
</div>
<div style="text-align:right;">
<button class="prebutton prebutton1" id="presteige" onclick="presteige()">Presteige: -650 clicks, -5 rebirths</button>
</div>
<div style="text-align:right;">
<button class="ascbutton ascbutton1" id="presteige" onclick="ascend()">Ascend: -3000 clicks, -10 rebs, -5 prstgs</button>
</div>
</span>
<script>
var clickvalue = 0;
var rebirths = 0;
var clickperclick = 1
var presteiges = 0;
var ascensions = 0;
var reborns = 0;
var cps = 0;
</script>
<style>
body {
  background-color: black;
}

#clickcounter{
position: absolute;
top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

p   { 
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align: center;
}
h1   { 
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
top: 150px;
text-align: left;
}

h2   { 
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align: left;
}
h3   {
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align: top, left;
}
h4   {
font-family: "sans-serif", arial, sans-serif;
font-size: 15px;
text-align: top, left;
}
h5   {
font-family: "sans-serif", arial, sans-serif;
font-size: 15px;
text-align top, left; 
}
h6   {
font-family: "sans-serif", arial, sans-serif;
font-size: 30px;
text-align top, left; 
}
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.button1:hover {
  background-color: #FFFFFF;
  color: blue;
}
.button {background-color: #33FFF8;}
.rebutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.rebutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

#btn-c{
position: absolute;
right: 0;
}

.rebutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.rebutton {background-color: #FF0000;}
.prebutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.prebutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.prebutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.prebutton {background-color: #0CFF00;}
.ascbutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.ascbutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.ascbutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.rebbutton {background-color: #FAFF33;}
.rebbutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.rebbutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.rebbutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}
.ascbutton {background-color: #FAFF33;}
</style>
<p id="clickcounter" style="color:blue;" >Clicks: 0</p>
<h4 id="cpc" style="color:white">Clicks per click: 1</h4>
<h5 id="cps" style="color:white">Clicks per second: 0</h5>
<h1 id="rebirthcounter" style="color:red;text-align:left;" >Rebirths: 0</h1>
<h2 id="presteigecounter" style="color:lime;text-align:left;">Presteiges: 0</h2>
<h3 id="ascs" style="color:yellow">Ascensions: 0</h3>
<h6 id="reborn" style="color:purple">Reborns: 0</h6>
<div style="text-align:center;">
<button class="button button1" id="addclick" onclick="myFunction()">Click</button>
</div>
<script>
function myFunction() {
    clickvalue = clickvalue + clickperclick;
  document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
}
</script>


<script>
function rebirth(){
if(clickvalue >= 150){
clickvalue = clickvalue - 150;
clickperclick = clickperclick + 1;
rebirths = rebirths + 1;
document.getElementById("rebirthcounter").innerHTML = ("Rebirths: " + rebirths);
document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
document.getElementById("cpc").innerHTML = ("Clicks per click: " + clickperclick + " clicks");
}
}
</script>

<script>
function presteige(){
if (clickvalue >= 650 && rebirths >= 5){
rebirths = rebirths - 5
clickvalue = clickvalue - 650
clickperclick = clickperclick + 3
presteiges = presteiges + 1
document.getElementById("rebirthcounter").innerHTML = ("Rebirths: " + rebirths);
document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
document.getElementById("cpc").innerHTML = ("Clicks per click: " + clickperclick + " clicks");
document.getElementById("presteigecounter").innerHTML = ("Prestieges: "+presteiges)
}
}
</script>

<script>
function ascend(){
if (clickvalue >= 3000 && rebirths >= 10 && presteiges >= 5){
rebirths = rebirths - 10
clickvalue = clickvalue - 3000
clickperclick = clickperclick + 7
presteiges = presteiges - 5
ascensions = ascensions + 1
document.getElementById("rebirthcounter").innerHTML = ("Rebirths: " + rebirths);
document.getElementById("clickcounter").innerHTML = ("Clicks: " + clickvalue);
document.getElementById("cpc").innerHTML = ("Clicks per click: " + clickperclick + " clicks");
document.getElementById("presteigecounter").innerHTML = ("Prestieges: "+ presteiges);
document.getElementById("ascs").innerHTML = ("Ascensions: "+ ascensions);
}
}
</script>
</body>
</head>
</html>
    Login or Signup to reply.
  3. 0

    If your buttons are meant to be at the top of the page, put them at the start of your HTML document. That way you are not trying to coerce CSS against the natural document flow.

    I’ve wrapped your buttons in a div setting it to a flexbox. I’ve then justified the contents to the end, which will align the buttons to the right.

    NOTE I’ve removed the JavaScript for clarity, it bears no relation to the styling problem.

    body {
  background-color: black;
}

.actions {
  display: flex;
  justify-content: flex-end;
}

p {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 30px;
  text-align: center;
}

h1 {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 30px;
  top: 150px;
  text-align: left;
}

h2 {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 30px;
  text-align: left;
}

h3 {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 30px;
  text-align: top, left;
}

h4 {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 15px;
  text-align: top, left;
}

h5 {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 15px;
  text-align top,
  left;
}

h6 {
  font-family: "sans-serif", arial, sans-serif;
  font-size: 30px;
  text-align top,
  left;
}

.button {
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.button1:hover {
  background-color: #FFFFFF;
  color: blue;
}

.button {
  background-color: #33FFF8;
}

.rebutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.rebutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.rebutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}

.rebutton {
  background-color: #FF0000;
}

.prebutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.prebutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.prebutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}

.prebutton {
  background-color: #0CFF00;
}

.ascbutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.ascbutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.ascbutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}

.rebbutton {
  background-color: #FAFF33;
}

.rebbutton {
  display: block;
  border: none;
  color: white;
  padding: 16px 32px;
  display: inline;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.rebbutton1 {
  background-color: white;
  color: black;
  border: 2px solid #FFFFFF;
}

.rebbutton1:hover {
  background-color: #FFFFFF;
  color: yellow;
}

.ascbutton {
  background-color: #FAFF33;
}
    <div class="actions">
  <button class="rebutton rebutton1" id="rebirth" onclick="rebirth()">Rebirth: -150 clicks</button>
  <button class="prebutton prebutton1" id="presteige" onclick="presteige()">Presteige: -650 clicks, -5 rebirths</button>
  <button class="ascbutton ascbutton1" id="Ascend" onclick="ascend()">Ascend: -3000 clicks, -10 rebs, -5 prstgs</button>
</div>
<p id="clickcounter" style="color:blue;">Clicks: 0</p>
<h4 id="cpc" style="color:white">Clicks per click: 1</h4>
<h5 id="cps" style="color:white">Clicks per second: 0</h5>
<h1 id="rebirthcounter" style="color:red;text-align:left;">Rebirths: 0</h1>
<h2 id="presteigecounter" style="color:lime;text-align:left;">Presteiges: 0</h2>
<h3 id="ascs" style="color:yellow">Ascensions: 0</h3>
<h6 id="reborn" style="color:purple">Reborns: 0</h6>
<div style="text-align:center;">
  <button class="button button1" id="addclick" onclick="myFunction()">Click</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search