An image at the bottom of the page

Forum Moderators: mack

Message Too Old, No Replies

An image at the bottom of the page

An image at the bottom of a page without getting the scrollbar on the right

Franky

7:39 pm on Aug 28, 2002 (gmt 0)

I wonder how I get an image displayed at the bottom of a webpage and to be sure that I don't get the scrollbar on the right of the screen?

I want to clarify what I mean by giving an example:
Let's say I've got one line of text on the top of the page. Now I want to display an image on the bottom of the page. I want it as much down as possible, without getting the scrollbar on the right, in spite of the viewer's resolution of his screen.

I hope someone knows how to achieve this?

Thanks in advance!

andreasfriedrich

8:03 pm on Aug 28, 2002 (gmt 0)

You might want to try setting the desired image as the body´s background style and a white background for your text. However, you are not guaranteed to have your image start right where the text stops.

You might want to use a table and rely on the non-standard height attribute. This will ensure that the image begins right after the text but you might experience difficulties with standard compliant browsers.

kris

9:52 pm on Aug 28, 2002 (gmt 0)

Hi Franky,
DHTML seems the way to go. I am no expert by any means, but I ran across this site and had to bookmark it.

Is this what you are looking for?
[cross-browser.com...]
[cross-browser.com...]

It sets the postion of an element regardless of the window size. You can edit the properties to set it to the bottom of the page.

justa

11:01 pm on Aug 28, 2002 (gmt 0)

Your best option would be to use CSS to position the image on the page. I think this lesson at w3 schools [w3schools.com] is exactly what you are after.

Just change center center to bottom right.

PaulPaul

11:11 pm on Aug 28, 2002 (gmt 0)

Very cool links Kris.

Thanks.

Franky

4:28 pm on Aug 29, 2002 (gmt 0)

Andreasfriedrich, kris and justa, thanx for your replies!

I have to take a closer look at the links you gave me kris, to see if that is working for me.

The link you provided justa, is exactly what I had in mind! It's only too bad it doesn't work in Netscape. And I also want to put a link to another page behind the image (on the bottom on the page). But that didn't work with this script.

If someone knows how to put text on the bottom of a page which operates as a link to another page (without showing the scrollbar on the right), that will work for me too!?

kris

5:19 pm on Aug 29, 2002 (gmt 0)

This is a bit more complex than you are looking for but it will do the job. Similar to the links above only this is a sliding menu.

[cross-browser.com...]

dhdweb

11:26 pm on Aug 31, 2002 (gmt 0)

If you want to resort to using a table, the following code will get you there:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
  document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW ¦¦ innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head><body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
 <tr valign="top" align="center"> 
  <td>Header Content</td>
 </tr>
 <tr align="center"> 
  <td>Body Content</td>
 </tr>
 <tr valign="bottom" align="center"> 
  <td>Footer Content - Place your image here!</td>
 </tr>
</table>
</body>
</html>

This design is also fluid! Does not depend on resolution.