"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

"Reposition all elements contained within a div that have a specific class

PHP function array_sum returns the sum of all values in an array rather than displaying each number

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

A step-by-step guide to incorporating expandable and collapsible images within a div element using X

The range filter is exclusive to the initial controller

Creating responsive images using Bootstrap CSS framework

Struggling to align nested grids in the center

Tips for Resizing google reCAPTCHA

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

Align your content in the center of any browser

Beginning of my initial endeavor (seeking feedback, general advice, criticism)

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

The find element will yield an empty result when using XPath contains with Text() method

How to target the following sibling element (not a child) with CSS

Ways to implement div on hover in my table's td cells

Position of fixed div set relative to its parent fixed div

Sliding Image Menu using jQuery

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

Unveiling concealed content with JQuery

Utilize CSS to incorporate special characters as list markers