Just finished my first webpage - can't seem to get the footer to stay put!

After spending 3-4 months learning HTML and CSS, I am now working on my first web page. However, I'm facing an issue where the footer is stuck to the slideshow and I can't seem to figure out how to position it at the bottom of the page. Any tips or advice on errors you may find would be greatly appreciated.

index.html

<!DOCTYPE html>
<html lang="en-us" class="no-js">...

sshow.css

.mySlides {
    display: none;
}

.slideshow-container {...

css.css

html {
    box-sizing: border-box;...

I have noticed that removing 'position: relative' from sshow.css resolves the issue but causes buttons in the slideshow to disappear. I also attempted using the following css:

html {
    box-sizing: border-box;...

Any help is much appreciated. Thank you.

htmlcss

Answer №1

Consider closing the div tag before the footer in order to ensure proper structure. Please note that the footer is currently placed within the slideshow, but I have not yet tested the code.

Answer №2

Consider giving this a shot:

Here's the CSS code:

.footer {
    border-style: groove;
    border-width: 0px;
    border-top-width: 1px;
    border-top-color: white;
    background-color: black;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25px;
}

This will consistently display a footer at the bottom with a black background and narrow width above it. The height is set to 25px. Feel free to customize the styling of the footer in the CSS file. Don't forget that the position property has been set to fixed.

UPDATE: I haven't tested your code, so ensure that all div elements are closed properly.

Answer №3

To keep the footer element fixed in place, apply the CSS property position: fixed.

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

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

jqueryhtmlajaxformsfile

The div's coloring extends beyond the margins

My page is set at a width of 970px. Everything looks good, with the paragraph aligned within the margin. However, when I try to apply color, it extends outside the margin. <div class="container"> <header> <nav c ...

htmlcsstwitter-bootstrap-3margin

Showing error messages on HTML forms using PHP

Is there a way to show error messages in an HTML form using PHP variables that are populated with values from 'register-form_v2.php'? I am facing an issue where the variables I want to echo out in the form do not contain any values. Upon submitt ...

phphtmlforms

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

javascripthtml

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Setting aside the concerns surrounding allowing <script> content within a Web editor, I am fully aware of them. What I am interested in is permitting <style> and <script> elements within the text content. However, every time I attempt to ...

javascripthtmlcsstinymce

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Is it possible for individuals on the local network to view the webpage?

Recently, I developed a login page in HTML that prompts users for their username and password. The information is then sent to ABC.php, and upon successful authentication, they are redirected to another website. To make this work, I set up a xampp server. ...

phphtmlwebserver

What is the reason the .clearfix class fails to properly clear a floated element?

Check out this post: Understanding clearfix The most helpful response indicates that the clearfix should be applied directly to the last floating element: To incorporate a clearfix, you simply need to include HTML code: <div class="clearfix"> ...

htmlcssfloatingclearfix

Reduced resolution decreases image size significantly (bootstrap-5 Fluid)

What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additi ...

htmlcssbootstrap-4bootstrap-5

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The ...

javascriptjquerycsspre

Make sure to include !important for the hidden property when applying inline styles in React jsx

Is there a way to include !important in the hidden property within React JSX inline style? I'm attempting to conceal the scroll bar in an Ag Grid table component as it is displayed by default. I've already attempted: ref={(nod ...

javascriptcssreactjsstylesjsx

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

htmlcss

Quiz application features various button states for optimal user interaction

I am in the process of creating a quiz that resembles the popular BuzzFeed quizzes such as THIS ONE. Although I have mapped out the logic and have an idea of how to code it to function similarly to the one provided in the link, I am encountering issues wit ...

javascriptjquerycss

Encountering a 404 error in Flask when using a '?' in a redirect

After configuring a payment service on my Flask web app, I encountered an issue where the successful payment processing redirected me to a specific URL. However, upon reaching the URL, I received an error code 404. Strangely, when I removed the "?" from th ...

htmlpython-3.xflask

Developing a jsp page with interconnected drop down menus

I am looking to dynamically populate the options in a second drop-down based on the selection made in the first drop-down. For instance, if I have a first drop-down with options {India, South Africa, USA}, and I choose India, then the second drop-down shou ...

javascriptjqueryhtmlajax

Is it recommended to employ @media print for a webpage dedicated exclusively to printing purposes?

Imagine a scenario where I have a specific page featuring a print button. Clicking on this button redirects me to a separate page with the same content, optimized for printing purposes. Instead of using @media print directly on the original page due to n ...

htmlcssmedia-queries

Optimal ffmpeg configurations for encoding videos into mp4 and ogg formats for seamless playback on HTML5 platforms

Despite the buzz surrounding it, the HTML5 video tag is facing a minor issue. To ensure cross-browser compatibility, multiple video formats - like mp4 and ogg - need to be included for its use. Unfortunately, I couldn't find optimal settings for each ...

videohtmlffmpegmp4ogg

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

In my Vue 2 project, I encountered an issue with Bootstrap 5.3 when installed via NPM. My custom CSS stylesheet in the index.html file was not able to override Bootstrap's CSS. Interestingly, I faced no problems when using Bootstrap from a CDN. Addit ...

cssnpmvuejs2overridingbootstrap-5

The color of the progress bar in JS is not displaying properly

My work involves using jQuery to manipulate progress bars. The issue I am facing is defining standard colors that should be displayed on the progress bar based on the value received. Here is my code: var defaultSegmentColors = ['#FF6363', &ap ...

javascripthtmlcss