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
Printable View
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
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.
Is it done in CSS?
use tables
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. "/
master speaks. :rolleyes:Quote:
Originally Posted by 01101101entor
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%".
Aint there a site where you can do it so when you scroll down it stays where its supposed to be?
www.mygen.co.uk
click 'create profile'
then 'background'
use what you need,
click create code
there.
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.Quote:
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.
No? Because it wouldn't sit at the bottom of your browser. Did you read this bit?:-Quote:
use tables
Using Tables will most probably appear in the solution, but I'm probably going to need some javascript.Quote:
and when you scroll down it must stay at the bottom of your browser.
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.Quote:
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.
It is javascript, I am not sure of the exact code but try www.dynamicdrive.com
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...
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
---------------------------------------------
You mean like when people have navigation what follows the screen?
I've tired using a code similiar to that:-
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.HTML Code:<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.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=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>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />