Ask coding questions

← Back to all posts
Button Positioning
WilliamXing (51)

How do I position the 5 buttons on home.html correctly?

Answered by ruiwenge2 (576) [earned 5 cycles]
View Answer
Comments
hotnewtop
ruiwenge2 (576)

@WilliamXing how do you want to position the buttons?

ruiwenge2 (576)

@WilliamXing do you want to put the buttons next to each other?

ruiwenge2 (576)

@WilliamXing can i fork your repl to try the css?

WilliamXing (51)

Yes. I don't care if people fork my stuff @ruiwenge2

ruiwenge2 (576)

@WilliamXing I made some changes to style.css

take a look:

h1 {
  text-align: center;
  color: white;
  margin: 0;
}
body {
  background-color: #12BFBE  ;
}
p {
  border: 3px solid orange;
  border-radius: 10px;
  background-color: aquamarine;
  color: purple;
  width: 500px;
}
p:hover {
  background-color: #10DCF4;
  transition: ease-in;
  color: #9E40CE;
}
a {
  color: cadetblue;
}
a:hover {
  color: blue;
  background-color: darkseagreen;
  border-radius: 5px;
}
h2 {
  color: white;
}
ul, ol {
  border: 3px solid blue;
  border-radius: 10px;
  background-color: deepskyblue;
  color: #AF1FE4 ;
}
h3 {
  color: white;
}

/* Nav Bar*/
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #3DF908;
  border: 3.7px outset #3A08F9;
  border-radius: 15px;
  box-shadow: 0 9px #999;
	
	/* position: relative; */
	top: 0px;
	bottom: 20px;
}
.button:hover {
	-webkit-transform: scale(1.5, 1.5);
	transform: scale(1.5, 1.5);
  background-color: #267DF8 
}
#b1 {
  margin-right: 50px;
}

#b2 {
  margin-right: 50px;
}

#b3 {
  margin-right: 50px;
}
#b4 {
  margin-right: 50px;
}


.button:active {
  background-color: #FEC601;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  border: 3.7px outset #2364AA;
  width: 100%;
  height: 75px;
  background-color: #26F2F8;
  color: white;
  text-align: center;
  padding-bottom: 40px;
}

.hi {
  width: 400px;
  margin: 0px;
}
.ul {
  width: 700px;
  left: 100px;
  position: relative;
}
.special {
  position: absolute;
  left: 500px;
}
.special2 {
  border: 3px solid #1AED2C;
  border-radius: 10px;
  background-color: #0BF8F9;
  color: #0B36F9 ;
  margin: 10px;
}
.special2:hover {
  background-color: #990BF9;
  color: #0BF9DB;
}

also a few changes to home.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Home</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" href="pp.png" />
  </head>
  <body>
    <script src="script.js"></script>

    <!-- Nav Bar -->
    <div class="footer">
      <br>
      <button id='b1' class="button" onclick="document.location = 'About.html'">About Me</button>
    
      <button id='b2' class="button" onclick="document.location = 'whyr.html'">Why I ran</button>
      <!-- <br> -->
      <button id='b3' class="button" onclick="document.location = 'whyw.html'">Why I should win</button>
      <button id='b4' class="button" onclick="document.location = 'Contact.html'">Contact Me</button>
      <button id='b5' class="button" onclick="document.location = 'Project.html'">Fun Games I made</button>
      <br>
	  </div>
  </body>
</html>

you can view the repl at https://replit.com/@ruiwenge2/Student-Council

WilliamXing (51)

Why does it say run the repl when I open it in a new tab? And, can I fork your homepage? @ruiwenge2

ruiwenge2 (576)

@WilliamXing I think it says run the repl when the files are loading.
If you want to fork my homepage, you can use the basic layout of my homepage, but can you delete the projects?