Solved

Page footer

Posted on 2002-03-23
16
135 Views
Last Modified: 2010-04-09
I have a few links that I want to keep at the very bottom of the page.  What tags do I use to keep them at the bottom at all times?


thanks,



knoxxx
0
Comment
Question by:JohnnyKnoxville
  • 5
  • 4
  • 4
  • +3
16 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6891346
I think what you need will go something like this:

The stuff you want at the bottom has to be in a layer (absolutely
positioned div for compatibility) like this:
<div id="thediv" style="position:absolute;top:0;left:0;visibility:hidden">

The do the body tag this way:

<body onLoad="positionit()">

This goes in the head:

<script language="JavaScript">
<!--
   var obj;
   var H;
   var divH;
   var T;

   function positionit()
   {
      if (document.all)
      {
         obj=document.all['thediv'];
         H=document.body.clientHeight;
         divH=obj.clientHeight;
      }
      else
      {
         if (document.layers)
         {
            obj=document.layers['thediv'];
            H=window.innerHeight;
            divH=obj.documentHeight;
         }
         else
         {
            obj=document.getElementById('thediv');
            H=window.innerHeight;
            divH=obj.offsetHeight;
         }
      }
      T=H-divH;
      if (NS4)
      {
         obj.top=T;
         obj.visibility="visible";
      }
      else
      {
         obj.style.top=T;
         obj.sytle.visibility.top="visible";
      }
    }
//-->
</script>

I don't have time to play with it, but it should be pretty close.  Might
need some adjustments for margins and such.

Cd&
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6891635
Or you could just use frames... ;-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6891880
i suppose you want it for every page you make. i strongly suggest the use of templates here. that'll make the process of  web site making very easy. and i strongly oppose the use of frames as suggested by ww, and if you ask her she'll most probably say this too. and the footer with links can be made by a number of ways, div's being one(already suggested),traditional tables, etc. you can use one depending on the structure of your site.

its for you to decide which method is most suitable;

lexxwern
0
 
LVL 1

Expert Comment

by:nicey
ID: 6892042
If you have SSI capability in your hosting plan, it's better to take that route.

Simply make a 'footer' and save that text document as something like, 'footer.txt".

'footer.txt' will hold all your footer tags and display content.

Place this directive in your '.shtml' documents :

<!--#include virtual="/path_to_file/footer.txt" -->

.. where you want the footer to output it's stuff.... at the bottom of the page(s).

You'll have to change your .html extentions though to .shtml.... if they are not already.  Or, allow the server to parse .htm/.html etc. etc. pages like this :

Add this to your '.htaccess' file :

AddHandler server-parsed .html

...and/or :

AddHandler server-parsed .htm

That way, standard .html/.htm files will be parsed like .shtml.

This way will keep your footer in a nice managable section.... simply one file... open it up, add/delete/move/change and re-upload.

Perhaps think about this method for a 'header.txt' aswell.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6892046
true.
but why do you recommend ssi's nicey?
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6892049
AddHandler server-parsed .htm
dont do this as this makes your page extremely slow. cause the server is instructed to parse tru  every file.
0
 
LVL 1

Expert Comment

by:nicey
ID: 6892138
I recommend Server Side Includes so as to cut out all the fiddly farty "cross-browser" issues when doing JavaScript.

Using the SSI approach, the whole header/footer thing is simplified extremely.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6892228
nicey, where does javascript come in, note javascript+css is one solution, but not the only solution, there are other solutions tables,css,etc. using serverside includes slows down the whole process.

if client side solutions are available, it would be better to use them.

cross border compatibility is not an 'issue' in this problem.

lexxwern
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6892230
I see some suggestions to reduce the work, but what I posted is the least work to get the effect.  The script goes in a .js file and gets pulled in to each page.

You can even get rid of the change to the body tag by putting the script at the end of the page and firing it as part of the load.

It does not require anything external and is compatibile with just about every browser around with scripting enabled.  Why are we trying to find a complex way to solve a simple problem?

Sometimes the *solution* is the next problem that has to be solved.....  K.I.S.S.

Cd&
0
 
LVL 1

Expert Comment

by:nicey
ID: 6892267
lexxwern, the previous post is where the JavaScript comes in... and apart from using JavaScript, SSI is the next best solution.

You see, "calling" in a footer means that you can for example, have a copyright notice, all the links (as wanted by the question starter), and anything else.... and if you need to change... add links, update copyright notice etc etc... you only need change one file, and it carries throughout your site.

Using SSI does slow down the download, that is true... but by really really really small amounts to be fair.  If you notice any lag when using SSI... get a new host!!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6892334
Hmmm....  No one caught my typo :^(

This:
        obj.sytle.visibility.top="visible";

Should be this:

        obj.sytle.visibility="visible";

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6892348
Argh!!! I mean:

obj.style.visibility="visible";

Some day, I must learn to type.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 6892706
I also back the up the Server Side Include route, very easy, no need for extra coding.


<!--#include file="footer.inc"-->


something similar to that is all you would need at the bottom of each page.  ever want to change it?  all the footer text is in ONE file, not on each individual page.

for more info on SSI:

http://www.bignosebird.com/ssi.shtml



BRUNO
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
ID: 6892730
Hmmm....  Am I reading the wrong question.  

The question I see is how to keep links at the bottom of a page.

It does not matter if you use includes or templates it take srcipting to position it unles every page is exactly the same dimensions so you can hard code the pag, and every user has exactly the same browser and setting and monitor.  

Frames can work, but we all know what kind of problems we can get with that.

Cd&
0
 

Author Comment

by:JohnnyKnoxville
ID: 6892856
Wow...thanks for the input everyone! :)


Well....I was originally only going to have to keep the links on the bottom of the home page.  However, they may need to be placed on every page later down the road.  The SSI's was an excellent proposal as long as it doesnt dramatically affect the download speed.  For this purpose, Cd's solution works great....and yes.....I DID notice the typo.  Took me awhile to catch it though. :)

Thanks everyone



knoxxx  
0
 
LVL 1

Expert Comment

by:nicey
ID: 6892901
Cool... as longs as you got a solution your happy with, that's the main thing.

But just so that you know, using SSIs will only slow the download down by like, milliseconds, if that.

A human wouldn't notice it, put it that way. ;o)

If parsing files for SSI shows a noticable speed difference for the worst, then the host is rubbish, and another one should be thought about.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

706 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now