position to bottom of screen if short, text if long

Hey Folks:

I'm probably dreaming here, but perhaps there's a way...

I just gave a presentation. It's in XHTML and uses CSS for making things
look nice. Right now there's a small navigation system on top and the
main text area. The presentation is about to be put on the web, so I'd
like to add a footer on each page with the presentation name and a link
back to the main site.

The quest here is:

1) On pages where the main text doesn't fill the whole screen, put the
footer at the bottom of the browser window.

2) But, on pages where the main text is long enough to scroll down below
the bottom of the window, to place the footer below the bottom of the
text.


Doing something like this:

div.bottom {
position: absolute;
bottom: 0;
}

works fine for short pages, but on longer pages, the footer winds up
covering the main text at the bottom of the current screen.

While this can kind of be dealt with via "overflow: scroll" on the main
section, that's not the greatest. It blows the ability to use the page
up/down keys to scroll the main text area (at least on a very current
build of Mozilla as well as IE 6). Plus it introduces scroll bars in both
axes, even if they're not needed which is unsightly.

Using straight XHTML is okay for the long pages, but then it doesn't have
the nice touch of being at the absolute bottom on short pages.

Thanks for your thoughts,

--Dan


--
FREE scripts that make web and database programming easier
http://www.analysisandsolutions.com/software/
T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409

"Analysis&Solutions" <info (AT) analysisandsolutions (DOT) com> wrote

Hey Folks:

I'm probably dreaming here, but perhaps there's a way...

I just gave a presentation. It's in XHTML and uses CSS for making things
look nice. Right now there's a small navigation system on top and the
main text area. The presentation is about to be put on the web, so I'd
like to add a footer on each page with the presentation name and a link
back to the main site.

The quest here is:

1) On pages where the main text doesn't fill the whole screen, put the
footer at the bottom of the browser window.

2) But, on pages where the main text is long enough to scroll down below
the bottom of the window, to place the footer below the bottom of the
text.


Doing something like this:

div.bottom {
position: absolute;
bottom: 0;
}

works fine for short pages, but on longer pages, the footer winds up
covering the main text at the bottom of the current screen.

I found the link below was very helpful

http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

david

In <hKi3b.192$yX4.41654 (AT) newsfep2-gui (DOT) server.ntli.net> "david graham" <david.graham16 (AT) ntlworld (DOT) com> writes:

http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

David, THANK YOU SOOOOOO MUCH!!!!

--Dan
--
FREE scripts that make web and database programming easier
http://www.analysisandsolutions.com/software/
T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409

david graham wrote:

"Analysis&Solutions" <info (AT) analysisandsolutions (DOT) com> wrote in message
news:bijot8$ps2$1 (AT) reader2 (DOT) panix.com...

I just gave a presentation. It's in XHTML and uses CSS for making things
[...]

1) On pages where the main text doesn't fill the whole screen, put the
footer at the bottom of the browser window.

2) But, on pages where the main text is long enough to scroll down below
the bottom of the window, to place the footer below the bottom of the
text.


http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

Like the page says, it doesn't work with Opera 6. I've been trying to
battle this before and I haven't found *any* way to make Opera 6 behave
like this. Does somebody know a way to get this behaviour out of Opera
6? The solution doesn't need to work with other browsers as I can insert
required hacks to the source on server side (as long as I can identify
Opera 6) while I fetch the content from database.

--
Mikko

"Analysis&Solutions" <info (AT) analysisandsolutions (DOT) com> wrote

In <bio530$4e0$1 (AT) mordred (DOT) cc.jyu.fi> Mikko Rantalainen <mira (AT) st (DOT) jyu.fi
writes:

Like the page says, it doesn't work with Opera 6.

FYI: a friend and I did browser compliance tests using my real world
usage: http://nyphp.org/content/presentations/pvsxml/

Windows
Mozilla (a current build) works
IE 6 works
Opera 7 not really and renders very slowly, at least on my machine

Mac OSX
Mozilla (~1.4) works
IE 5.2 nope
Safari 1.0 nope
Opera 6

Any other data points?

OK on NN7 win98 and win2000

OK on IE5.5 win98 and win2000

david

In <3f5490dd (AT) news (DOT) sihope.com> kchayka <kcha-ns-yka (AT) sihope (DOT) com> writes:

Analysis&Solutions wrote:

FYI: a friend and I did browser compliance tests using my real world
usage: http://nyphp.org/content/presentations/pvsxml/

Mac OSX
IE 5.2 nope
Safari 1.0 nope

Neither of these support the min-height property, but do support the
child rules that WinIE ignores. So they will just act on
html>body, html>body div.contents {height: auto;}

I don't think you will get the desired effect in these browsers (or
Konqueror) without a table layout.

Thanks.

BTW, at first I didn't even see the header or footer. The color makes
it practically invisible to begin with, plus the font size is illegibly
small for me. :hover color doesn't make it any more readable, either.

Good point on the colors. They looked fine on my CRT and on the projector
when the presentation was made. The intention was for them to be very
faint. But I looked at it on an LCD monitor the other day and they were
too light. I changed them and will get it uploaded in the near future.

The size I'm not too worried about, since the header and footer aren't
meant to be read on a consistent basis.

Thanks,

--Dan

--
FREE scripts that make web and database programming easier
http://www.analysisandsolutions.com/software/
T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409