My footer is set behind my form. I can't set the bottom as a box element as it messes up the rest of the page. I tried to put it in the absolute position and send it to the bottom. I also tried to change the entire bottom footer element to inline block as well but it messed up the rest of the pages.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kascey Rodgers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div >
<nav >
<div ><a href="./index.html"><b>Kascey</b></a></div>
<a href="#">
<span ></span>
<span ></span>
<span ></span>
</a>
<div >
<ul>
<li><a href="./resume.html">Resume</a></li>
<li><a href="./interest.html">Interests</a></li>
<li><a href="./donate.html" >Donate</a></li>
</ul>
</div>
</nav>
<script src="run.js"></script>
<div >
<h2><b>Donate to Kascey</b></h2>
<p>Please donate to Kascey as she is freelance at the moment looking for work.</p>
<form action="action_page.php">
<div >
<div >
<label for="fname">First Name</label>
</div>
<div >
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div >
<div >
<label for="lname">Last Name</label>
</div>
<div >
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div >
<div >
<label for="lname">Email Address</label>
</div>
<div >
<input type="text" id="email" name="email" placeholder="Your email address..">
</div>
</div>
<div >
<div >
<label for="lname">Retype Email Address</label>
</div>
<div >
<input type="text" id="email" name="email" placeholder="Retype your email address..">
</div>
</div>
<div >
<div >
<label for="lname">Address</label>
</div>
<div >
<input type="text" id="address" name="address" placeholder="Type your postal address..">
</div>
</div>
<div >
<div >
<label for="lname">City</label>
</div>
<div >
<input type="text" id="address_city" name="address_city" placeholder="Type your city..">
</div>
</div>
<div >
<div >
<label for="country">State</label>
</div>
<div >
<select id="state" name="state">
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="colorado">Colorado</option>
<option value="connecticut">Connecticut</option>
<option value="delaware">Delaware</option>
<option value="florida">Florida</option>
<option value="georgia">Georgia</option>
<option value="hawaii">Hawaii</option>
<option value="idaho">Idaho</option>
<option value="illinois">Illinois</option>
<option value="indiana">Indiana</option>
<option value="iowa">Iowa</option>
<option value="kansas">Kansas</option>
<option value="kentucky">Kentucky</option>
<option value="louisiana">Louisiana</option>
<option value="maine">Maine</option>
<option value="maryland">Maryland</option>
<option value="massachusetts">Massachusetts</option>
<option value="michigan">Michigan</option>
<option value="minnesota">Minnesota</option>
<option value="mississippi">Mississippi</option>
<option value="missouri">Missouri
<option value="montana">Montana</option>
<option value="nebraska">Nebraska</option>
<option value="nevada">Nevada</option>
<option value="new hampshire">New Hampshire</option>
<option value="new Jersey">New Jersey</option>
<option value="new Mexico">New Mexico</option>
<option value="new York">New York</option>
<option value="north carolina">North Carolina</option>
<option value="north dakota">North Dakota</option>
<option value="ohio">Ohio</option>
<option value="oklahoma">Oklahoma</option>
<option value="oregon">Oregon</option>
<option value="pennsylvania">Pennsylvania</option>
<option value="rhode island">Rhode Island</option>
<option value="south carolina">South Carolina</option>
<option value="south dakota">South Dakota</option>
<option value="tennessee">Tennessee</option>
<option value="texas">Texas</option>
<option value="utah">Utah</option>
<option value="vermont">Vermont</option>
<option value="virginia">Virginia</option>
<option value="washington">Washington</option>
<option value="west Virginia">West Virginia</option>
<option value="wisconsin">Wisconsin</option>
<option value="wyoming">Wyoming</option>
</select>
</div>
</div>
<div >
<div >
<label for="zip">Zip <Code></Code></label>
</div>
<div >
<input type="text" id="zip" name="zip" placeholder="Type your zip code..">
</div>
</div>
<div >
<div >
<label for="phone">Phone <Code></Code></label>
</div>
<div >
<input type="text" id="phone" name="phone" placeholder="Type your phone number..">
</div>
</div>
<div >
<div >
<label for="card_number">Card Information<Code></Code></label>
</div>
<div >
<label for="card_number">Card Number<Code></Code></label>
<input type="text" id="zip" name="zip" placeholder="XXXX-XXXX-XXXX-XXXX">
</div>
</div>
<div >
<div >
</div>
<div >
<label for="month">Month <Code></Code></label>
<select id="month" name="month">
<option value="january">01</option>
<option value="february">02</option>
<option value="march">03</option>
<option value="april">04</option>
<option value="may">05</option>
<option value="june">06</option>
<option value="july">07</option>
<option value="august">08</option>
<option value="september">09</option>
<option value="october">10</option>
<option value="november">11</option>
<option value="december">12</option>
</select>
</div>
<div >
<label for="year">Year <Code></Code></label>
<select id="year" name="year">
<option value="2022">22</option>
<option value="2023">23</option>
<option value="2024">24</option>
<option value="2025">25</option>
<option value="2026">26</option>
<option value="2027">27</option>
<option value="2028">28</option>
<option value="2029">29</option>
<option value="2030">30</option>
</select>
</div>
<div >
<label for="cvv">CVV<Code></Code></label>
<input type="text" id="cvv" name="cvv" placeholder="CVV">
</div>
</div>
<div >
<div >
<label for="subject">Message (Optional)</label>
</div>
<div >
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div >
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
<footer>
<nav >
<div >
</div>
<div >
<ul>
<li><a href="#email">[email protected]</a></li>
<li><a href="#github">GitHub</a></li>
<li><a href="#phone">229.869.5841</a></li>
</ul>
</div>
</nav>
</footer>
</div>
</body>
</html>
CSS
/* Nav Bar */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
background-size: cover;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color:white;
padding: 2em;
text-decoration: none;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color: yellow;
}
.logo li{
text-decoration: none;
}
.logo li a{
text-decoration: none;
}
.navbar_links ul{
margin: 0;
padding: 0;
display: flex;
}
.navbar_links li {
list-style: none;
}
.navbar_links li a {
text-decoration: none;
color: white;
padding:1rem;
display: block;
}
.navbar_links li a:hover {
text-decoration-line: line-through;
text-decoration-thickness: 5px;
text-decoration-color: yellow;
color: yellow;
}
/* Cant figure out why my links wont change color...HUGE L. */
.navbar_links li a:active {
text-decoration: line-through;
text-decoration-color: yellow;
color: yellow;
}
.toggle_button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle_button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.navbar_links li:nth-child(3) {
border-radius: 10px;
border-style: solid;
padding: .1em;
border-color: yellow;
}
.navbar_links li:nth-child(3):hover {
background-color: rgba(171,102,255,1);
}
@media (max-width: 810px) {
.toggle_button {
display: flex;
}
.navbar_links {
display: none;
width: none;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar ul{
width: 100%;
flex-direction: column;
}
.navbar_links li{
text-align: center
}
.navbar_links li a{
padding: .5rem 1rem;
}
.navbar_links.active {
display: flex;
}
}
/* Hero Box */
.hero{
height: 100vh;
width: auto;
}
/* Hero Section */
.hero_section {
display: flex;
}
.hero_text {
flex: 50%;
color: white;
padding: 5em;
}
.hero_text h1{
color: yellow;
}
.hero_img img{
flex: 50%;
padding: 5em;
width: 100%;
height: auto;
}
@media (max-width: 810px) {
.hero_section {
width: 100%;
content: "";
display: table;
clear: both;
}
.hero_text {
padding: 2em;
}
}
@media (max-width: 1104px) {
.hero{
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
height: 100vh;
}
.hero_img {
display: none;
}
}
@media (max-width: 492px) {
/* White space shown when browser is too tall. */
.hero {
height: 150vh;
}
.navbar_links {
display: none;
width: none;
}
.footbar {
flex-direction: column;
align-items: flex-start;
}
.footbar ul{
width: 100%;
flex-direction: column;
}
.footbar_links li{
text-align: right
}
.footbar_links li a{
padding: .5rem 1rem;
}
.footbar_links.active {
display: flex;
}
}
/* Footer */
.footbar {
display: flex;
justify-content: space-between;
align-items: center;
color:white;
padding-right: 2em;
resize: 10%;
position: absolute;
}
.footbar_links ul{
margin: 0;
padding: 0;
display: flex;
}
.footbar_links li {
list-style: none;
}
.footbar_links li a {
text-decoration: none;
color: white;
padding:1rem;
display: block;
}
.footbar_links li a:hover {
text-decoration-line: line-through;
text-decoration-thickness: 5px;
text-decoration-color: yellow;
}
.footbar_links li a:active {
text-decoration-line: line-through;
text-decoration-thickness: 5px;
text-decoration-color: yellow;
color: yellow;
}
/* Card Section - For Resume and Form Site */
h3 {
display: block;
margin-left: 2em;
margin-right: 2em;
color: white;
font-weight: bold;
}
.site_section{
display: flex;
align-items: center;
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 300px;
height: 300px;
border-radius: 5px;
margin: 5px;
text-align: center;
}
@media screen and (max-width: 600px) {
h4 {
font-size: 1em;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 300px;
height: 300px;
border-radius: 5px;
margin: 5px;
text-align: center;
font-size: 0.7em;
}
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
display: flex;
flex-direction: column;
}
/* Form */
/* Style inputs, select elements and text areas */
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
/* Style the label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
/* Style the submit button */
input[type=submit] {
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
/* Style the container */
.container_form{
border-radius: 5px;
background-color: white;
padding: 20px;
margin: 5em;
height: max-content;
}
/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-15 {
float: left;
width: 15%;
margin-top: 6px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}
.col-3 {
float: left;
width: 3%;
margin-top: 6px;
}
.col-5 {
float: left;
width: 5%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.row {
padding: 5px;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.container_form{
border-radius: 5px;
background-color: white;
padding: 20px;
margin: 2em;
}
.col-25, .col-75, .col-15,.col-50,.col-3,.col-5, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
CodePudding user response：
The Only Thing That You Need To Do Is To Change height: 100vh; To min-height: 100vh; In The .hero {...} :
/* Hero Box */
.hero {
min-height: 100vh;
width: auto;
}
CodePudding user response：
You have a Typo .There is a closing div Tag before the footer Tag which makes the footer nolonger part of the hero div so it misbehaves. Try deleting that closing div tag and executing your code again!
CodePudding user response：
I Have changed some CSS values and have left some comments there
/* Nav Bar */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
background-size: cover;
}
.hero {
width: 100%;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color:white;
padding: 2em;
text-decoration: none;
}
.logo {
font-size: 1.5rem;
margin: .5rem;
color: yellow;
}
.logo li{
text-decoration: none;
}
.logo li a{
text-decoration: none;
}
.navbar_links ul{
margin: 0;
padding: 0;
display: flex;
}
.navbar_links li {
list-style: none;
}
.navbar_links li a {
text-decoration: none;
color: white;
padding:1rem;
display: block;
}
.navbar_links li a:hover {
text-decoration-line: line-through;
text-decoration-thickness: 5px;
text-decoration-color: yellow;
color: yellow;
}
/* Cant figure out why my links wont change color...HUGE L. */
.navbar_links li a:active {
text-decoration: line-through;
text-decoration-color: yellow;
color: yellow;
}
.toggle_button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle_button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.navbar_links li:nth-child(3) {
border-radius: 10px;
border-style: solid;
padding: .1em;
border-color: yellow;
}
.navbar_links li:nth-child(3):hover {
background-color: rgba(171,102,255,1);
}
@media (max-width: 810px) {
.toggle_button {
display: flex;
}
.navbar_links {
display: none;
width: none;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar ul{
width: 100%;
flex-direction: column;
}
.navbar_links li{
text-align: center
}
.navbar_links li a{
padding: .5rem 1rem;
}
.navbar_links.active {
display: flex;
}
}
/* Hero Box */
.hero{
/* height: 100vh; */ /* It was taking the whole width of your screen height , always set heights according to parent element. :) */
width: auto;
position:relative
}
/* Hero Section */
.hero_section {
display: flex;
}
.hero_text {
flex: 50%;
color: white;
padding: 5em;
}
.hero_text h1{
color: yellow;
}
.hero_img img{
flex: 50%;
padding: 5em;
width: 100%;
height: auto;
}
@media (max-width: 810px) {
.hero_section {
width: 100%;
content: "";
display: table;
clear: both;
}
.hero_text {
padding: 2em;
}
}
@media (max-width: 1104px) {
.hero{
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
height: 100vh;
}
.hero_img {
display: none;
}
}
@media (max-width: 492px) {
/* White space shown when browser is too tall. */
.hero {
height: 150vh;
}
.navbar_links {
display: none;
width: none;
}
.footbar {
flex-direction: column;
align-items: flex-start;
}
.footbar ul{
width: 100%;
flex-direction: column;
}
.footbar_links li{
text-align: right
}
.footbar_links li a{
padding: .5rem 1rem;
}
.footbar_links.active {
display: flex;
}
}
/* Footer */
.footbar {
display: flex;
justify-content: space-between;
align-items: center;
color:white;
padding-right: 2em;
resize: 10%;
position: absolute;
}
.footbar_links ul{
margin: 0;
padding: 0;
display: flex;
}
.footbar_links li {
list-style: none;
}
.footbar_links li a {
text-decoration: none;
color: white;
padding:1rem;
display: block;
}
.footbar_links li a:hover {
text-decoration-line: line-through;
text-decoration-thickness: 5px;
text-decoration-color: yellow;
}
.footbar_links li a:active {
text-decoration-line: line-through;
text-decoration-thickness: 5px;
text-decoration-color: yellow;
color: yellow;
}
/* Card Section - For Resume and Form Site */
h3 {
display: block;
margin-left: 2em;
margin-right: 2em;
color: white;
font-weight: bold;
}
.site_section{
display: flex;
align-items: center;
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 300px;
height: 300px;
border-radius: 5px;
margin: 5px;
text-align: center;
}
@media screen and (max-width: 600px) {
h4 {
font-size: 1em;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 300px;
height: 300px;
border-radius: 5px;
margin: 5px;
text-align: center;
font-size: 0.7em;
}
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
display: flex;
flex-direction: column;
}
/* Form */
/* Style inputs, select elements and text areas */
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
/* Style the label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
/* Style the submit button */
input[type=submit] {
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(171,102,255,1) 0%, rgba(116,182,247,1) 90% );
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
/* Style the container */
.container_form{
border-radius: 5px;
background-color: white;
padding: 20px;
height: max-content;
width: 90%; /* please do not add margin on a 100% width to center */
margin: 0 auto; /* this is the way :) */
}
/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-15 {
float: left;
width: 15%;
margin-top: 6px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}
.col-3 {
float: left;
width: 3%;
margin-top: 6px;
}
.col-5 {
float: left;
width: 5%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.row {
padding: 5px;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.container_form{
border-radius: 5px;
background-color: white;
padding: 20px;
margin: 2em;
}
.col-25, .col-75, .col-15,.col-50,.col-3,.col-5, input[type=submit] {
width: 100%;
margin-top: 0;
}
} strong text