can't align image! [Archive]

Click to See Complete Forum and Search --> : can't align image!

dfrieber

07-29-2005, 12:21 AM

Hi all,

So i've got a series of webpages and i need to align the same image to the bottom of each one. All the pages are different sized though - some pages require a good amount of scrolling, while others don't need scrolling at all.

What I need is the coding so that when the image shows up on the pages with no scrolling, it aligns itself to the bottom of the browser window. And when it shows up on the pages with lots of scrolling, it simply shows up at the bottom of the page (at the end of the content).

My page has a few divs in it too, so that throws some kinks in the equation.

I have tried to put the image in a div and align that, as well as trying to align the image alone, as well as trying to align a table which contained the image, all to no avail.

Help appreciated!

thanks,

-dan

jjinno

07-29-2005, 12:54 AM

You can do it in JavaScript using 2 div tags (one for the main page, and one for the footer), with a test like this (please realize this is not real JS, just pseudo-code for what I might do given the time):

If ((DIV-main.top + DIV-main.height) > viewable.height) {
place DIV-footer at DIV-footer.top = (DIV-main.top + DIV-main.height)
} else {
place DIV-footer at (viewable.height - DIV-footer.height)
}

And like I said, if I have the time I will try to throw something together for you, but otherwise this at least gives you something to work from.

dfrieber

07-29-2005, 10:41 AM

Yeaaa that seems like it would work nicely.

Unfortunately i know NOTHING about javascript. :)

But thanks for the help, i'll be checking back for if you decide to post the real javascript. Thanks a million jinno

-dan

jjinno

07-29-2005, 08:30 PM

So this has got to be by FAR the worst coding job I have ever done.

I tested it in IE6 & Firefox.

basicly I was having trouble getting the DIV tags (that I originally planned to use) to report any height information...maybe i wll re-write it sometime

anyway I placed 1px clear images on either side of the table colums containing the header, body, and footer. In this way I could specify that the image be width=1px and height=100%.

with these pics there I can test the height of the tags within JS easier, and can compare the height to the height of the entire viewable area.

if (head + body + foot) < viewable, then body = (viewable - (head + foot))

no problems at all, just a really crappy way of going about it.

it works though :D

anyway, here is the URL:
Attempt to make a Floating Footer (http://users.wpi.edu/~jjinno/footer/)

If anyone knows how to access DIV attributes in JS, im kinda interested now. :p

ScaryBinary

07-29-2005, 11:27 PM

Here's an example HTML file that changes the size of a DIV when you click a button. You use "document.getElementById" to grab the style settings for an HTML element, such as a div. You have to give the DIV an id attribute, though, as I have done in my example.

NOTE: I couldn't get this to work unless I actually put the initial height and width in the "style" attribute of the DIV tag itself (you'll notice I duplicated it in the CSS style). Not sure why it has to be done that way, maybe somebody else knows (or maybe that's just the way it is).

I tried this out in both Firefox and Explorer, worked pretty well. Maybe it'll spark some ideas.

<html>
<head>
<title>Untitled</title>
<style type="text/css">

</style>

<script language="JavaScript" type="text/javascript">

function grow()
{
var divFooter = document.getElementById("footer") ;
/* Style settings return the actual unit, so getting the
* the height from the style will return something like "200px"
* which cannot be added since it is a string. The
* parseInt function returns the integer portion of the style setting,
* which can be added.
*/
var h = parseInt(divFooter.style.height) ;
var w = parseInt(divFooter.style.width) ;

alert("Current size: " + h + " by " + w) ;

/* Set new height and width. */
divFooter.style.height = h + 50 ;
divFooter.style.width = w + 50 ;

}

function shrink()
{
var divFooter = document.getElementById("footer") ;

/* Style settings return the actual unit, so getting the
* the height from the style will return something like "200px"
* which cannot be added since it is a string. The
* parseInt function returns the integer portion of the style setting,
* which can be added.
*/
var h = parseInt(divFooter.style.height) ;
var w = parseInt(divFooter.style.width) ;

alert("Current size: " + h + " by " + w) ;

/* Set new height and width. */
divFooter.style.height = h - 50 ;
divFooter.style.width = w - 50 ;
}

</script>

</head>
<body>
<p>Below is a DIV.</p>
<div id="footer" style="height: 200px; width: 200px ;">
<p>Here's my DIV. Click buttons to change!</p>
<form>
<input type="button" name="btnGrow" value="Grow!" onclick="grow()"/>
<input type="button" name="btnShrink" value="Shrink!" onclick="shrink();">
</form>
</div>
</body>
</html>

dfrieber

07-31-2005, 12:25 PM

Hmm.

This all seems like great information, but maybe we're getting ahead of ourselves a little bit?

I'm just talking about a simple footer banner like the one on kottke.org. if you click the 3 small horizontal lines next to the date in any given entry, you can see what it looks like when the page is too small for the banner to go all the way to the bottom. Do you think he used javascript? I dissected his coding and it doesnt look like he did.

But maybe i'm wrong. Am I? How did he do it?

Thanks all,

-dan

dfrieber

07-31-2005, 12:33 PM

WHOOPS.

disregard that last message, i had forgotten about what i initially asked.

i need to get more sleep.

-dan

dfrieber

07-31-2005, 12:35 PM

But jjinno, that link you posted doesnt work for me.

anyone else?

ScaryBinary

07-31-2005, 03:30 PM

I'm just talking about a simple footer banner like the one on kottke.org. if you click the 3 small horizontal lines next to the date in any given entry, you can see what it looks like when the page is too small for the banner to go all the way to the bottom. Do you think he used javascript? I dissected his coding and it doesnt look like he did.

Eh? I checked out the site with both Firefox and IE, and in both cases the footer you speak of isn't aligned at the bottom of the browser window.

I don't see anything in this guy's CSS or Javascript that would force the footer to the bottom of the window, but I'll take a closer look.

If you want the quick but disappointing answer, it's this: you can do what you want - always force the footer to the bottom of the browser window - with one or two simple lines of CSS. The problem is that the wonderful folks at Microsoft didn't take the time to fully implement CSS in Internet Explorer, so the CSS won't work in IE - but it works as expected in Firefox. I can give you an example for Firefox with standard CSS, and I'll try to figure out if there's a way to get it to work in IE.

ScaryBinary

07-31-2005, 03:44 PM

Geez, I must need more sleep too. :p

The fact that you want to either align the image at the bottom of the window (if no scrolling is required) or at the bottom the content (if scrolling is required) probably means that some Javascript will be involved. So while what I said about CSS above is true, it doesn't fully apply to your question.

...I'll work on it....

jjinno

07-31-2005, 05:27 PM

WOW this thread is like the world of insomnia... :D

The reason the link doesnt work is because its not the right link...

So to avoid confusing myself:

http://users.wpi.edu/~jjinno/test/footer/

:t