Having trouble viewing the footer because I can't scroll down

Hey there! I'm a first-year student from the Netherlands studying ICT&Media Design, and currently tackling projects involving HTML/CSS/JavaScript.

As I was working on my personal page to practice with these languages, I encountered some issues.

I'm having trouble scrolling down to view the footer on my pages. I suspect it has something to do with fixed positioning, but I can't seem to pinpoint the exact problem.

I would greatly appreciate your help in troubleshooting this issue, as there may be other misalignments as well.

Thank you in advance for any assistance provided.

Check out my work on the school's server here

javascripthtmlcss

Answer №1

It seems like your footer is not showing up on the page due to unnecessary use of positions in your CSS code. Simply remove all instances of position:fixed and position:absolute from your stylesheet, and your page will become scrollable, allowing you to view your footer as intended.

Below is the updated CSS with all position properties commented out, indicating that they are no longer needed:

#header {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    /* position: relative; */ 
    width: 100%;
}

#menubar {
    background-color: #2C2C2D;
    border: 1px solid #FFFFFF;
    height: 51px;
    line-height: 20px;
    margin: 261px auto 0; /* position: absolute; */ 
    text-align: center;
    vertical-align: middle;
    width: 1280px;
}
#containerIndex {
    background-color: #FFFFFF;
    height: 530px;
    margin-top: 330px;
    opacity: 0.5;
    /* position: fixed; */ 
    width: 1280px;
}
#footer {
    background-color: #C6C7C0;
    border: 1px solid #FFFFFF;
    height: 48px;
    line-height: 50px;
    margin: 880px auto 10px; /* position: fixed; */
    text-align: center;
    vertical-align: middle;
    width: 1280px;
}

Answer №2

The footer on your website is currently fixed in position and appearing behind the content. To allow users to scroll down to see the footer, consider removing the fixed positioning.

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 we effectively share code between server-side and client-side in Isomorphic ReactJS applications?

For a small test, I am using express.js and react.js. Below you can find my react code: views/Todo.jsx, var React = require('react'); var TodoApp = React.createClass({ getInitialState: function() { return { counter: 0 ...

javascriptnode.jsexpressreactjsisomorphic

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

javascripthtml

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

androidhtmlioscssfont-size

Restricting the movement of the mouse event

Is there a way to restrict the mousemove event to a specific area, such as a div located in the center of the page? Thank you in advance if (window.innerWidth > 765) if (matchMedia('(pointer:fine)').matches) $(document).ready(function() { $ ...

javascriptjquerymousemove

Choose the field and set the default value

In my current project, I have a page dedicated to listing all categories with links to individual category pages for modification purposes. On the category page, I want to include a Select field for the Category Name, displaying all preset categories with ...

phphtmlsqlarraysmysqli

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

I'm currently working on capturing the event triggered when the mouse hovers over a select box, regardless of whether it's collapsed or expanded. My approach involves using .on() in the following manner: $(document).on('hover', "select ...

javascriptjqueryhtml

Utilizing multiple components onEnter with React-router for authentication scenarios

I am currently working on an app that consists of 2 components for a single path. The routes are as follows: <Router history={hashHistory}> <Route path="/" component={AppContainer} onEnter={requireEnter}> <Route path="/homepage" ...

javascriptreactjsreduxreact-routerflux

Revise iconic titles [vue-chart.js]

I am working on rendering a Doughnut chart using vue-chart.js. My goal is to edit only the legend labels so that if I have a 'very long string,' it will display as 'very lo...' in the legend, while still showing the full labels on hover ...

javascriptvue.jschart.jsvue-chartjs

Is there a way for me to redirect back to the original path?

Whenever I utilize <Redirect to="<same_path>" />, a warning pops up: Warning: You tried to redirect to the same route you're currently on: "<path>". In one of my Components, I trigger another Component that prompts for either submis ...

javascriptreactjsreact-router

Can you explain what findDOMNode is and why it is no longer supported in StrictMode within the console?

I attempted to create a count-up feature using React visibility sensor and React count up, but encountered an error in the console. Is there a correct solution to this issue? Caution: The use of findDOMNode is deprecated in StrictMode. This method was uti ...

javascriptreactjs

The XMLHttpRequest's readystate gets stuck at 1 stage

Feeling a bit out of practice here - used to work with AJAX directly, but then spent a few years on a jQuery site and now my native JS skills are rusty. I've simplified my code as much as possible, but it's still not functioning: var rawfile = ...

javascriptajax

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...

javascripthtmljquerycss

Displaying or concealing dropdown menus based on a selected option

My goal is to have a drop-down menu in which selecting an option triggers the display of another drop-down menu. For example, if I have options like "Vancouver," "Singapore," and "New York," selecting Vancouver will reveal a second set of options, while ch ...

javascriptphphtmlcss

Searching for images in the filesystem using a recursive deferred approach

I've been attempting to iterate through the Android file system in search of any images. I created the following recursive method, but it's not functioning as expected. I've been struggling to determine a condition that can identify the end ...

javascriptandroidangularjsrecursiondeferred

What is the best way to combine two parameters using href?

I am having an issue with my kendo grid. I am trying to pass two parameters from the client side using an anchor tag and href, but I keep getting a syntax error. Can someone help me figure out the correct way to pass variables using href? Here is my confi ...

javascriptangularjs

Is it possible to create various HTML elements from JSON data using JQuery?

Is there a way to utilize Jquery and Javascript to extract JSON data from $ajax and then iterate through it using a foreach loop, in order to create a string that can be appended to the HTML DOM? For example: $(document).ready(function (e) { $.ajax({ ...

javascripthtmljquery

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

htmlcssmargin

Concluding remarks can be found at the end of the article

Is there a way to keep text aligned next to an image without it dropping down and disrupting the layout of the article? * { margin: 0; box-sizing: border-box; } * a:link { text-decoration: none; ...

htmlcss

Utilizing MongoDB for data transfers: uploading and downloading

I successfully configured my localhost to upload files to Mongo DB using server.js //I have configured my ID and PW const mongoURI = "mongodb+srv://myID:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cfdbf2f5e2c1ced7d1 ...

javascripthtmlmongodb

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

javascripthtmlcsssvg