homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

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

10+ Year Member



 
Msg#: 58 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 58 posted 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

10+ Year Member



 
Msg#: 58 posted 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

10+ Year Member



 
Msg#: 58 posted 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

10+ Year Member



 
Msg#: 58 posted 11:11 pm on Aug 28, 2002 (gmt 0)

Very cool links Kris.

Thanks.

Franky

10+ Year Member



 
Msg#: 58 posted 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

10+ Year Member



 
Msg#: 58 posted 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

10+ Year Member



 
Msg#: 58 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved