Member Avatar for christin_1

so if you go to my webiste here

you will notice under my Footer there is a big black section how to i get rid of that because its not in y html and i was wondering it might be in the css plz could someone look plz ;] my Css

Edited by christin_1
  • 6 Contributors
  • 5 Replies
  • 195 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by jrewing

Dani AI

Generated

A concise diagnosis and a simple, modern fix.

The visible black band is usually the page background showing because the footer or main content does not reach the bottom of the viewport, or because extra spacing on the footer pushes it up. was right to suggest using the browser devtools; and correctly flagged extra footer rules as a likely cause; and noted the page body is using a dark background. Combining those observations gives a reliable troubleshooting path.

Quick debug checklist (use DevTools / F12)

  • Inspect the footer and the body/html elements in the Elements panel. Look at the Computed styles: background-color, height/min-height, margin and padding.
  • Temporarily disable suspect rules (uncheck them in the Styles pane) to see immediate effect.
  • Search the stylesheet for global rules that set body background, or for large bottom padding/margin on the footer wrapper.
  • Verify there are no stray elements or pseudoelements after the footer and that the document has a valid DOCTYPE.

A modern, robust layout that keeps the footer at the bottom (flexbox)

html, body { height: 100%; margin: 0; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1 0 auto; }   /* page content expands */
footer { flex-shrink: 0; }  /* footer stays at bottom */

Notes and cautions

  • If the quick DevTools edits fix the problem, remove the offending rule from the stylesheet rather than patching around it.
  • For very old browsers without flexbox, fallback sticky-footer patterns still work but are more fragile.
  • Remove default body margins (margin: 0) before testing and make sure footer padding/margins are as intended.

This ties together the earlier replies: use DevTools to confirm which rule is causing the gap, remove the unnecessary footer spacing that others pointed out, or switch to the flexbox wrapper above for a clean, future-proof solution.

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

If you use the developer tools of your browser, you can easily see what's what.

Member Avatar for Galbatorix

Remove this two properties from your #footer

clear: left;
padding-bottom: 74px;

and you should have everything back to normal.

Member Avatar for JorgeM

I dont see any elements below your footer. It's black because you applied a background-color of #000000 (black) to your body element.

I assume you are asking about this because you want your footer to be placed at the bottom of your page?

If so, here is a summary on how to do that: Pushing a Footer to teh Bottom of a Web Page

If you provide a picture or layout of how you want the page to look like, better guidance can be provided to you.

Member Avatar for AARTI SHRIVAS

remove css

#Footer {
clear: left;
padding-bottom: 74px;
margin: 16px auto 0px auto;
}

this three property and you got what you want and also download firbug for mozilla and chrome so you can solve css problem

Member Avatar for jrewing

There is very little to view on the page you have linked too so it is not too clear just what layout you are trying to achieve. However, as the previous poster mentioned, it strikes me that what you want - amongst other things - is to see the footer appear consistently at the bottom of the page. Judging from your current page layout I would suggest that it might well be worth looking at the jQuery UI layout plugin - Click Here

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.