Hi there. I am having some trouble trying to create a footer that will stay at t

ID: 3741021 • Letter: H

Question

Hi there. I am having some trouble trying to create a footer that will stay at the bottom of the page, even if there is not enough content to push it to the bottom. Does anyone have any ideas on how to make it work? I have tried googling, but none of the suggestions I have found have work for me.

I have attached my HTML & CSS below.

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="scripts.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Login To Website</title>
</head>

<body>

<header>
<div class="headerwrapper">
<div class="wrapper">
<ul class="nav">
<li><a class="nav-link-left" href="">Home</a></li>
<li class="right-nav"><a class="nav-link-right" href="">Log In</a></li>
<li class="right-nav"><a class="nav-link-right" href="">Register</a></li>
</ul>
</div>
</div>
</header>

<h1>Login to Brisbane Wifi</h1>
<h5>Login to leave reviews for your favourite Brisbane hotspots.</h5>

<div class="login-border">
<p class="review-details rating-center">New User?</p>
<button type="submit" value="Submit" class="signupButton smaller-button" >Register</button><br>

</div>

<footer>
<div class="wrapper">
<div class="row">
<img src="images/wifiIcon.png" alt="Wifi Icon" class="footer-icon" >
</div>
<div class="row">
<div class="col-4">
<a class="footer-link-left" href="">Home</a>
</div>
<div class="col-4">
<a class="footer-link-center" href="">Sign Up</a>
</div>
<div class="col-4">
<a class="footer-link-right" href="">Log In</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom-bar">
<div class="wrapper">
<p class="footer-text">CAB230 - WEBCOMPUTING</p>
</div>
</div>
</footer>
</div>

</body>
</html>

AND THE CSS IS...

* {
box-sizing: border-box;
}

html, body {
padding:0;
margin:0;
}

body {
   background-color: #FFFFFF;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-size: 14px;
   min-width: 280px;
   box-sizing: border-box;
}

h1 {
   font-size: 20px;
   font-weight: 700;
   color: #72a3de;
   text-align: center;
}

h2 {
   font-size: 18px;
   font-weight: 700;
   color: #72a3de;
}

h3 {
font-size: 16px;
color: #3d5676;
}

h4 {
   font-size: 14px;
   font-weight: 700;
   color: #000000;

}

h5 {
   font-size: 12px;
   color: #3d5676;
   text-align: center;
}

h6 {
   font-size: 12px;
   font-weight: 700;
   color: #3d5676;
   text-decoration: underline;
}

p {
font-size: 14px;
color: #000000;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
   border: 1px solid red;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

header {
width:100%;
position: relative;
}

.headerwrapper {
background-color: #72a3de;
}

.wrapper {
   width:80%;
   margin-left: auto;
   margin-right: auto;
}

.nav-home {
   list-style-type: none;
   margin: 0px;
   padding: 30px;
}

.nav-home li{
display: inline;
}

.nav-home li.right-nav-home{
float:right;
}

.nav-home li a{
display: inline;
}

.nav-home a.nav-link-home-right {
   border-style: solid;
   border-width:2px;
   border-color: #ffffff;
   border-radius: 3px;
}

.nav-home a:hover.nav-link-home-right {
background-color: #ffffff;
color: #000000;
}

.nav-home a:hover.nav-link-home-left {
   border-bottom-style: solid;
   border-width: 4px;
   border-color: #ffffff;
}

.nav {
   list-style-type: none;
   margin: auto;
   padding: 30px;
   background-color: #72a3de;
}

.nav li{
display: inline;
}

.nav li a{
display: inline;
}

[class*="nav-link-"] {
   height: 40px;
   margin-left: 10px;
   margin-right: 10px;
   padding-top:8px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom:8px;
   text-align: center;
   font-size: 11pt;
   font-weight: bold;
   color: white;
   text-decoration:none;
}

.nav a.nav-link-right {
   border-style: solid;
   border-width:2px;
   border-color: #5b83b2;
   border-radius: 3px;
   background-color: #5b83b2;
}

.nav a:hover.nav-link-right {
background-color: #4b6b92;
border-color: #4b6b92;
}

.nav li.right-nav {
float:right;
}

.nav a:hover.nav-link-left {
   border-bottom-style: solid;
   border-width: 4px;
   border-color: #4b6b92;
}

#form-register {
   width: 100%;
   display: block;
   text-align: center;
}

[class*="formBox"] {
   border-radius: 5px;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-size: 14px;
   padding-left: 8px;
   margin:1%;
   line-height: 2em;
   border: 1px solid #cccccc;
}

.formBox {
width:92%;
}

.formBoxes {
   width: 46%;
   margin:auto;
}

.formSelect {
   width:92%;
   border-radius: 5px;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   font-size: 14px;
   padding-left: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   border: 1px solid #cccccc;
   margin:1%;
   color: #666666;
}

#genderOption {
   color: #666666;
   margin:1%;
}

#optionalGender {
   color: #666666;
   font-size: 12px;
   margin:1%;
}

.radioLabels {
color: #666666;
font-size: 12px;
}

.updates {
   color: #666666;
   padding-left: 5px;
   font-size: 12px;
}

.signupButton {
   width:92%;
   border-radius: 5px;
   font-size: 16px;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   margin:1%;
   color: #ffffff;
   background: linear-gradient(to bottom right, #5b83b2, #3d5676);
   font-weight: 700;
   height: 50px;
   border-color: transparent;
   box-shadow: 2px 2px 4px #cccccc;
   margin-bottom: 30px;
}

.signupButton:hover {
background: linear-gradient(to bottom right, #3d5676, #2b3e54);
}

.commsImage {
   height: 60%;
   width: 60%;
   display: block;
    margin-left: auto;
    margin-right: auto;
   margin-top: 145px;
   margin-bottom: 145px;
}

footer {
   background-color: #72a3de;
   padding-top: 20px;
   width:100%;
    bottom: 0;
}

.footer-icon {
   width: 5%;
   height: 5%;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

.footer-link-left {
text-align: right;
}

.footer-link-center {
text-align: center;
}

.footer-link-right {
text-align: left;
}

[class*="footer-link-"] {
   text-decoration:none;
   display: block;
   color: white;
   font-weight: 700;
   font-size: 15px;
}

[class*="footer-link-"]:hover {
text-decoration:underline;
color: #3d5676;
}

.footer-bottom-bar {
   background-color: #3d5676;
   bottom: 0;
   left:0;
}

.footer-text {
   padding: 5px;
   font-size: 12px;
   text-align: center;
   color: white;
}

.result-numbers {
font-size: 12px;
font-weight: 700;
}

.sort-right {
text-align: right;
}

.sort-text {
   font-size: 12px;
   font-weight: 700;
   display: inline-block;
}

#sort-by {
width: 40%;
display: inline-block;
}

.results-box {
   background-color: #f2f2f2;
   box-shadow: 1px 2px 4px #888888;
   margin-top: 20px;
   margin-bottom: 20px;
}

.excerpt {
   font-size: 12px;
   font-style: italic;
   font-weight: 100;
   color: #595959;
}

.excerpt-title {
font-size: 12px;
font-weight: 700;
}

.result-address {
font-weight: 100;
}

.results-rating {
text-align: center;
margin-top: 21px;
}

.results-margin {
margin-bottom: 10px;
}

.item-margins {
padding-top: 19px;
padding-bottom: 18px;
}

.results-border {
border-left: 1px solid #d9d9d9;
}

.center-map {
text-align:right;
}

.checked {
color: #FFD700;
}

.rating-center {
text-align: center;
}

.rating {
border: none;
display: inline-block;
}

.rating > input { display: none; }
.rating > label:before {
   margin: 5px;
   font-size: 1.2em;
   font-family: FontAwesome;
   display: inline-block;
   content: "005";
}

.rating > label {
color: #000000;
float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }

.review-button {
   width: 98%;
   font-size: 14px;
   height: 35px;
   margin-bottom: 6px;
}

.review-bottom-border {
border-bottom: 1px solid #d9d9d9;
}

.review-details {
   font-size: 13px;
   color: #808080;
   font-style: italic;
   font-weight: 100;
}

.login-border {
   border-top: 1px solid #d9d9d9;
   text-align: center;
   margin-top: 30px;
   margin-bottom: 40px;
   padding-top: 20px;
}

.smaller-button {
   width: 30%;
   font-size: 14px;
   height: 35px;
   margin-bottom: 6px;
}

.recieve-image {
   height: 50%;
   width: 50%;
   display: block;
    margin-left: auto;
    margin-right: auto;
   margin-top: 92px;
   margin-bottom: 92px;
}

@media only screen and (max-width: 1024px) {
    /* For tablets: */
    [class*="col-"] {
    width: 100%;
   }

   .commsImage {
       display: none;
   }

   .recieve-image {
       display: none;
   }

   [class*="footer-link-"] {
       text-align: center;
   }

   .result-numbers {
       text-align: center;
   }

   .sort-right{
       text-align: center;
   }

   .results-border {
       border-left: none;
       border-top: 1px solid #d9d9d9;
   }

   .hide-map {
       display:none;
   }
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }

   .footer-icon {
       width: 10%;
       height: 10%;
   }

   .wrapper {
       width: 90%;
   }

}

@media only screen and (max-width: 321px) {
   /* For mobile phones: Portrait*/
   .footer-icon {
       display: none;
   }

   .wrapper {
       width: 100%;
   }
}

Explanation / Answer

For Footer tag add some inline css, that will work definitely, like here

and Hence your Html file will contain :

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="scripts.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<title>Login To Website</title>
</head>

<body>

<h1>Login to Brisbane Wifi</h1>
<h5>Login to leave reviews for your favourite Brisbane hotspots.</h5>

<div class="login-border">
<p class="review-details rating-center">New User?</p>
<button type="submit" value="Submit" class="signupButton smaller-button" >Register</button><br>

</div>

</body>
</html>

and your css file will be same as earliar..

No other changes required,

Navigate

Hi there. Can you guys please solve both problems shown in the pictures within 2

Hi there. I found this problem challenging, If you could please help, I\'ll aprc

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Hi there. I am having some trouble trying to create a footer that will stay at t

Question

Explanation / Answer

Related Questions

Navigate