"I can't figure out why my footer keeps showing up at the top of the page unexpectedly

Question

"I can't figure out why my footer keeps showing up at the top of the page unexpectedly

Currently, my footer is showing up at the top of the page but I really want it to be at the bottom. I'm new to HTML so apologies if this is a simple fix.

Here is my file with internal CSS:

.middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
}

<body>
  <main>
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" class="middle"></a>
  </main>
  <footer>
    <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
  </footer>
</body>

html css footer

Answer 1

Answer №1

The element is currently positioned within the .middle class using a fixed position, causing it to appear on top of all other elements. To allow for changes in this behavior, try adjusting the position property to relative or another option aside from fixed.

Answer 2

The element is currently positioned within the .middle class using a fixed position, causing it to appear on top of all other elements. To allow for changes in this behavior, try adjusting the position property to relative or another option aside from fixed.

Answer 3

Answer №2

Utilizing the position attribute allows you to control the placement of elements. In this instance, I employed a fixed position to keep the footer at the bottom, and utilized the inset property for a more concise way of adjusting the top, right, bottom, and left properties. For further information on positions and how to effectively utilize them, refer to this resource.

.middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
  position: fixed;
  inset: auto 0 0 0;
}

<body>
  <main>
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" class="middle"></a>
  </main>
  <footer>
    <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
  </footer>
</body>

Answer 4

Utilizing the position attribute allows you to control the placement of elements. In this instance, I employed a fixed position to keep the footer at the bottom, and utilized the inset property for a more concise way of adjusting the top, right, bottom, and left properties. For further information on positions and how to effectively utilize them, refer to this resource.

.middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
  position: fixed;
  inset: auto 0 0 0;
}

<body>
  <main>
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" class="middle"></a>
  </main>
  <footer>
    <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
  </footer>
</body>

Answer 5

Answer №3

I adjusted the footer with position: fixed, bottom: 0, left: 0, and width: 100% along with adding some sample background images. I also placed the footer inside a div, resulting in the following design. Hopefully, it meets your requirements.

<!DOCTYPE html>
<html>

<head>
    <title>title</title>
    <style>
        .middle {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        body {
            background-image: url("https://picsum.photos/id/235/200/300");
            background-size: cover;
            background-position: center center;
        }

        .footer {
            background-color: black;
            color: white;
            position: fixed;
            bottom: 0;
            left: 0; 
            width: 100%;
        }
    </style>
</head>

<body>
    
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://picsum.photos/200/300.jpg"
                class="middle"></a>
  
    <div class="footer">
        <p> This website is under construction<br>Copyright &copy; 2022 example.</p>
    </div>
</body>

</html>

Answer 6

I adjusted the footer with position: fixed, bottom: 0, left: 0, and width: 100% along with adding some sample background images. I also placed the footer inside a div, resulting in the following design. Hopefully, it meets your requirements.

<!DOCTYPE html>
<html>

<head>
    <title>title</title>
    <style>
        .middle {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        body {
            background-image: url("https://picsum.photos/id/235/200/300");
            background-size: cover;
            background-position: center center;
        }

        .footer {
            background-color: black;
            color: white;
            position: fixed;
            bottom: 0;
            left: 0; 
            width: 100%;
        }
    </style>
</head>

<body>
    
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://picsum.photos/200/300.jpg"
                class="middle"></a>
  
    <div class="footer">
        <p> This website is under construction<br>Copyright &copy; 2022 example.</p>
    </div>
</body>

</html>

Answer 7

Answer №4

Give this code a try - I have removed all the CSS from the .middle class, which will center the image and position the footer beneath it. It's important to note that using a fixed position for the footer may not be ideal as it will always stay at the bottom of the page. Consider making it static.

Upon reviewing your code, I noticed that the footer was overlapping everything because you set the image to a fixed position, causing content to flow underneath it. Think of the fixed position like two stacked boxes where sliding the bottom one away causes the top one to fall in its place. The bottom box with a fixed position stays in its spot regardless of scrolling, hence why it's called fixed. Remember, adding a fixed position raises the element up while other content flows beneath it.

.middle {
  display: block;
  margin: auto;
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
}

<body>
  <main>
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQytQQam75A2ZQMpeZ01oSraB9OHEvBqprjtw&usqp=CAU" class="middle"></a>
  </main>
  <footer>
    <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
  </footer>
</body>

Answer 8

Give this code a try - I have removed all the CSS from the .middle class, which will center the image and position the footer beneath it. It's important to note that using a fixed position for the footer may not be ideal as it will always stay at the bottom of the page. Consider making it static.

Upon reviewing your code, I noticed that the footer was overlapping everything because you set the image to a fixed position, causing content to flow underneath it. Think of the fixed position like two stacked boxes where sliding the bottom one away causes the top one to fall in its place. The bottom box with a fixed position stays in its spot regardless of scrolling, hence why it's called fixed. Remember, adding a fixed position raises the element up while other content flows beneath it.

.middle {
  display: block;
  margin: auto;
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
}

<body>
  <main>
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQytQQam75A2ZQMpeZ01oSraB9OHEvBqprjtw&usqp=CAU" class="middle"></a>
  </main>
  <footer>
    <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
  </footer>
</body>

"I can't figure out why my footer keeps showing up at the top of the page unexpectedly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to dynamically add a form to your website

Form submission causing page to reload, getElementById function fails to return value, rendering form ineffective

The outputstring encountered an issue with the HTML class

What could be causing my webpage content to be partially hidden by my CSS menu?

Experiencing difficulties with capturing the focus event of the <select> tag

Limited functionality: MVC 5, Ajax, and Jquery script runs once

Combining results and tallying occurrences

Struggling to perfect your CSS menu design?

Positioning the HTML form in the middle of the page

What is the best method for accessing a value in IndexedDB while utilizing service workers?

Adjustable div heights for text within inline elements

The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

Is it possible to target elements within a UMAP iframe using CSS?

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

Dropdown Box Internal Link Selector Code

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

Adding a translucent background image across the entire page in Angular: What's the best method?

Discover the ins and outs of the "DOM" within a string, treating it as HTML in AngularJS

Easy Steps to Align a Rotated Table Header

What is the best method for inserting space between two divs?