Solved

Getting a footer on each page

Posted on 2003-11-20
9
276 Views
Last Modified: 2010-04-09
Hi All,

Well I am using the OnRequestEnd.cfm file available in cold fusion that is automatically inserted at the end of each page to attempt to have a little copyright blurb at the bottom of each page.

I have a couple of queries as regards this...

First here is the code I want to insert at the bottom of each page

<TABLE WIDTH="100%" ALIGN="CENTER" BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD BGCOLOR="#0066FF" WIDTH="100%"><IMG SRC="assets/spacer.gif" BORDER="0" HEIGHT="1" WIDTH="1"></TD>
  </TR>
  <TR>
    <TD ALIGN="CENTER"><FONT COLOR="#003399" SIZE="1">Website design by <A HREF="mailto:brad">Brad</A>, 2003</FONT></TD>
  </TR>
</TABLE>

I am having a problem with this code appearing to the RIGHT of the page's contents rather than down below it!! This only happens on some pages though and not on others. The pages it does happen on are fairly simple and do not have unclosed tables etc on them.

Secondly, i was wondering if there is a way so that it appears at the very bottom of the screen instead of directly under the content (as this can look a bit funny when the page is only as high as half a page). It could either *Stay* at the bottom of the screen or better would be directly under the page if there is a scroll bar AND at the bottom of the screen if there is no scroll bar.

Thanks for reading this far!

Cheers,
Brad
0
Comment
Question by:bradderick
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 500 total points
ID: 9795038
> I am having a problem with this code appearing to the RIGHT of the page's contents rather than down below it!
Try inserting a <br clear="all"> just before the opening <table> tag.

> Secondly, i was wondering if there is a way so that it appears at the very bottom of the screen instead of directly under the content (as this can look a bit funny when the page is only as high as half a page).

That's the problem. If the document isn't long enough to take up all of the space in the browser window, then it's not long enough. About the only wasy around this is either to insert empty paragraphs or use a fixed-height table (or possibly some other container of fixed height) to encliose the whole layout. Problem then is that you end up with lots of empty space.

Or you could try some CSS: Add id="footer" to your table tag and #footer {position:absolute; bottom:5px;} add see what happens.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9795062
(For those of you playing along at home: yes, "bottom" IS a valid CSS positioning attribute. So is "right".)

Oh... there's a bug in some browsers, I forget which ones... wrap your table in a DIV and apply the positioning to that instead:

<style type="text/css">
  #footer  {position:absolute; bottom:5px; }
</style>


<div id="footer">
  <table>
... etc.
  </table>
</div>

That should do the job.
0
 
LVL 6

Expert Comment

by:jarasa
ID: 9796434
Hi.

You can always use a FRAME and put your copyright there, then you'll see it always at the bottoom of the browser even if the scrollbar appears.

<frameset rows="*,30" cols="100%" frameborder=0 framespacing=0>
      <FRAME NAME="Body" scrolling="no" frameborder=0 framespacing=0 marginwidth=0 marginheight=0 noresize="true" src="your_page.html">
      <frame name="Copyright" scrolling="no" frameborder=0 framespacing=0 marginwidth=0 marginheight=0 noresize="true" src="copyright.html">
      <noframes>
            No frames supported.
      </noframes>
</frameset>

Regards
Javier
0
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9801986
Use he style sheets , this works
<head>
<style>
<!--
body   { padding: 0px; margin: 0px; }
div.footer { position: absolute; bottom: 0px; }
//-->
</style>
</head>
<body>
<center>HELLO WORLD</center>
<div class="footer">
<TABLE WIDTH="100%"  ALIGN="CENTER" BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD WIDTH="100%" ></TD>
  </TR>
  <TR>
    <TD BGCOLOR="#0066FF" WIDTH="100%"><IMG SRC="assets/spacer.gif" BORDER="0" HEIGHT="1" WIDTH="1"></TD>
  </TR>
  <TR>
    <TD ALIGN="CENTER"><FONT COLOR="#003399" SIZE="1">Website design by <A HREF="mailto:brad">Brad</A>, 2003</FONT></TD>
  </TR>
</TABLE>
<p>
</div>
</body>





0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9801991
works fine with span instead of div as well
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9802092
>  works fine with span instead of div as well

But it wouldn't validate, as span's content-model is inline and div's is flow. span can't contain block elements.

Besides, I suggested using "bottom" first. <G>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9802846
Zontar,
    Sorry some how I missed you first post. Span works fine for the suggested footer by bradderick, and I could not get any block elements to cause problems with it either.
0
 

Author Comment

by:bradderick
ID: 10800842
Thought this was accepted ages ago. My apologies Zontar for the extremely long wait for points!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question