I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, but this problem is occurring on 2 out of the 3 pages.

Because it's over 2000 lines long when combined, I've uploaded the pages onto PasteBin rather than posting all the code here:

1 - https://pastebin.com/9ds87Jft

2 - https://pastebin.com/SMtkFVzR

<!-- Start of Code -->
<!DOCtype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pop Stop — New Zealands Best Range of Pop Vinyl!</title>
    <!-- Start of Styling -->
    ...
    <!-- End of Code -->

Answer №1

First of all, I couldn't access the links you provided, which could be due to filtering or other restrictions. However, thank you for sharing some of your code so I can help answer the question.

Secondly, if this is a result of self-study, well done and keep up the good work. But if this is from a course, then the teacher should be held accountable!

My friend, avoid using positions for every element as it's usually unnecessary and can cause issues like these.

The main issue here is that you're pushing your elements offscreen, making them invisible but still present in the layout. You might see empty space on the screen and think it's actually empty, when it's not.

Since you mentioned you're learning web design, let me give you a lifesaving tip for your career: use positions only when absolutely necessary to maintain the natural flow of your page. Don't try to fit elements onto the screen like puzzle pieces or you'll encounter problems and struggle with responsiveness.

Specifically, use position absolute sparingly (position relative is much easier to work with). Use positions for overlapping elements, sticking one element to another, or keeping elements fixed on the viewport occasionally.

While there are more use cases for positions, it's best to avoid using them unless you have experience and know exactly when they're needed.

Also, remember that using large numeric values for margins, paddings, left, right, etc. (more than 100px) is usually a sign of error. Using over 500px indicates a significant mistake, and you should consider alternative solutions like float, flexbox, or grid layouts.

Best of luck!

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

Google's Chart Tools are showcased within a scrollable <Div> element, allowing for easy navigation and

I have been utilizing the table feature within Google Chart Tools to showcase data retrieved from a database. Upon displaying this grid inside a scrollable div, I noticed that the column headings are wrapping to multiple lines instead of displaying in a si ...

The identical web address functions as a point of reference for design, however it does not function as an AJAX request

This piece of code is functioning properly: {html} {head> {**link rel="stylesheet" href="http://localhost:3000/CSS/mystyle.css"**} {/head} {body} {/body} {/html} However, when I use the same URL in this ...

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

The menu in IE7 seems to have a mind of its own, appearing and

Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its paren ...

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

Is it not possible to collapse in webkit?

Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/ If you use the following HTML markup: <div>There should be no gap between us</div> <br /> <div>There should be no gap between us</div> along with ...

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

How can you execute PHP code within another PHP script without triggering a redirect?

I'm faced with a situation where I have two php files, namely abc.php and def.php. My goal is to only display abc.php in the browser URL bar when it executes. Additionally, upon clicking the submit button on my HTML page, abc.php should be triggered t ...

Creating a Javascript countdown timer that does not involve displaying the

I stumbled upon this code on a website, but there's one tweak I'd like to make. Unfortunately, I can't seem to figure it out myself, so I'm reaching out for some help. What I want to achieve is removing the year from the date so that th ...

Tips on deobfuscating Next.js HTML from online sources

I am faced with the task of reconstructing a website that I scraped from the internet using wget. It seems to be built on next js, based on the presence of the _next folder. Even though I have no experience with nextjs and do not understand its inner worki ...

I have the ability to shift text 50 pixels to the left

My navigation bar is currently aligned to the left, but I'm looking to move the text 50px from the left. Is there a way to achieve this? .navigation { width: 100%; height:35px; background-color: #f1b500; /*f2c255*/ margin-top: 4.4em; } .navig ...

Why is the toggle functioning properly?

After much trial and error, I finally got my toggle functionality working with the following code. I was surprised that toggling the width actually changed the display settings, but it did the trick! It's still a bit mysterious to me how it all works ...

Setting up bootstrap for PHP: A step-by-step guide

Struggling with integrating PHP and Bootstrap? I recently attempted to do the same, but unfortunately, my website doesn't seem to recognize Bootstrap. Instead of the sleek Bootstrap design, it's displaying a simple HTML layout. Here's a snip ...

Prevent the appearance of a scrollbar on a fixed-position popup element

Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...

Guide to modify target blank setting in Internet Explorer 8

<a href="brochure.pdf" target="_blank" >Click here to download the brochure as a PDF file</a> Unfortunately, using 'target blank' to open links in a new tab is not supported in Internet Explorer 8. Are there any alternative solutio ...

Is it feasible to transform HTML into EditorJS JSON format?

Is there a way to display an HTML string in editorJS? Show me from the following code example: <h1>The video src attribute</h1><video width="320" height="240" controls src="movie.ogg">Yourbrowser does not su ...

What are the various ways to incorporate material graphic elements on an HTML static webpage?

Currently, I am working on creating a static website that will be stored on CDs and USB sticks. This website serves as a manual for a specific product. I am considering using a graphic framework like Onsen UI, but I have found that I prefer Material UI. ...

Ruby Thin Server: An Unexpected ActionView Template Error

Encountering an issue when trying to deploy my project on Amazon Web Services and accessing the domain. ActionView::Template::Error (Command 'java -jar /home/ubuntu/.rvm/gems/ruby-2.1.10@silk/gems/yui-compressor-0.12.0/lib/yui/../yuicompressor-2.4.8 ...

Arranging links in a horizontal line (JSFiddle)

CodePen: https://codepen.io/example/abc123 I am attempting to align the elements "Favourite", "0", and "Reply" next to each other so they appear as: Favourite 0 Reply ...

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...