i have 3 sections in this html 3 page, header, inner body, and footer, i would like you to focus on the inner body only, in there, i have a form, and an information box with title and text, i would like to make the form and information box to be centered in the inner body, and to sit side by side , and the information box to be in the middle of the form height.
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.content {
width: 1400px;
margin: auto;
padding: 10px;
}
/* inner body styling */
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
div.inner-body {
background-image: url(image/blueimage.png);
margin-bottom: 20px;
margin-top: 20px;
height: 900px;
text-align: center;
align-items: center;
display: grid;
}
form {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 80px;
align-items: center;
border-radius: 40px;
width: 525px;
height: 700px;
background-color: rgb(99, 198, 223);
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
}
.signin {
font-size: 35px;
padding: 10px;
width: 530px ;
height: 500px;
display: inline-block;
background-color: rgb(173, 241, 241);
border-radius: 30px;
margin-top: -50px;
margin: 10px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
margin-right: 50px;
}
.signin-intro {
color: black;
}
.passlabel {
white-space: pre;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}
.stafflabel {
white-space: pre;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}
.field {
width: 500px;
font-size: 25px;
font-style: oblique;
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.userlogo {
width: 200px;
border-radius: 100px;
margin-top: -15px;
}
.area {
width: 280px;
height: 30px;
border-radius: 20px;
font-size: 20px;
padding: 5px;
font-style: oblique;
}
.btn {
width: 400px;
height: 40px;
font-size: 30px;
border-radius: 20px;
background-color: rgb(54, 88, 238);
cursor: pointer;
}
.account-link {
font-size: 20px;
}
.checkbox {
display: inline-flex;
font-size: 20px;
}
.remember {
white-space: pre;
}
form .pass-link a:hover,
form .account-link a:hover{
text-decoration: underline;
}
.pass-link {
white-space: pre;
}
.remember-me {
width: 20px;
height: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="signin.css">
<script src="signin.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="inner-body">
<div class ="signin">
<h3><u>Staff Members Sign In</u></h3>
<p class="signin-intro"> This sign in form is meant for staff memebers only, if you are a student, please use this link
Student Account </p>
</div>
<form method="GET" onsubmit=" return formSubmit() " action="#">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
</div><br>
<div class="error" id= "errorMsg"></div><br>
<div class="error" id= "errorMsg1"></div>
<div class="field">
<label class="stafflabel"> Staff Name </label>
<input class="area" placeholder="staffmember or admin" onclick=" return userValidation()" onchange=" return userValidation()" id="staff" name="staff" type="text">
</div> <br>
<div class="error" id= "errorMsg2"></div>
<div class="field">
<label class="passlabel"> Password </label>
<input class="area" placeholder="password" onclick=" return userValidation()" onchange=" return userValidation()" id="pass" name="pass" type="password">
</div><br>
<div class="checkbox">
<input type="checkbox" class="remember-me">
<label class="remember" for="remember-me">Remember me </label>
<a class="pass-link" href="#"> Forgot password? </a>
</div><br><br><br>
<div class="field">
<input class="btn" type="submit" value="Sign in">
</div> <br>
<div class="account-link">
Didn't create an account yet? Create Account
</div>
</form>
</div>
</div>
</body>
</html>
You can use display: flex; to achieve this easier.
Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv
Use flex, remove margin-top, and everything works perfectly. :)
Related
When I hit the button I want to make my code shows a success field. Choosing the background color of the <div> wouldn't work. Is it just my browser or is something wrong with my code?
.div {
float: top;
background-color: white;
border-radius: 10px;
padding: 10px;
width: 275px;
height: 375px;
margin-left: 500px;
margin-right: 500px;
margin-top: 125px;
box-shadow: 0px 0px 20px #00000010;
}
body {
background-color: #c9ecff;
overflow-y: hidden;
overflow-x: auto;
font-family: 'Ubuntu', sans-serif;
}
textarea {
border-color: #c4c4c4;
border-radius: 5px;
width: 250px;
font-family: 'Ubuntu', sans-serif;
resize: none;
}
input {
border: 1px solid #c4c4c4;
border-radius: 5px;
font-family: 'Ubuntu', sans-serif;
width: 250px;
}
form {
padding: 10px;
}
section {
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
flex-direction: column;
font-family: 'Ubuntu', sans-serif;
clear: left;
}
label {
font-family: 'Ubuntu', sans-serif;
font-weight: 300px;
}
button {
border: 0px;
border-radius: 5px;
width: 100%;
height: 50px;
font-family: 'Ubuntu', sans-serif;
color: #38b9ff;
background-color: #bae7ff;
cursor: pointer;
font-size: 16px;
transition: 1.5s ease background-color;
}
button:hover {
background-color: #8ad6ff;
}
#status {
width: 100px;
height: 200px;
max-width: 500px;
text-align: center;
align-items: center;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
}
#status.success {
width: 90%;
max-width: 500px;
text-align: center;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
background-color: #7de000;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<section>
<div class="div">
<form action="" method="get">
<label for="name">Name</label><br>
<input name="name" id="name"><br><br>
<label for="mail">G-Mail</label><br>
<input name="mail" id="mail"><br><br>
<label for="sub">Subject</label><br>
<input name="sub" id="sub"><br><br>
<label for="mess">Message</label><br>
<textarea id="mess" rows="5" col="80"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</div>
<div id="status" class="success">Success</div>
</section>
Removing the last div , it's working well here in my machine. The color change. So remove the last div(yes, i know that you said it was only in the copy, but check again your code).
<section>
<div class="div">
<form action="" method="get">
<label for="name">Name</label><br>
<input name="name" id="name"><br><br>
<label for="mail">G-Mail</label><br>
<input name="mail" id="mail"><br><br>
<label for="sub">Subject</label><br>
<input name="sub" id="sub"><br><br>
<label for="mess">Message</label><br>
<textarea id="mess" rows="5" col="80"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</div>
<div id="status" class='success'>Success</div>
</section>
I was almost done with my page when my flexbox suddenly stopped working. I'm trying to use it with the main direction going from top to bottom and I would like to use the justify-content: "space-around" option. I checked for errors in my HTML with a validator and after that I tried porting over my code to an example on w3s to see when something in my code would break the example but that moment never came.
html {
font-family: "Archivo", "Arial";
background-color: #223333;
color: #eeeeee;
}
* {
font-family: "Archivo", "Arial";
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.paneel {
/*outline: 2px solid red;*/
margin: 20px;
border-radius: 20px;
border: 2px solid orange;
}
h1 {
font-family: "Archivo", "Arial";
font-size: 8vw;
text-align: center;
}
button {
padding: 10px;
border-radius: 10px;
border: 2px solid orange;
background-color: #223333;
color: white;
font-family: "Archivo", "Arial ";
font-size: 2.5vw;
}
input {
padding: 10px;
border-radius: 10px;
border: 2px solid orange;
background-color: #223333;
color: white;
font-family: "Archivo", "Arial ";
font-size: 2.5vw;
}
label {
padding: 10px;
background-color: #223333;
color: white;
font-family: "Archivo", "Arial ";
font-size: 2.5vw;
}
.column {
flex-grow: 1;
}
p {
font-family: verdana;
font-size: 20px;
}
#paneelConf {
height: 300px;
}
#paneelActie {
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script defer src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo" />
<title>BLE for Js</title>
</head>
<body>
<header>
<h1>BLE for Js</h1>
</header>
<div id="paneelConf" class="paneel">
<div class="container">
<div>
<label id="lblService">Service UUID: </label>
<input id="iptService" />
</div>
<div>
<label id="lblCharacteristic">Characteristic UUID: </label>
<input id="iptCharacteristic" />
</div>
<div>
<button type="button" id="btnBLE">Connect to the BLE pheripheral</button>
</div>
</div>
</div>
<div id="paneelActie" class="paneel">
<div class="container">
<div>
<button type="button" id="btnRead">Read delay</button>
<label id="lblRes"></label>
</div>
<div>
<button type="button" id="btnWrite">Write delay</button>
<input id="iptWaarde" type="number" value="50" />
</div>
</div>
</div>
</body>
</html>
Visually, you don't see the rule justify-content: space-around working because of the lack of height of the selector .container. Add the rule of height height: 100% or height: inherit for this selector .container.
html {
font-family: "Archivo", "Arial";
background-color: #223333;
color: #eeeeee;
}
* {
font-family: "Archivo", "Arial";
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100%;
}
.paneel {
/*outline: 2px solid red;*/
margin: 20px;
border-radius: 20px;
border: 2px solid orange;
}
h1 {
font-family: "Archivo", "Arial";
font-size: 8vw;
text-align: center;
}
button {
padding: 10px;
border-radius: 10px;
border: 2px solid orange;
background-color: #223333;
color: white;
font-family: "Archivo", "Arial ";
font-size: 2.5vw;
}
input {
padding: 10px;
border-radius: 10px;
border: 2px solid orange;
background-color: #223333;
color: white;
font-family: "Archivo", "Arial ";
font-size: 2.5vw;
}
label {
padding: 10px;
background-color: #223333;
color: white;
font-family: "Archivo", "Arial ";
font-size: 2.5vw;
}
.column {
flex-grow: 1;
}
p {
font-family: verdana;
font-size: 20px;
}
#paneelConf {
height: 300px;
}
#paneelActie {
height: 200px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo" />
<body>
<header>
<h1>BLE for Js</h1>
</header>
<div id="paneelConf" class="paneel">
<div class="container">
<div>
<label id="lblService">Service UUID: </label>
<input id="iptService" />
</div>
<div>
<label id="lblCharacteristic">Characteristic UUID: </label>
<input id="iptCharacteristic" />
</div>
<div>
<button type="button" id="btnBLE">Connect to the BLE pheripheral</button>
</div>
</div>
</div>
<div id="paneelActie" class="paneel">
<div class="container">
<div>
<button type="button" id="btnRead">Read delay</button>
<label id="lblRes"></label>
</div>
<div>
<button type="button" id="btnWrite">Write delay</button>
<input id="iptWaarde" type="number" value="50" />
</div>
</div>
</div>
</body>
I'm building homepage for a website for my first web dev module at uni and i'm running into an issue. Below my navigation bar and above the main content section there is a whitespace for some reason. I'm using CSS grid so maybe it's due to a mistake there somewhere but not sure.
Basically I only want 1 column and 3 rows in the grid: Header - where my nav bar will go, a main-content section where a few headlines will go and a footer. But I seem to have a 4th section in between. Initially I had this whitespace below my footer and then I changed the positioning settings to 'stick' the footer to the bottom (not really knowing what I was doing) and now I think the whitespace has been pushed up or something. I want the 'main-content' section to start at the bottom border of the header and end at the top border of the footer and add a background image to it. Thanks in advance for the assistance!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint"
content="width=device-width, initial scale=1">
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght#500&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght#700&display=swap"
rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet"
type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span
style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
& Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span
style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science
student based in Sheffield,
England.</h2>
</div>
<div class="tagline">
<h1>This Is <span
style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span
style="color: white;">K
</span></h1>
<p>Welcome to my resume site.
My name is Uwais
Kushi-Mohammed, I am a
first year computer
science student at
Sheffield Hallam
University. If you want to
hire me for a project get
in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span
style="color: white;">Links
</span></h1>
<nav>
<ul>
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</div>
<div
class="footer-section-contact">
<h1>Contact<span
style="color: white;">
Me</span></h1>
<br />
<form class="contact-form"
action="results.html"
method="GET">
<div>
<input
class="contact-input"
type="text"
id="first-name"
placeholder="First Name...">
</div>
<div>
<input
class="contact-input"
type="text"
id="last-name"
placeholder="Last Name...">
</div>
<div>
<input
class="contact-input"
type="email"
id="email"
placeholder="Email Address...">
</div>
<div>
<textarea
class="message-input"
id="message"
placeholder="Message..."></textarea>
</div>
<button
class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © |
Designed by Uwais
Kushi-Mohammed. All Rights
Reserved.
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"header"
"main-content"
"footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center ;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li , .nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content{
grid-area: main-content;
background-color: black;
}
.greeting h1{
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2{
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content{
height: 300px ;
display: flex;
}
.footer .footer-content .footer-section-about, .footer-section-links, .footer-section-contact{
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color:#2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li, .footer-section-links a{
font-family: 'Anonymous Pro', monospace;
color:#dbdbdb;
text-decoration: none;
list-style-type: none;
margin:3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px ;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input{
border: 0;
background-color: #c7c3c3;
width: 240px;
margin:3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button{
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color:#c7c3c3;
}
::placeholder{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color:#787672 ;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
Combined as a snippet:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header" "main-content" "footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li,
.nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content {
grid-area: main-content;
background-color: black;
}
.greeting h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2 {
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content {
height: 300px;
display: flex;
}
.footer .footer-content .footer-section-about,
.footer-section-links,
.footer-section-contact {
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li,
.footer-section-links a {
font-family: 'Anonymous Pro', monospace;
color: #dbdbdb;
text-decoration: none;
list-style-type: none;
margin: 3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input {
border: 0;
background-color: #c7c3c3;
width: 240px;
margin: 3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button {
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color: #c7c3c3;
}
::placeholder {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color: #787672;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial scale=1">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght#700&display=swap" rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet" type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
& Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science student based in Sheffield, England.
</h2>
</div>
<div class="tagline">
<h1>This Is <span style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span style="color: white;">K
</span></h1>
<p>Welcome to my resume site. My name is Uwais Kushi-Mohammed, I am a first year computer science student at Sheffield Hallam University. If you want to hire me for a project get in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span style="color: white;">Links
</span></h1>
<nav>
<ul>
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</div>
<div class="footer-section-contact">
<h1>Contact<span style="color: white;">
Me</span></h1>
<br />
<form class="contact-form" action="results.html" method="GET">
<div>
<input class="contact-input" type="text" id="first-name" placeholder="First Name...">
</div>
<div>
<input class="contact-input" type="text" id="last-name" placeholder="Last Name...">
</div>
<div>
<input class="contact-input" type="email" id="email" placeholder="Email Address...">
</div>
<div>
<textarea class="message-input" id="message" placeholder="Message..."></textarea>
</div>
<button class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © | Designed by Uwais Kushi-Mohammed. All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
It seems that the grid template is causing this issue.
commenting out line 13 or just deleting that line all together should fix it
Your .grid css should look like this when you're done:
.grid {
display: grid;
grid-template-columns: 1fr;
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-areas:
"header"
"main-content"
"footer";
}
or you can just delete the grid template rows line all together. Let me know if this helps! Good luck!
I am very new to web development. This is actually my first personal project and I'm having trouble aligning the input fields. I designed the layout in XD and trying to code the design. Keep in mind, I'm working on the mobile layout so its only about 400 pixels wide. I guess I can worry about the responsiveness later with media queries. Anyway, I've tried targeting the input fields and using text-align: center; but it's not working. Please help!
This is what my page currently looks like:
This is what I need it to look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<title>40 Hour Workweek Calculator</title>
</head>
<header>
<h3>40-Hour Workweek Calculator</h3>
</header>
<body>
<h4 class="sections">Total hours needed to work this week:</h4>
<input type="text" class="userInput" placeholder="ex: 40" />
<h4 class="sections">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" class="userInput" placeholder="ex: 33"/>
<h4 class="sections">Enter remaining decimals:</h4>
<input type="text" class="userInput" placeholder="ex: .57"/>
<h4 class="sections">Converted to time format:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Remaining hours to work:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Enter time you clocked in on Friday:</h4>
<input type="text" class="userInput" placeholder="ex: 7:22"/><br />
<div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div>
<h4 class="sections">Enter today's lunch break in minutes:</h4>
<input type="text" class="userInput" placeholder="ex: 30"/>
<div class="sections">
<button class="calcButton">Calculate my hours</button>
<h4 class="sections">Time to clock out on Friday:</h4>
<div class="defaultCalc clockOutTime"></div>
<div class="sections">
<div class="clockOutAMButton">AM</div>
<div class="clockOutPMButton">PM</div>
</div>
</body>
CSS:
/*Base style layouts*/
header, body {
font-family: 'Lato', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-color: #15D1BC;
box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.25em;
font-weight: 400;
}
h4 {
font-weight: 100;
color: #95989A;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
border: 1px none;
width: 133px;
height: 29px;
background-color: #DBDBDB;
border-radius: 12px;
text-align: center;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 100;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
}
.userInput {
border: 1px solid #D3D8DB;
width: 133px;
height: 29px;
border-radius: 12px;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton,
.pmButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 100;
}
.buttons {
margin: 25px 0;
}
.calcButton {
border: 1px;
width: 217px;
height: 36px;
background-color: #15D1BC;
color: #FFF;
border-radius: 18px;
font-weight: 100;
font-size: 1.1em;
}
.clockOutTime {
border: 1px none;
width: 133px;
height: 29px;
background-color: #60B6FF;
color: #fff;
border-radius: 12px;
text-align: center;
}
.clockOutAMButton,
.clockOutPMButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 300;
text-align: center;
display: inline-block;
line-height: 30px;
}
button:focus {outline:0;}
input:focus {
border-color: #15D1BC;
outline: none;
}
.pmButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.amButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.calcButton:active {
font-size: 1.075em;
}
To center the inputs you want to use text-align: center on the parent. You could either introduce a new element as the parent, or just apply it to body in your case.
Then your .defaultCalc elements are not centered becasue they're block elements. You can either make them inline-block (what I did), or apply margin-left: auto; margin-right: auto
Your header element is also before body - it needs to be inside of <body></body>
/*Base style layouts*/
header, body {
font-family: 'Lato', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Roboto', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-color: #15D1BC;
box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.25em;
font-weight: 400;
}
h4 {
font-weight: 100;
color: #95989A;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
border: 1px none;
width: 133px;
height: 29px;
background-color: #DBDBDB;
border-radius: 12px;
display: inline-block;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 100;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
}
.userInput {
border: 1px solid #D3D8DB;
width: 133px;
height: 29px;
border-radius: 12px;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton,
.pmButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 100;
}
.buttons {
margin: 25px 0;
}
.calcButton {
border: 1px;
width: 217px;
height: 36px;
background-color: #15D1BC;
color: #FFF;
border-radius: 18px;
font-weight: 100;
font-size: 1.1em;
}
.clockOutTime {
border: 1px none;
width: 133px;
height: 29px;
background-color: #60B6FF;
color: #fff;
border-radius: 12px;
text-align: center;
}
.clockOutAMButton,
.clockOutPMButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 300;
text-align: center;
display: inline-block;
line-height: 30px;
}
button:focus {outline:0;}
input:focus {
border-color: #15D1BC;
outline: none;
}
.pmButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.amButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.calcButton:active {
font-size: 1.075em;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<title>40 Hour Workweek Calculator</title>
</head>
<body>
<header>
<h3>40-Hour Workweek Calculator</h3>
</header>
<h4 class="sections">Total hours needed to work this week:</h4>
<input type="text" class="userInput" placeholder="ex: 40" />
<h4 class="sections">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" class="userInput" placeholder="ex: 33"/>
<h4 class="sections">Enter remaining decimals:</h4>
<input type="text" class="userInput" placeholder="ex: .57"/>
<h4 class="sections">Converted to time format:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Remaining hours to work:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Enter time you clocked in on Friday:</h4>
<input type="text" class="userInput" placeholder="ex: 7:22"/><br />
<div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div>
<h4 class="sections">Enter today's lunch break in minutes:</h4>
<input type="text" class="userInput" placeholder="ex: 30"/>
<div class="sections">
<button class="calcButton">Calculate my hours</button>
<h4 class="sections">Time to clock out on Friday:</h4>
<div class="defaultCalc clockOutTime"></div>
<div class="sections">
<div class="clockOutAMButton">AM</div>
<div class="clockOutPMButton">PM</div>
</div>
</body>
For some reason my css centering code is messing with a widget. The widget is being pushed down below the columns. Also, the nav bar widget is on all pages of the forum.
I'd really, really appreciate any help at all. Thanks.
Picture of problem: http://i1335.photobucket.com/albums/w662/dnpranks/Untitled15_zps89a1c5e9.png
~Widget is suppose to be up more, right next to the columns.
Below is the code to the columns that's causing the problem:
Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pricies Table</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style_price_table_dark.css" />
</head>
<body>
<div class="left">
<div class="pricing_table_row">
<div class="first_child">
<div class="title_first_colum"><center><img src="http://i1335.photobucket.com/albums/w662/dnpranks/_slotbutton__zpsb8778ee4.png"></center></div>
</div>
<ul>
<li class="first_colum"><img src="http://i.imgur.com/4IOlEBU.png"></li>
<li class="first_colum black"><img src="http://i.imgur.com/FrohEbX.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/GnnOkkw.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/pvJPDni.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/xux1rsZ.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/Krg86nA.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/6yBmM4e.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/4D1nzMY.png"></li>
<li class="first_colum"><img src="http://i.imgur.com/ZFtOSeS.png"></li>
</ul>
</div>
<div class="ptable">
<div class="pricing_table_row">
<div class="first_child">
<div class="title">Bet</div>
<div class="price">100<br /><span class="small">DP</span></div>
</div>
<ul>
<li><center><div class="colorletter"><strong><br>600</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>400</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>300</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>200</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>200</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>100</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>-50</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>-100</br></strong></center></li>
<li><center><div class="colorletter"><strong><br>-200</br></strong></center></li>
</ul>
</div>
<div class="pricing_table_row">
<div class="first_child">
<div class="title">Bet</div>
<div class="pricet">75<br /><span class="small">DP</span></div>
</div>
<ul>
<li><div class="colorlettert"><center><strong><br>400</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>300</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>200</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>150</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>150</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>75</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>-50</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>-75</br></strong></center></li>
<li><div class="colorlettert"><center><strong><br>-150</br></strong></center></li>
</ul>
</div>
<div class="pricing_table_row">
<div class="first_child">
<div class="title">Bet</div>
<div class="pricew">50<br /><span class="small">DP</span></div>
</div>
<ul>
<li><center><div class="colorletterw"><strong><br>300</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>200</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>150</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>100</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>100</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>50</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>-25</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>-50</br></strong></center></li>
<li><center><div class="colorletterw"><strong><br>-75</br></strong></center></li>
</ul>
</div>
<div class="left">
<form method="post" action="/posting.forum" onsubmit="return vB_Editor['text_editor'].prepare_submit(0, 0)" name="post" id="quick_reply">
<div style="clear: both; margin-left: auto; width: 150px; margin-right: auto; height: 169px;" id="textarea_content">
<textarea editorid="text_editor" cols="50" rows="10" name="message" style="font-size: 1.0m;" id="text_editor_textarea" class="inputbox">Bet Amount: </textarea>
</div>
<center>
<input type="hidden" name="mode" value="reply" /><input type="hidden" name="sid" value="26766" /><input type="hidden" name="t" value="3671" /><br /><input onclick="confirm('Make sure that the requested item(s) is(are) in the Supreme Market list and that you have sufficient amount Duel Points for it.');" type="submit" class="button1" value="Send" name="post" />
</center>
</form>
</body>
</html>
Css:
/*
DICE GAME TABLE
*/
/* Elements styles */
.pricing_table_row {
list-style:none;
float:left;
width:245px;
margin:0px;
padding:3px;
text-align:center;
background-color:#444444;
font-family: 'Open Sans Condensed', sans-serif;
}
.left {
margin: 0 auto;
text-align:center;
width:1024px;
min-width:auto;
overflow: hidden;
}
.right {
margin-left: -28%;
}
.pricing_table_row ul {
list-style:none
width:232px;
margin:3;
padding:3px;
text-align:center;
background-color:#444444;
font-family: 'Open Sans Condensed', sans-serif;
}
.pricing_table_row ul {
list-style:none;
float:left;
width:232px;
margin:0;
padding:3px;
text-align:center;
background-color:#444444;
font-family: 'Open Sans Condensed', sans-serif;
}
.pricing_table_row ul li {
border:1px solid #5b5b5b;
background-color: #2c2c2c;
margin-top:6px;
width: 232px;
height: 101px;
display: block;
line-height: 30px;
color: #FFFFFF;
}
.pricing_table_row ul li {
font-size:50px;
height: 101px;
}
.first_child{
margin-top:6px;
border: 2px solid #5b5b5b;
font-size:50px;
font-weight:bold;
height: 159px;
background-color: #2c2c2c;
text-align:center;
width: 230px;
margin: 4px;
}
.last_child{
float:left;
margin-top: 6px;
margin-left: 3px;
border: 1px solid #5b5b5b;
font-size:18px;
font-weight:bold;
height: 120px;
width: 232px;
background-color: #2c2c2c;
text-align:center;
}
.title{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
height: 41px;
width: 212px;
margin: 10px 9px 9px 9px;
padding-top: 0px;
font-size: 28px;
color: #ffffff;
background-color: #91040b;
}
.title_first_colum{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
color: #01b8e2;
height: 159px;
width: 232px;
margin:0;
padding-top: 15px;
font-size: 28px;
}
.price{
padding-top: 13px;
color: #6e8c92;
background-color: #000000;
font-weight: 700;
height: 75px;
width: 212px;
margin: 9px;
font-size: 50px;
line-height: 34px;
}
.pricet{
padding-top: 13px;
color: #ff0000;
background-color: #000000;
font-weight: 700;
height: 75px;
width: 212px;
margin: 9px;
font-size: 50px;
line-height: 34px;
}
.pricew{
padding-top: 13px;
color: #ff6600;
background-color: #000000;
font-weight: 700;
height: 75px;
width: 212px;
margin: 9px;
font-size: 50px;
line-height: 34px;
}
.colorletter{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
font-size: 50px;
color: #6e8c92;
}
.colorlettert{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
font-size: 50px;
color: #ff0000;
}
.colorletterw{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
font-size: 50px;
color: #ff6600;
}
.price_small{
color: #01b8e2;
padding-top: 13px;
font-weight: 700;
height: 67px;
width: 232px;
margin: 10px;
font-size: 25px;
line-height: 18px;
}
.subprice{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
font-size: 50px;
color: #FFFFFF;
}
.subprice_small{
font-family: 'Open Sans Condensed', serif;
font-weight: 700;
font-size: 25px;
color: #FFFFFF;
}
.small{
font-family: 'Open Sans Condensed', serif;
font-weight: 300;
font-size: 15px;
color: #FFFFFF;
}
.list_check {
background:url(../images/icon_check_dark.png) 0 0 no-repeat;
background-position: center;
}
.list_x {
background:url(../images/icon_x_dark.png) 0 0 no-repeat;
background-position: center;
}
.button{
font-family: 'Open Sans Condensed', serif;
font-weight: 700;
font-size: 17px;
margin-top: 10px;
border: none;
height: 30px;
width: 232px;
color: #FFFFFF;
background-color: #01b8e2;
}
.button:hover{
font-family: 'Open Sans Condensed', serif;
font-weight: 700;
font-size: 17px;
margin-top: 10px;
border: none;
background-color: #000000;
height: 30px;
width: 232px;
color: #FFFFFF;
}
.first_colum{
text-align: left;
padding-left: 0px;
}
.black{
background-color: #000000;
}
Try removing this clear:both near the end of your HTML code, and see if that fixes the problem. Without seeing the code live I can't tell for sure if it'll fix it, but I've had very similar problems myself with clear pushing down other content.
Change:
<div style="clear: both; margin-left: auto; width: 150px; margin-right: auto; height: 169px;" id="textarea_content">
<textarea editorid="text_editor" cols="50" rows="10" name="message" style="font-size: 1.0m;" id="text_editor_textarea" class="inputbox">Bet Amount: </textarea>
</div>
To:
<div style="margin-left: auto; width: 150px; margin-right: auto; height: 169px;" id="textarea_content">
<textarea editorid="text_editor" cols="50" rows="10" name="message" style="font-size: 1.0m;" id="text_editor_textarea" class="inputbox">Bet Amount: </textarea>
</div>