Click to See Complete Forum and Search --> : footer without frames
I need to build a site that has a "hugging the bottom of the browser footer".
ive never done--but have seen a million times and didnt think it would be that hard to figure out
cant be in frames
i tried this
<html>
<head>
<title></title>
</head>
<body>
<table height=90% cellpadding="0" cellspacing="0">
<tr><td valign=top>
content here<br>
<br>
</td></tr>
</table>
<br clear=all>
footer here
</body>
</html>
figured that would be fine--but doesnt work
cant seem to find any online now
anyone do this --should be simple
real examples would be GREAT
thanks
gil davis
02-22-2003, 04:31 PM
See http://gil.davis.home.att.net/shuttle5.htm and check out the navigation at the bottom of the page. Try it in different window sizes - the "footer" is always at the bottom of the page.
Zach Elfers
02-22-2003, 04:39 PM
This will only work in Netscape:
<div style="position:fixed;left:0px;bottom:0px;">
Footer is here
</div>
That will position a footer on the bottom of the page. You can place tags in between the <div> tags for formatting.
Stefan
02-23-2003, 04:43 AM
Originally posted by Zach Elfers
This will only work in Netscape:
Don't leave out Opera, or for that matter any other CSS2 capable browser.
In fact the only well know CSS 2 "capable" browser that is buggy with it is IE. :)
hmmm need to work in ie and netscape
gil -- thats not exactly what i need--i need it to always be at the bottom of the browser--not the bottom of the content within the page--but thtnks :)
Stefan
02-23-2003, 03:51 PM
Originally posted by emm
gil -- thats not exactly what i need--i need it to always be at the bottom of the browser--not the bottom of the content within the page--but thtnks :) [/B]
That is exactly what the code zach posted does, expect in IE (which is broken).
But to get that effect in IE you will need to use eg a JavaScript to mimic the effect of position:fixed
ah--i see--i was using ie when i first looked
thanks
gil davis
02-23-2003, 04:37 PM
Originally posted by emm
gil -- thats not exactly what i need--i need it to always be at the bottom of the browserLook again. It was broke in IE, but I fixed it. It didn't inherit the class "abs" from the style sheet like it does in NS.
ahhhh !!
Awesome !
u tha man !
gil davis
02-24-2003, 05:30 AM
BTW, it doesn't work in NS 6. I'm still trying to figure that one out.
Also, not tested in IE 6, NS 7 or Opera.
gil davis
02-24-2003, 06:51 AM
Ok, it now works in NS 6.
Stefan
02-24-2003, 08:01 AM
Originally posted by gil davis
Ok, it now works in NS 6.
Gil, why are you using JavaScript for placing it at the botttom in the browsers that understand CSS correctly?
That unnessecarily breaks the page in case JS is turned off in these browsers, as well as use up much more CPU to do it when JS is on (matters on slow systems).
Quite unnessecary IMO.
gil davis
02-24-2003, 08:08 AM
Do you have a suggested method for keeping the footer at the bottom regardless of how the user resizes the page? I'm all ears (eyes?).
(I usually think js first, but the less code the better)
Also, there is a problem with my code when the horizontal scroll bar appears - the footer is covered by the scroll bar.
Stefan
02-24-2003, 08:31 AM
Originally posted by gil davis
Do you have a suggested method for keeping the footer at the bottom regardless of how the user resizes the page? I'm all ears (eyes?).
Zach posted the code in tis very thread a few days ago :)
Here it is again so you don't need to wear out that scroll wheel of yours :D
<div style="position:fixed;left:0px;bottom:0px;">
Footer is here
</div>
For IE and NS 4 compability you will need some JS agumentation, but Moz and Opera doesn't need anything else.
gil davis
02-24-2003, 08:46 AM
I discounted Zach's post because of the only well know CSS 2 "capable" browser that is buggy with it is IE.For my example, I still need JS to build the links in the footer, so I'm not sure I see any advantage to a purely CSS approach.
Here is what I've worked out so far:<div id="d1" style="position: absolute; width: 100%; left: 0px; bottom: 0px; text-align: bottom">
<p style="text-align: center"><span style="float: left"><== Previous</span><span style="float: right">Next ==></span>Index</p>
</div>This works in NS 6 and IE 5.5, but not NS 4 (as expected). I no longer have the capability to test IE 4.
Stefan
02-25-2003, 04:05 AM
Originally posted by gil davis
For my example, I still need JS to build the links in the footer, so I'm not sure I see any advantage to a purely CSS approach.
Actually you don't need JS to make the links, but never the less even if you do, using CSS will
* use less resources on the visitors comp (making your page seem more responsive)
* imediately draw the bar at the correct loacation, getting rid of the annoying jump effect you get now.
Besides, you really should have a plain HTML fallback way to navigate in any case, and using CSS will allow you to not have to make 2 separate nav methods.
Here is what I've worked out so far:
<div id="d1" style="position: absolute; width: 100%; left: 0px; bottom: 0px; text-align: bottom">
That works partially (and even in IE), but the problem is that if the actual page content is larger then 1 screen, the bar will overlap the content and once you start scrolling the bar will scroll with the page. Position:fixed will keep it in place at the bottom of the screen even if you scroll the page below it.
It's this behaviour (lock on screen) that has to be mimiced with JavaScript in IE (and the fallback with JS turned of in IE can be to let the bar scroll with the page, decreasring look but maintaining resonable functionallity).
gil davis
02-25-2003, 08:37 AM
Originally posted by Stefan
Actually you don't need JS to make the linksThe idea was to have the footer be a separate JS file that several pages would call, changing the "previous", "index", and "next" links. How would you do that without JS?
Besides, you really should have a plain HTML fallback way to navigate in any case, and using CSS will allow you to not have to make 2 separate nav methods.They can always use BACK to get to the index. That does not concern me too much. I suppose I could use a <noscript> tag containing a link to allow getting back to the index from each page.the problem is that if the actual page content is larger then 1 screen, the bar will overlap the contentI did not intend having the page that large. The whole reason for the index and the prev/next was to display the patches for each year on a small page rather than all of thenm on a large page. I use the footer.js in a couple of groups like that.Position:fixed will keep it in place at the bottom of the screen even if you scroll the page below it.If it ever gets browser support. It doesn't work in IE, NS 4 or NS 6.
Give me something I can use. ;}
Stefan
02-26-2003, 09:36 AM
Originally posted by gil davis
The idea was to have the footer be a separate JS file that several pages would call, changing the "previous", "index", and "next" links. How would you do that without JS?
Many options depending on what you want to do. Eg
A) Use normal links added to the page.
B) Use an iframe.
C) Use CSS to show/hide specific links.
D) Use serverside methods.
They can always use BACK to get to the index. That does not concern me too much. I suppose I could use a <noscript> tag containing a link to allow getting back to the index from each page.
That sounds like a resonable workaround IMO. :)
If it ever gets browser support. It doesn't work in IE, NS 4 or NS 6.
Give me something I can use. ;} [/B]
It has to woork too? Bah, you are asking way too much :D
Anyway, as I said with IE you can add a JS workaround to mimic fixed, and you can do the same with NS 4 if you feel it's nessecery.
And NS 6, it doesn't work with fixed?
I would have though it would, but depending on which version you are using it might have been temporarilly broken. I mostly use Mozilla, and position:fixed have worked for several years in it.
Exactly which NS 6 version is it?
gil davis
02-26-2003, 10:31 AM
Originally posted by Stefan
Exactly which NS 6 version is it? 6.2
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.4) Gecko/20011019 Netscape6/6.2
What I tried was this:
<body>
<div id="d1" style="position: fixed; width: 100%; left: 0px; bottom: 0px">
<p style="text-align: center">
<span style="float: left"><a href="#" onclick="return false"><== Previous</a></span>
<span style="float: right; text-align: right"><a href="#" onclick="return false">Next ==></a></span>
<a href="#" onclick="return false">Index</a></p>
</div>
<script>
if (document.layers)
{document.d1.top = window.innerHeight - document.d1.document.height;}
</script>
</body>
gil davis
02-27-2003, 07:21 AM
I should have added that the footer does not even appear in NS 6.
BTW, Stefan, I appreciate your insight on this. You and I seem to think on a very different plane.