Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

footer positioning?

Posted on 2002-05-10
6
Medium Priority
?
262 Views
Last Modified: 2010-04-09
Hello

I have some pages that I want to have a common footer - which is a table that has a thin rectangle gif, and a back, top, and home buttons in it.
I'd like it to display at the "bottom" of the page as consistently as possible, preferably regardless of screen resolution, or how the window is resized.
How can I do that?

thanks

v
0
Comment
Question by:vlg
6 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 7001878
use server side includes if you can, and just put it at the bottom of the page...
0
 

Author Comment

by:vlg
ID: 7001885
How does one server side include something, and what specifically would I have to server side include to make it go to the bottom?

v
0
 
LVL 17

Expert Comment

by:dorward
ID: 7002222
See the "faking position: fixed" for IE6 item: http://home.deds.nl/~thebox/ghost/index.html

You will probably want a fixed horizontal bar.
0
Independent Software Vendors: 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!

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 400 total points
ID: 7003213
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.style.visibility="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
 

Author Comment

by:vlg
ID: 7003349
Seems to work!
Cd& - any good links to learn more about layers?

thanks

v
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7003367
A good place to start with layers in dynamic HTML is:

http://www.dansteinman.com/dynduo/index.html

They have clear explanations and good examples that can be applied to a lot of different situations.

Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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 …

971 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