What are the steps to repairing the footer on your website?

Question

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference:



    <footer>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>

         </footer>
    css code:   
  footer{

    width: 100%;
    height: 150px;
      background: black;
      display:grid;
      grid-template-columns: repeat(5, auto);
      clear: both;

  }
  li {
      float: left;
  }
  footer li a{
      display: block;
      line-height: 1.5;
  }

html css

Answer 1

Answer №1

Simply adhere to these instructions in order to achieve the desired outcome.

<header> should be closed after the nav
Reposition the comment box below the iframe element
Ensure proper alignment of spacing, width, height, and grid utilization

You can access the fiddle here.

var disqus_config = function() {
    this.page.url = 'http://example.com/2017/08/02/postid=998'; // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = '/2017/08/02/postid=998'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document,
        s = d.createElement('script');
    s.src = 'https://coinspy.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

* {
    box-sizing: border-box;
    position: relative;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #161616;
    box-sizing: border-box;
    width: 100%;
}

nav {
    background: white;
    height: 100px;
    width: 100%;
}

nav ul {
    padding: 30px 0 0;
}

ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 1
}

ul li {
    float: left;
}

ul li a {
    font-style: 1.5em;
    display: block;
    padding: 1px 20px;
}

nav > img {
    width: 80px;
    position: absolute;
    right: 10px;
    top: 8px;
}

.section1 {
    margin-top: 10px;
    width: 100%;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 3px;
    grid-column-gap: auto;
    justify-content: center;
    justify-items: center;
}

.iframe1 {
    border: 1px solid black;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0px;
    margin-bottom: 1px;
    max-width: 640px;
}

.container1 {
    display: grid;
    grid-template-columns: repeat(2, auto);
    height: 300px;
    width: 100%;
}

.box1 {
    width: 300px;
    height: 300px;
    background: red;
    padding: 50px 15px;
    box-sizing: border-box;
}

.box2 {
    width: 300px;
    height: 300px;
    background: red;
}

.box3 {
    width: 300px;
    height: 300px;
    background: red;
}

.side1 {
    width: 180px;
    float: left;
    position: sticky;
    top: 0;
}

side2 {
    width: 180px;
    float: right;
    position: sticky;
    top: 0;
    background-color: blue;
}

footer {
    width: 100%;
    height: 150px;
    background: black;
    display: grid;
    grid-template-columns: repeat(5, auto);
    clear: both;
    text-align: center;
}

footer li {
    float: left;
}

footer li a {
    display: block;
    line-height: 1.5;
}

section2 {
    max-width: 640px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.disqus_thread {
    width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <nav>
        <img src="https://brandmark.io/logo-rank/random/pepsi.png" alt="logo">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Menu</a></li>
        </ul>
    </nav>
</header>
<section class="section1">
    <div class="box box1">
        <iframe width="250px" height="200px" src="https://www.youtube.com/embed/cKGPrOLIt7M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="box box2"></div>
    <div class="box box3"></div>

</section>
<hr>
<div class="iframe1">
    <iframe SRC="https://www.mp4upload.com/embed-nbyvbffoyerp.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=640 HEIGHT=250 allowfullscreen></iframe>
</div>
<section class="section2">
    <div id="disqus_thread"></div>

    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

</section>
<div class="container1">
    <img class="side1" src="https://via.placeholder.com/1536x2408" alt="">

    <img class="side2" src="https://via.placeholder.com/1536x2408" alt="">
</div>

<footer>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>

</footer>

Answer 2

Simply adhere to these instructions in order to achieve the desired outcome.

<header> should be closed after the nav
Reposition the comment box below the iframe element
Ensure proper alignment of spacing, width, height, and grid utilization

You can access the fiddle here.

var disqus_config = function() {
    this.page.url = 'http://example.com/2017/08/02/postid=998'; // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = '/2017/08/02/postid=998'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document,
        s = d.createElement('script');
    s.src = 'https://coinspy.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

* {
    box-sizing: border-box;
    position: relative;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #161616;
    box-sizing: border-box;
    width: 100%;
}

nav {
    background: white;
    height: 100px;
    width: 100%;
}

nav ul {
    padding: 30px 0 0;
}

ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 1
}

ul li {
    float: left;
}

ul li a {
    font-style: 1.5em;
    display: block;
    padding: 1px 20px;
}

nav > img {
    width: 80px;
    position: absolute;
    right: 10px;
    top: 8px;
}

.section1 {
    margin-top: 10px;
    width: 100%;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 3px;
    grid-column-gap: auto;
    justify-content: center;
    justify-items: center;
}

.iframe1 {
    border: 1px solid black;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0px;
    margin-bottom: 1px;
    max-width: 640px;
}

.container1 {
    display: grid;
    grid-template-columns: repeat(2, auto);
    height: 300px;
    width: 100%;
}

.box1 {
    width: 300px;
    height: 300px;
    background: red;
    padding: 50px 15px;
    box-sizing: border-box;
}

.box2 {
    width: 300px;
    height: 300px;
    background: red;
}

.box3 {
    width: 300px;
    height: 300px;
    background: red;
}

.side1 {
    width: 180px;
    float: left;
    position: sticky;
    top: 0;
}

side2 {
    width: 180px;
    float: right;
    position: sticky;
    top: 0;
    background-color: blue;
}

footer {
    width: 100%;
    height: 150px;
    background: black;
    display: grid;
    grid-template-columns: repeat(5, auto);
    clear: both;
    text-align: center;
}

footer li {
    float: left;
}

footer li a {
    display: block;
    line-height: 1.5;
}

section2 {
    max-width: 640px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.disqus_thread {
    width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <nav>
        <img src="https://brandmark.io/logo-rank/random/pepsi.png" alt="logo">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Menu</a></li>
        </ul>
    </nav>
</header>
<section class="section1">
    <div class="box box1">
        <iframe width="250px" height="200px" src="https://www.youtube.com/embed/cKGPrOLIt7M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="box box2"></div>
    <div class="box box3"></div>

</section>
<hr>
<div class="iframe1">
    <iframe SRC="https://www.mp4upload.com/embed-nbyvbffoyerp.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=640 HEIGHT=250 allowfullscreen></iframe>
</div>
<section class="section2">
    <div id="disqus_thread"></div>

    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

</section>
<div class="container1">
    <img class="side1" src="https://via.placeholder.com/1536x2408" alt="">

    <img class="side2" src="https://via.placeholder.com/1536x2408" alt="">
</div>

<footer>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>

</footer>

What are the steps to repairing the footer on your website?

Answer №1

Similar questions

Easily automate button clicks on a new tab website

splitting up the lengthy list into manageable chunks according to the screen dimensions

Fixing the mobile display issue with react-responsive-carousel

Implement jQuery to dynamically assign an "Active" class to tab elements based on the current page being loaded

Directly within Angular, map the JSON data to an object for easy assignment

Exploring Angular2's ability to interpret directive templates using the ng-container

406 error is triggered by GET parameters

Python script unable to locate div popup using Selenium

How to Show an Image in a Search Bar Using HTML

Iterate through each image within a specific div element and showcase the images with a blur effect applied

Issue with manipulating background color with JQuery in CSS

Steps for positioning a logo to the left and navigation to the right with HTML and CSS

The issue of the back button not functioning in the React Multi-level push menu SCSS has

Adding turbolinks to an HTML document can be achieved without the need for a

Adjust the size of the font based on the screen resolution

Creating a responsive HTML, CSS, and JavaScript popup: A step-by-step guide

What is the best way to widen each tab so they fill up the entire width of the content block?

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Is it possible to resize a Div using pure CSS?

Just dipping my toes into Django/Python and feeling completely bewildered by why my webpages won't connect