How can I do this? [Archive]

Halting

27-07-2006, 04:10 PM

Right. What I want to do is position an image at the very bottom of my page without setting it as a background image, and when you scroll down it must stay at the bottom of your browser.

How is this possible?

Thanks in advantage,
The Almighty One

ClubTime

27-07-2006, 06:00 PM

I think you just make sure you put it right to the bottom and that there is no space after it. That should make sure it stays at the bottom, not oo sure if there are any other ways.

alexxxxx

27-07-2006, 06:02 PM

Is it done in CSS?

Recursion

27-07-2006, 07:48 PM

use tables

Mentor

28-07-2006, 12:21 AM

Humm background image would be alot easyer, since you can quite easly lock it to a position relative to the browser window. Although not so useful if you need to ad content.
im not sure if its possible to get what you want without haveing to use javascipt to dinamicly alter its position, although seeing as i have to be off in a hurry, i aint had chance to think it threw particaly far. my sugegstion is search google for it and see what you can come up with from that, its almost certain someone has tryed to or accompished what you want before. "/

Matteeeeee

28-07-2006, 12:32 AM

Evasion

28-07-2006, 06:16 AM

If you have dreamweaver you can easily do this by puttings it in <div> tags and setting the position to "Bottom" and the percent to "100%".

:Blob

28-07-2006, 09:14 AM

Aint there a site where you can do it so when you scroll down it stays where its supposed to be?

Matteeeeee

28-07-2006, 10:37 AM

www.mygen.co.uk
click 'create profile'
then 'background'
use what you need,
click create code
there.

Halting

28-07-2006, 10:57 AM

I think you just make sure you put it right to the bottom and that there is no space after it. That should make sure it stays at the bottom, not oo sure if there are any other ways.

If I didn't want it to sit at the bottom of your browser when you scroll down, that would have been the obvious solution I would have turned to. However, I do want the image to sit at the bottom of your browser when you scroll down the page.

use tables

No? Because it wouldn't sit at the bottom of your browser. Did you read this bit?:-

and when you scroll down it must stay at the bottom of your browser.

Using Tables will most probably appear in the solution, but I'm probably going to need some javascript.

Humm background image would be alot easyer, since you can quite easly lock it to a position relative to the browser window. Although not so useful if you need to ad content.

You it would be alot easier. However, I am already using a background image, and if I was to set this image as a background image too it would require some sort of code which would allow me to set multiple backgrounds.

Josh-H

28-07-2006, 11:04 AM

It is javascript, I am not sure of the exact code but try www.dynamicdrive.com

Luckyrare

28-07-2006, 11:08 AM

Javascript can be used for this...

But you could just put the image code before closing body tag... Make the bottom margin 0px

margin-bottom: 0px;

This should work...

Halting

28-07-2006, 01:05 PM

But it would put it at the bottom of all yourf content, not nessecarily at the bottom of the browser.

For example:-

CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTC ONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCO NTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCON TENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONT ENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTE NTCONTENTCONTENTCONTENT
IMAGE HERE

This would be its output.

But I need it at the bottom of the browser, like so:-

CONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTC ONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCO NTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCON TENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONT ENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTE NTCONTENTCONTENTCONTENTCONTENTCONTENTCONTENTCONTEN TCONTENTCONTENTCONTENT

IMAGE HERE
---------------------------------------------

Impossible

28-07-2006, 01:39 PM

You mean like when people have navigation what follows the screen?

Halting

28-07-2006, 02:11 PM

I've tired using a code similiar to that:-

<html><body>
<style type="text/css">
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">
<table width="100%" background="images/fire_bbg.PNG" height="96px">
<tr>
<td></td>
</tr>
</table>
</layer>
<script type="text/javascript">
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 0,
startY = 96;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.a ll[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.t op=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft(), 0");
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>
</html>
 

That's just a page I put together to test our the javascript, it stays at the bottom but you can see it flowing down and it has a delay of about 1 second which I can't figure out how to remove.

Want to hide these adverts? Register an account for free!