Topic: position something at bottom of the page (Page 1 of 1)

Hi,

I'm currently helping out with a website http://members.optusnet.com.au/grasweb/default.htm
At the moment, it works fine, so long as the content is small, and no scrolling is needed. But, once you do need to scroll, then it looks funny.

The grass/bamboo picture should be at the very bottom of the page, but I don't know how to do it.

At the moment, I'm using bottom: 0px ... but this is bottom of screen, how can I make it bottom of page?
Is there such a thing as: bottom: expression (document.offsetHeight) ? if so, does it work for all browsers?

Also, I know the CSS is really messy at the moment, but I want to get it to look right first.

thanks

i have had trouble with this before.. there are a few options i know of, a simple way is to create that bottom element and make it relative, then place thise below your content element which is also releative. This means it will always be pushed below the content element.

An alternative to this is to set the image u want at the bottom as the background image for the content element, and position it center bottom or something. This also works, however can be a problem when you also want a background image at the top.

Another option yet again is to do basically the same as the first option but place it within the content element, i prefer just putting it as a footer below the content element myself but it depends what you are doing....

CSS->>

.content{

              position:relative:

             background-image:url(contentimage.jpg);

              }

.footer{

            position:relative: 

            background-image: url(footer.jpg);

            }



HTML->>



<div class="content">

          <h1>blah blah</h1>

          <p>blah blah blah..</p>

</div>

<div class="footer"></div>

etc.. hope it helps

Thanks H][RO...

I've tried using your suggestion to use relative positioning.
Link: http://members.optusnet.com.au/grasweb/default2.htm

Works fine now, except, if you need to scroll horizontally, then it kind of stuffs up.
Also, if you don't need to scroll vertically, then it also stuffs up, because the background shows at the bottom, after the content ends. It works fine if you need to scroll vertically though.

So close, yet so far ... arghh!

Any ideas?

Thanks again!

I will take a closer look at your css tonight, something strange going on there.

Can u put together a screenshot of how u actually want it too look? its a bit strange the way u have the bottom image cut and stuff so not sure exactly what you are after.

The whole layout is pretty crunked under firefox, you might want to specify which browser and version that you are using to test these sites. I am testing this using firefox 0.9.1 and it is pretty broken, you might want to run a couple of tests and see what is going on.

Dan @ Code Town

hmmm ... haven't really tested it in firefox ...
could be the negative margins? or using absolute and relative positioning for different layers

I tested the first version (default.htm) in Netscape 7 (I think) ... but not default2.htm
I'm just using IE 6 at the moment. Don't have access to other browsers at work

What I want:
http://members.optusnet.com.au/grasweb/screen1.jpg

What I'm getting when there is not enough content to fill the page:
-see the white thing (part of the background image) at the very bottom
http://members.optusnet.com.au/grasweb/screen2.jpg

It's because of the grass image in the background (bottom left) ... it needs to overlap with the blurred green circles (top right) when there is not alot of content. That is why it is transparent at the top. Hope that makes sense.

you have to make your content and bottom elements relative, they are still set to absolute.

I normally do my menu absolute, but the content is normally relative. Also why the need for negative margins? i dont see the point. Keep the layout clean and simple. For layouts where you are restricting the size and centering it etc i normally find it useful to have a page element, and just center that. Seems to work quite well, so you might set that to 800 width, then put your relative content element and relative bottom-grass within that.

quote:

---

It's because of the grass image in the background (bottom left) ... it needs to overlap with the blurred green circles (top right) when there is not alot of content. That is why it is transparent at the top. Hope that makes sense.

---

Think if there is any point to this... why are you wasting space on a page with such little content anyhow? What i would do in this situation is set a minimum height for the content element, so that this situation never occurs.

umm... my content and bottom elements are relative (see default2.htm ... not default.htm)

I need the negative margins because that's the easiest way to "center" a layer using absolute positioning. (the menu and things at the top uses absoulte positioning). The only draw back is that, if the browser width is smaller than the width of the page (thus the user needs to scroll horizontally left/right), then it buggers up.

As for wasting space ... not sure what you mean H][RO. The content will change, so I need to be sure that it still works regardless if there is alot or little content. Make sense? Anyhow, your min height suggestion helped heaps! ... I set content layer height at 100%, so it pushes the grass image to the bottom. yay! Thanks

Version 3
http://members.optusnet.com.au/grasweb/default3.htm

Ahh doh, i was looking at the first link ..

u might want to check out your min height setting in different browsers, there are normally some problems with it

see:
http://www.ozoneasylum.com/22767

Turns out that min-height: 100% doesn't always work properly ... darn it! (By "properly", I guess I mean it doesn't work the way I want it to)

I've tested it in IE 6, NS 7.1 and FireFox 0.92. Seems to work fine except for the height in NS and FireFox.
Why does it stretch beyond 100%? <sigh>
Frankly, the users of this site will use IE anyways, so is it wrong if I just leave it as is?

http://members.optusnet.com.au/grasweb/grasweb/default.htm

Is Bobby AAA approved
Is valid xhtml 1.0 transitional
Doesn't pass CSS validator because of IE hack

(Edited by ShadowImage on 08-03-2004 15:39)

quote:

---

Why does it stretch beyond 100%?

---

I think the reason it streches beyond 100% in NS and Firefox is that margin and border are add to the height, but with IE they are part of the 100% height. This page about the Box Model Hack should make it clearer.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -

why set it to 100%, just set it too 400px or something, thats what i normally do i think. Not a big fan of the %

Well ... the thing is ... people have different screen resolutions ... and I need to make sure it pushes right to the bottom. So setting at 100% is the easiest way to do this.