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>
Related
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. :)
So I am trying to make it look like this
However, it currently looks like this
As, you can see the top section with the logo and register have their own section. I want it to stay on top of the background image. I do not want to use position: absolute; or position : fixed; since i want it to say in its own section. I have also tried using a negative margin and it does not work. Any help is appreciated.
.top-firstsection {
display: flex;
}
.logo-header {
height: 80px;
}
.nav-list {
margin-left: auto;
list-style: none;
display: flex;
}
.leftandright {
display: flex;
justify-content: space-between;
}
.login {
font-family: Helvetica;
font-size: 13px;
color: #000000;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.register {
font-family: Helvetica;
font-size: 13px;
color: #0972D7;
letter-spacing: 0.98px;
text-align: center;
text-decoration: none;
line-height: 26px;
}
.first-left {
padding-top: 220px;
padding-left: 171px;
}
.first-left h1 {
font-family: Poppins-Regular;
font-size: 40px;
color: #000000;
letter-spacing: 0;
line-height: 50px;
}
.sectionOne-textbox {
border: 1px solid #EBEBEB;
border-radius: 4px;
font-family: Helvetica;
font-size: 14px;
color: #000000;
letter-spacing: 1.05px;
line-height: 52px;
width: 80%;
}
.sectionOne-button {
background: #1F8FFB;
border-radius: 4px;
border: 1px solid;
padding: 16px 25px;
font-family: Helvetica;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 1.3px;
text-align: center;
margin-top: 24px;
}
<section class="first-section">
<div class="top-firstsection">
<img src="logo.svg" alt="logo" class="logo-header">
<ul class="nav-list flex">
<li>
LOGIN
</li>
<li>
REGISTER
</li>
</ul>
</div>
<div class="leftandright">
<div class="first-left">
<h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
<input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
<button class="sectionOne-button">GET STARTED NOW!</button>
</div>
<div class="first-right">
<img src="firstsectionbackground.png" alt="main graphic" class="main-graphic">
</div>
</div>
</section>
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!
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
Hi I'm building an app on the Salesforce1 platform and I'm having some trouble with the UI. If you look at the recent and popular ideas columns, technically they are side by side but the Recent Ideas column is slightly lower than the Popular Ideas column and I can't figure out how to get them exactly side by side again. Any help would be greatly appreciated.
HTML (ignore the apex tags. Indentation is a bit messed up because of how I had to format it to put it in a code block for this post)
<apex:page standardcontroller="Idea" recordSetVar="idea"
sidebar="false"
showHeader="false"
standardstylesheets="false"
doctype="html-5.0">
<head> </head>
<body>
<apex:stylesheet value="{!$Resource.PuroIdeas_Homepage_CSS}" />
<div id="header">
<a href="https://cs3.salesforce.com/apex/PuroIdeas_Home">
<img id="PuroIdeasLogo" src="{!$Resource.PuroIdeasLogo}"/>
</a>
<br/>
<p id="introCopy" >PuroIdeas is a place where you can innovate. Share your ideas, check out others, join the discussion and help build a better Purolator</p>
</div>
<div id="login">
<p class="loginText"> Login | Sign Up </p>
</div>
<div id="Challenges">
<h1 class="ChallengesHeader"> Challenges </h1>
<div class="activeChallenge">
<!-- <apex:dataList value="{!ideatheme}" var="i" id="list">
{!i.title}
</apex:dataList>
<apex:pageblock>
<apex:outputField value="{!idea.title}" />
</apex:pageblock> -->
<p> CHALLENGE 1 - </p>
</div>
<div class="activeChallenge">
<p> CHALLENGE 2 - </p>
</div>
<div class="activeChallenge">
<p> CHALLENGE 3 - </p>
</div>
<!-- Do I need a div for the view all button? -->
</div>
<div id="rpIdeasContainer">
<div id="recentIdeas">
<h1 class="RecentIdeasHeader"> Recent Ideas </h1>
<div class="rIdeas"> Recent Idea 1</div>
<div class="rIdeas"> Recent Idea 2</div>
<div class="rIdeas"> Recent Idea 3</div>
</div>
<div id="popularIdeas">
<h1 class="PopularIdeasHeader"> Popular Ideas </h1>
<div class="pIdeas"> Popular Idea 1</div>
<div class="pIdeas"> Popular Idea 2</div>
<div class="pIdeas"> Popular Idea 3</div>
</div>
</div>
<div id="generalFeedback">
<h1 class="GeneralFeedbackHeader">General Feedback</h1>
<p>Category <br/> Title <br/> Description</p>
<apex:form >
<!-- <apex:inputField ></apex:inputField> -->
<!-- <apex:commandButton action="{!submit}" value="Submit"/> -->
</apex:form>
</div>
<div id="pastChallenges">
<h1 class="PastChallengesHeader">Past Challenges</h1>
<div class="pChallenge"> Past Challenges 1</div>
<div class="pChallenge"> Past Challenges 2</div>
<div class="pChallenge"> Past Challenges 3</div>
</div>
<div id="ideasInAction">
<h1 class="IdeasInActionHeader">Ideas In Action</h1>
<div class="IIA"> Idea in Action 1</div>
<div class="IIA"> Idea in Action 2</div>
<div class="IIA"> Idea in Action 3</div>
</div>
</body>
</apex:page>
CSS
#header
{
width: 70%;
border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 2px;
margin-left: auto;
margin-right: auto;
}
#PuroIdeasLogo
{
display: block;
margin-left: auto;
margin-right: auto;
}
#introCopy
{
text-align: center;
font-family: "Segoe UI"; /*Helvetica, Arial;*/
font-weight: lighter;
max-width: 60%;
margin-left: auto;
margin-right: auto;
color: #575757;
}
#login
{
width: 70%;
/*border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 1px;*/
margin-left: auto;
margin-right: auto;
}
.loginText
{
text-align: center;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
}
#Challenges
{
width: 70%;
border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 1px;
margin-left: auto;
margin-right: auto;
}
.ChallengesHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.activeChallenge
{
width: 90%;
margin: 20px auto;
padding: 15px;
font-family: "Segoe UI";
font-weight: lighter;
color: #2071FE;
/*background-color: #2071FE;*/
border: 2px solid #2071FE;
border-radius: 15px;
}
#rpIdeasContainer
{
width: 70%;
margin-left: auto;
margin-right: auto;
border-bottom-style: solid;
border-width: 1px;
border-color:#D1D1D1;
}
#recentIdeas
{
width: 50%;
margin-left: auto;
margin-right: auto;
float:left;
}
.RecentIdeasHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.rIdeas
{
width: 85%;
margin: 20px auto;
border: 1px solid red;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}
#popularIdeas
{
margin-left: 50%;
margin-right: auto;
}
.PopularIdeasHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.pIdeas
{
width: 85%;
margin: 20px auto;
border: 1px solid red;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}
#generalFeedback
{
width: 70%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}
.GeneralFeedbackHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
#pastChallenges
{
width: 70%;
border-style: dotted;
margin-left: auto;
margin-right: auto;
}
.PastChallengesHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.pChallenge
{
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}
#ideasInAction
{
width: 70%;
border-style: dotted;
margin-left: auto;
margin-right: auto;
}
.IdeasInActionHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.IIA
{
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}
try to add this in the popular idea div
#popularIdeas
{
vertical-align:middle;
}
or
vertical-align:top;
what's happening?
if thats not working you can just use
display: inline-block
on both div (popular ideas and recent ideas)
I would suggest something different for the same, You can use display property instead of float property. You might have to do some changes like following
#recentIdeas {
width: 50%;
margin-left: auto;
margin-right: auto;
/* float: left; */ /* Removed this */
vertical-align: top; /* Added this */
display: inline-block; /* Added this */
}
#popularIdeas
{
/*margin-left: 50%;*/ /* Removed this */
margin-right: auto;
display:inline-block; /* Added this */
vertical-align:top /* Added this */
}
Demo
I would modify the following classes as such:
#recentIdeas {
width: 48%;
background-color: #FFA500;
padding: 0px !important;
margin: 0px !important;
display: inline-block;
}
#popularIdeas {
width: 48%;
background-color: #AFA500;
padding: 0px !important;
margin: 0px !important;
display: inline-block;
}
You can see this here-> http://jsfiddle.net/T2GG4/
Hope this helps!!!