Issue with Footer Alignment - Adjusting Footer Placement to Align with Content

I have been working on a website and I have successfully added a footer that appears just below the content of each page. However, I am facing an issue where the footer overlaps the photos in a slider instead of appearing below them. I would like some advice on how to properly position the footer just below the photo slider.

Here is my code:

<!DOCTYPE html>
<html lang="en">     
    
<body style="background-color: white;">
      
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
      
<div class="page-wrap">
     
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
...

If you would like to view the current footer position or see the desired design, please click on the following links: Current Footer Position Desired Design

htmlcsssliderfooterphoto

Answer №1

I encountered an issue with the footer and solved it by adding some photos to test my solution. I have now successfully fixed the footer, ensuring that it remains at the bottom of the page. Feel free to check it out below:

<!DOCTYPE html>
<html lang="en; jp;">
  <body style="background-color: white">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <div class="page-wrap">
      ... (omitted for brevity) ...
        }
      </ul>
    </nav>
  </header>

  <div class="setsumei">
    <br />
    <h1 style="text-align: center; font-size: 40px">◯◯◯◯</h1>
    <br />
    <p style="text-align: justify; font-size: 16px"></p>

    <p style="text-align: center; font-size: 13px">著者：◯◯◯◯</p>
    <p style="text-align: center; font-size: 13px">
      撮影日：◯◯◯年◯◯月◯◯日
    </p>

    <br />
    <ul class="slider_fade">
      ... (omitted for brevity) ...
    </ul>
  </div>
</div>

<br /><br />
<footer class="site-footer" style="font-size: 12px">
  小泉© 2020年 | <a href="#">English</a>
</footer>
</div>

<style>
  ... (styles omitted for brevity) ...
</style>
</body>
</html>
https://i.sstatic.net/zj4XM.jpg

Answer №2

     <!DOCTYPE html>
    <html lang="en; jp;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <head>
        <style>
         footer {
            text-align: center;
            border-top: 1px solid black;
            padding: 10px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin-bottom: 0px;
            position: fixed;
            width: 100%;
            height: 50px;
            margin-top: -50px;
            z-index: 10;
            background-color: white;
            }
            .center {
             display: block;
             margin-left: auto;
            margin-right: auto;
            width: 50%;
            }
            .searchbar{float: right;}
            .image{text-align: center;}
            .setsumei{margin-left: 20px;
                margin-right: 20px;}
            .page-wrap {
                min-height: 100%;
                /* equal to footer height */
                margin-bottom: -40px;
            }
            .page-wrap:after {
                content: "";
                display: block;
            }
        
            .slider_fade {
                text-align: center;
                position: relative;
                z-index: 1;
            }
            .slider_fade > li {
                position: absolute;
                list-style: none;
                visibility: hidden;
                animation: anime_slider_fade 25s 0s infinite;
            }
            .slider_fade > li:nth-of-type(2) {
                animation-delay: 6s;
            }
            .slider_fade > li:nth-of-type(3) {
                animation-delay: 15s;
            }
            @keyframes anime_slider_fade {
                0% {
                    visibility: visible;
                    opacity: 0;
                }
                15% {
                    opacity: 1;
                }
                33.3% {
                    opacity: 1;
                }
                48.3% {
                    opacity: 0;
                }
                100% {
                    opacity: 0;
                }
            }
            *, *:before, *:after {
                padding-left: 0;
                margin: 0;
                box-sizing: border-box;
            }
            ol, ul {
                list-style: none;
            }
            a {
                text-decoration: none;
                color: black;
            }
            .cp_cont {
                height: auto;
            }
            /* menu */
            .cp_offcm03 {
                position: relative;
                z-index: 5000;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: auto;
                padding-top: 0;
                -webkit-transition: transform 0.3s ease-in;
                transition: transform 0.3s ease-in;
                text-align: center;
                color: black;
                background-color: white;
            }
            .cp_offcm03 nav,
            .cp_offcm03 ul {
                height: 100%;
            }
            .cp_offcm03 li {
                display: inline-block;
                margin-right: -6px;
            }
            .cp_offcm03 a {
                display: block;
                padding: 15px 45px;
                margin-bottom: -5px;
                -webkit-transition: background-color .3s ease-in;
                transition: background-color .3s ease-in;
            }
            .cp_offcm03 a:hover {
                background-color: lightgray;
            }

            /* menu toggle */
            #cp_toggle03 {
                display: none;
            }
            #cp_toggle03:checked ~ .cp_offcm03 {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            #cp_toggle03:checked ~ .cp_container {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            .cp_mobilebar {
                display: none;
            }
            /* content */
            .cp_container {
                position: relative;
                top: 0;
                padding: 35px auto;
                -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
            }
            .cp_content {
                margin: 0 auto;
                padding: 20px;
                height: 65vh;
                text-align: center;
            }
            @media (max-width: 1050px)and (min-width: 480px) {
                /* Styles for responsive design */
            }
    
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6" s>
            <div style="background-color: white;">

            <!-- Content goes here -->

            </div>
        </div> 
    </div>
</div>
<footer style="font-size: 12px;">
    <p>小泉© 2020年 |</p><a href="#">English</a>
</footer>

</body>


</html>

<script type="text/javascript">
    document.getElementById('frmSearch').onsubmit = function() {
        window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
        return false;
    }

    document.getElementById('cp_toggle03').onchange = function() {
        if (document.getElementById('cp_toggle03').checked) {
            document.body.style.overflow = "hidden";
        } else {
            document.body.style.overflow = "";
        }
    }

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for the website allowing me to scroll towards the right?

I'm encountering a strange issue with my code that I can't seem to figure out. The website keeps letting me scroll to the right as if there's an image or something off-screen, even though there isn't anything there. Any idea why this is ...

htmlcss

Having trouble transferring a variable from getJSON data to PHP

I am encountering an issue with my jQuery getJSON method when trying to pass data to PHP. Strangely, I am unable to pass a variable. In another part of my code, passing the variable works fine. Additionally, hardcoding the string or using a valid variable ...

jqueryhtmljson

show tab focus outline only

In search of a straightforward and effective method for focusable elements to display an outline only when the tab key is pressed, without showing it when using a mouse in React applications. (looking for something similar to :focus-visible that function ...

javascriptcssreactjs

Concealing information using a zero value

Is there a way to conceal an HTML field if it displays a value of "0"? I manage an e-commerce site that shows the Quantity available with numeric values. I only want the number to be visible if it is greater than "0". The values are pulled from a database ...

htmlcss

Minimize the gap between buttons and images

Is there a way to reduce the spacing between the "upload picture" button and the "images" square boxes? Take a look here Currently, it looks like this: https://i.sstatic.net/dkpya.png I would like it to look like this: https://i.sstatic.net/i8XMQ.png ...

htmlcss

Tips for removing the Y-Axis entirely from a CanavasJS chart

I'm working with a canvasJS chart and my goal is to completely hide the Y-Axis. I've managed to remove the Y-Axis line and title in this JSFiddle example. I came across these properties to hide the Y-Axis title and line, but I'm struggling t ...

javascripthtmltypescriptjsfiddlecanvasjs

Problems arise when trying to integrate a CSS menu with a rotating XML banner

I tested the Nvidea CSS drop down menu on a website featuring an XML Flash rotating banner. It worked fine on Opera, but unfortunately did not function properly on Internet Explorer and Google Chrome as it appeared behind other elements. Download the menu ...

cssmenuslider

Changing Images with Button Click in Javascript

I am facing an issue with my buttons that should swap images once clicked. The first two buttons work perfectly, but for the third and fourth buttons, the images do not disappear when clicking another button. Below is the current code in the document head ...

javascripthtmlimagebutton

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

htmlcsspure-css

Steps for making a toggle button that switches panels

Within my application, there are 2 toggle buttons and 3 panels. Button1 toggles between panel 1 and 2, while button2 switches between panel 1 and 3. I managed to make them work by setting the display: none; property to div panels, but after one use of each ...

javascriptjqueryhtmlcss

Is there a way to modify the color of a div element on one webpage from a different webpage?

As I continue to learn about utilizing the localStorage and cookie techniques, I am currently experimenting with changing the color of a div element on page1.html from page2.html upon clicking a submit button. The goal is for this color change to be perman ...

javascriptjqueryhtml

What is the best way to apply CSS styles conditionally in AngularJS?

Q1. What is the most effective method to modify the appearance of each selected "item" by a user, before pressing the main "delete" button? The aim is to provide immediate visual feedback to eliminate the need for a confirmation dialog box. Users will mark ...

cssangularjs

How to use Javascript to pause an HTML5 video when closed

I am new to coding and currently working on a project in Adobe Edge Animate. I have managed to create a return button that allows users to close out of a video and go back to the main menu. However, I am facing an issue where the video audio continues to p ...

javascripthtmlvideoadobe-edge

Connecting background pictures

My issue involves linking a CSS background image to the site index. I have attempted to link it using the following code: #header-bg { background-image: url("./styles/duffcraft/theme/images/bg_header.png"); } Then using: <a href="./" id="header-b ...

htmlcss

Show links in the sidebar menu when the primary navigation links are hovered over

I am trying to create a dynamic side menu that displays different links depending on which link is hovered over in the top navigation bar. Here is what I have so far: HTML: <ul class="nav navbar-nav"> <li class="nav"><a class="toggle" hr ...

javascriptjqueryhtmlcss

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

javascripthtmlrweb-scrapingrvest

The CSS division is perplexingly dimensionless

As I work on finalizing a client's webpage, I encountered an issue with applying vertical padding to one of the div elements. Upon inspecting the element using Chrome's dev tools, I found that it had "NaN x NaN" dimensions. This prevented me from ...

htmlcsstwitter-bootstrap

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

javascripthtmlcsswordpressheader

Observing multiple bindings within a dropdown and updating them in Vue when they change

Currently, I am in need of a lookup dropdown that allows me to monitor multiple data changes. In my HTML file, the code snippet looks like this: <input list="allUsernames" type="text" v-model="selectedUser"> <datalist ...

javascripthtmlvue.jsvuejs2vue-component

Double the names in a single <input>

Is it possible to assign two different names within a single input tag, like this: <input type='text' name='food' name='user_search_input'>? In my PHP file, I intend to use the input in two separate "if" clauses - one fo ...

javascriptphphtmlmysql