Member Avatar for Geminyi

Hello again. Just finished my webpage and was instructed to put in a footer. I am brand new, and still working out all the bugs (firefox doesnt like my webpage yet, and extreme widescreen monitors are a little ignorant as well).

Although my main problem at the moment that i wish to tackle is inserting a footer with dreamweaver. One that no matter whether it is widescreen or square it always puts it to the bottom even if content is only a half page. Please be as basic as possible in explanations even if it is step by stepish as i am still new to web building.

I have just placed the sitemeter/copyright under my table for the time being.

my website is www.tcbwelding.com

Thanks to everyone in advance, and have been very thankful to the help the community has offered so far. Hopefully one day soon i will be able to return the favor.

  • 5 Contributors
  • 5 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A practical, modern fix is to stop using tables or absolute positioning for page layout and let CSS handle vertical flow. The simplest, most robust pattern today is a "flexbox sticky footer": make a page wrapper stretch to the full viewport height, let the main content grow, and keep the footer at the bottom when content is short but pushed below when content is long. This works across wide and narrow monitors, is responsive, and is easy to drop into a Dreamweaver template or shared stylesheet.

Example structure and CSS you can paste into your site CSS:

<body>
  <div class="site">
    <header>…</header>
    <main class="content">page content here</main>
    <footer class="site-footer">Copyright 2008</footer>
  </div>
</body>
html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; /* takes remaining space */ }
.site-footer { text-align: center; padding: 1em; }

In Dreamweaver: add the wrapper and footer markup into your master page/template (so the footer appears on every page), link to the stylesheet that contains the CSS above, and test by resizing the window and adding/removing content. For older browsers that lack flex support, add a simple conditional stylesheet or a tiny script to set min-height on load/resize as a fallback.

Notes on the thread: was right to worry about covering content; correctly flagged that absolute positioning breaks with long pages; 's tfoot comment is about table semantics (useful only if your footer is part of a table, which it shouldn't be for page layout). For more detail see MDN's flexbox guide and a practical sticky-footer writeup on CSS-Tricks: MDN - Flexbox basics and CSS-Tricks - sticky footer approaches.

Recommended Answers

All 5 Replies

Member Avatar for lengoanhcat

Try to put the footer inside the table

Create another row in the table
Put all your footer inside that row

I hope that helps to solve your problem

Cat Le

Member Avatar for macneato

Thing is... when it comes to footers.. They really should be at the bottom of your content and not the screen. Just think about it!? Would you continue reading even when there is no content?

Anyway, I kinda understand where you coming from (after viewing your site). So here is how I'd do it, using css:

<div align="center" style="position: absolute; bottom: 2px; left: 50%;">Copyright 2008 </div>

Make adjustments as you please.

If this solved your problem or pointed you in the right direction. Please add to my rep.
Macneato

Member Avatar for Fungus1487

Thing is... when it comes to footers.. They really should be at the bottom of your content and not the screen. Just think about it!? Would you continue reading even when there is no content?

Anyway, I kinda understand where you coming from (after viewing your site). So here is how I'd do it, using css:

<div align="center" style="position: absolute; bottom: 2px; left: 50%;">Copyright 2008 </div>

Make adjustments as you please.

If this solved your problem or pointed you in the right direction. Please add to my rep.
Macneato

this will not work as content that expands over more than one whole vertical page wont compensate for the extra height.

the footer will rewmain at the bottom of your screen until you scroll. Then it will stay at that position.

i suggest using

<div align="center" style="position: SCROLL; bottom: 2px; left: 50%;">Copyright 2008 </div>

the footer will sit at the very bottom of your page in all circumstances then.

Member Avatar for Geminyi

Will give it a shot tonight it was a late night last night, and been trying to research the issue like mad. Seems bottom page footers are almost a nightmare from what i read so far while browsing posts through google. Thanks for the suggestions, and I will be hard at it again tonight until i get it solved! Will make sure to let everyone know which solution works.

Member Avatar for MidiMagic

There is NO WAY to place something at the bottom of the visible browser window that works with all browsers and screen resolutions. Stop trying.

A tfoot tag works within a table. Place the tags as shown here:

<table>
  <thead>
    contents of header
  </thead>
  <tfoot>
    contents of table footer>
  </tfoot>
  <tbody>
    body of table
  </tbody>
</table>

You need to either put in all three of the thead, tfoot, and tbody tags, or leave them all out.

The tfoot tag goes before tbody, so the browser can render tables that span more than one printed page easily. Each page printed will have the header at the top of the printed part of the table, and the footer at the bottom of the printed page.

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.