Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 06:50 PM
Peter Diedrich
Guest
 
Posts: n/a
Default How to make footer at the bottom in 5 box 3 columns layout

The site design is pretty simple:

============================================
| Head |
============================================
| | | |
| | | |
| left | center | right |
| | | |
| | | |
============================================
| Footer |
============================================

I wasted a whole month of my life with frustrating CSS layout try and
error (IE margin hack, quirk quark, float problems, IE peekaboo, etc.,
etc.).

So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.

But... How can I force the footer to stay at the bottom of browser
even if few content does not push it to the bottom. Is there any
chance with a combination of CSS and tables? Please no frame or
scripting. Impossible?

Any help would be very much appreciated.

Peter.
  #2  
Old July 20th, 2005, 06:51 PM
Michael Wilcox
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

Peter Diedrich <pdiedrich@gmx.de> wrote:[color=blue]
> I wasted a whole month of my life with frustrating CSS layout try and
> error (IE margin hack, quirk quark, float problems, IE peekaboo, etc.,
> etc.).[/color]

I'm sorry you were unsuccessful with CSS. It can be very tricky to
accomplish what you want. However, there are several examples which sound
very close to what you want.
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs...oxnoscript.htm
http://glish.com/css/2.asp
[color=blue]
> So I ended up using a simple table layout as it is easy as 1,2,3 and
> is liquid as it can be.[/color]

Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
if possible.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


  #3  
Old July 20th, 2005, 06:51 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> I'm sorry you were unsuccessful with CSS. It can be very tricky to[color=blue]
> accomplish what you want. However, there are several examples which sound
> very close to what you want.
> http://www.saila.com/usage/layouts/s...ayout-ie5.html
> http://glish.com/css/7.asp
> http://bluerobot.com/web/layouts/layout3.html
> http://www.projectseven.com/whims/cs...oxnoscript.htm
> http://glish.com/css/2.asp[/color]

Thanks for the hint. I studied all above well-known examples
thoroughly before but they *all* fail each in certain direction.
Either they have no footer (actually being asked in my initial
posting) or they behave strange in some browsers or have poor
"liquidicity" (rigid side panels or ugly text overlapping when
narrowing the browser).

[color=blue][color=green]
> > So I ended up using a simple table layout as it is easy as 1,2,3 and
> > is liquid as it can be.[/color]
>
> Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
> if possible.[/color]

Mmmh, they simply render *perfectly*. No flaws - Compatible backwards
to HTML 2, rocket fast and slimmest possible code (compared to CSS
*including* all these nasty hacks required). CSS positioning appears
elegant on the paper only. It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.

Any further help?

Peter
  #4  
Old July 20th, 2005, 06:51 PM
Michael Wilcox
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

Peter Diedrich <pdiedrich@gmx.de> wrote:[color=blue]
> Thanks for the hint. I studied all above well-known examples
> thoroughly before but they *all* fail each in certain direction.
> Either they have no footer (actually being asked in my initial
> posting)[/color]

Exactly how big do you need your footer? Can it be at the bottom of your
content, like the copyright at projectseven?
[color=blue]
> or they behave strange in some browsers or have poor
> "liquidicity" (rigid side panels or ugly text overlapping when
> narrowing the browser).[/color]

Which browsers did this for you? Which designs? These were all tested to be
fine in the major browsers.
[color=blue]
> Mmmh, they simply render *perfectly*.[/color]

Have you ever listened to a layout table being rendered in a speach browser?
Or seen it rendered by a text-only browser like Lynx? Have you ever
considered that when tables were introduced in HTML 2 they were for tabular
data, not presentation?
[color=blue]
> rocket fast and slimmest possible code (compared to CSS
> *including* all these nasty hacks required).[/color]

Tables making slim code? No, not really. They create more problems then
they're worth. CSS code, on the other hand, is cached by the browser and
most certainly does not require "nasty hacks."
[color=blue]
> CSS positioning appears
> elegant on the paper only.[/color]

http://www.csszengarden.com/
[color=blue]
> It simply does not work as well as tables.
> My simple table layout works so smooth ...except the footer.[/color]

One of the things people find hardest when switching to a CSS deign is
learning to let go of tabular, boxy designs. Consider writing your code as
simply and sematically correct as possible. Use h1, h2, h3, etc for
headings, <p> for paragraphs, lists for navigation lists, and so on. Once
it's been written and ordered correctly, then add some style. You don't have
to go overboard, and you'll find that if you make your pages simple and
structred the same, the same style sheet will work for any page.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


  #5  
Old July 20th, 2005, 06:51 PM
Stephen Poley
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

On 28 Feb 2004 10:28:43 -0800, pdiedrich@gmx.de (Peter Diedrich) wrote:
[color=blue]
>But... How can I force the footer to stay at the bottom of browser
>even if few content does not push it to the bottom. Is there any
>chance with a combination of CSS and tables?[/color]

<rant>
Where on earth does this bizarre fetish for footers at the bottom of the
browser window come from? (I'm not getting at you personally but at all
the people who keep asking for this.)

If people are working in Word (or any other word-processor I have used)
page footers do not sit at the bottom of the window. Nor in Excel (or
any other spreadsheet I have used.) Nor in Access. Nor In PDF. Nor in
any e-mail program I can immediately recall. Nor any newsreader. Nor any
drawing program.

So why for ****'* **** do some people think it's necessary in a
browser?? The logical place for a footer is at the bottom of the page.
It does *not* need to be anywhere else.

If you have a problem with a footer half-way down your window there are
two simple and reliable solutions:

1) remove the footer, or
2) write some more content.

</rant>
[color=blue]
>Please no frame or scripting.[/color]

Ah OK, I see you're a good guy really. ;-)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
  #6  
Old July 20th, 2005, 06:51 PM
Michael Wilcox
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

Peter Diedrich <pdiedrich@gmx.de> wrote:[color=blue]
> But... How can I force the footer to stay at the bottom of browser
> even if few content does not push it to the bottom. Is there any
> chance with a combination of CSS and tables? Please no frame or
> scripting. Impossible?[/color]

Stephen Poley's post got me thinking about your original question. Were you
thinking something along the lines of position: fixed;? If so, be warned
that it doesn't work in IE.

<div style="position: fixed; bottom: 0; left: 0;">Some footer stuff
here</div>

Then be sure your body has a bottom margin large enough to hold the footer
when the page reaches the bottom (and for IE, which will interpret "fixed"
as "absolute").
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


  #7  
Old July 20th, 2005, 06:51 PM
Barbara de Zoete
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout



Stephen Poley wrote:[color=blue]
> On 28 Feb 2004 10:28:43 -0800, pdiedrich@gmx.de (Peter Diedrich) wrote:
>[color=green]
>>But... How can I force the footer to stay at the bottom of browser
>>even if few content does not push it to the bottom. Is there any
>>chance with a combination of CSS and tables?[/color]
>
> <rant>[/color]
[snip for peace sake][color=blue]
> </rant>
>[color=green]
>>Please no frame or scripting.[/color]
>
> Ah OK, I see you're a good guy really. ;-)[/color]

I *do* hope the OP is still reading up to this point ;-)

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

  #8  
Old July 20th, 2005, 06:51 PM
Neal
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

On Sun, 29 Feb 2004 21:23:17 +0100, Stephen Poley
<sbpoleySpicedHamTrap@xs4all.nl> wrote:
[color=blue]
> Where on earth does this bizarre fetish for footers at the bottom of the
> browser window come from? (I'm not getting at you personally but at all
> the people who keep asking for this.)[/color]

Gee whiz, in magazines the footer's on the bottom of the sheet of paper
all the time!

Did you ever get the idea that flashy magazine layout has been the guiding
force of bad web design for a while now? Oftern I look at a magazine
article and marvel at hw much the layout reminds me of some awful webpage.
  #9  
Old July 20th, 2005, 06:51 PM
Alan J. Flavell
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

On Sun, 29 Feb 2004, Neal wrote:
[color=blue]
> Oftern I look at a magazine
> article and marvel at hw much the layout reminds me of some awful webpage.[/color]

Sounds like a nasty case of reverse-engineering :-}
  #10  
Old July 20th, 2005, 06:51 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> Stephen Poley's post got me thinking about your original question. Were you[color=blue]
> thinking something along the lines of position: fixed;? If so, be warned
> that it doesn't work in IE.
>
> <div style="position: fixed; bottom: 0; left: 0;">Some footer stuff
> here</div>[/color]

That's exactly what I tried. And as you say, no joy in IE. Just try to
scroll the window and you see that CSS has another definition of
"bottom" as the browser. The footer scrolls and overlaps the content.
By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)

CSS is GREAT for styling text but a total failure in respect of liquid
layout. It is not your personal fault and I appreciate your
responsiveness but it is simply driving mad. Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.

Yet another hack or browser switch thing? Another style sheet for IE?

Peter
  #11  
Old July 20th, 2005, 06:51 PM
Markus Ernst
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Michael Wilcox" <mjwilcoDONTWANTSPAM@yahoo.com> schrieb im Newsbeitrag
news:fQr0c.26865$W74.4800@newsread1.news.atl.earth link.net...

[...]
[color=blue]
> One of the things people find hardest when switching to a CSS deign is
> learning to let go of tabular, boxy designs.[/color]

Michael, of course you are right with everything you write. But the layout
that the OP would like to achieve is really nothing special or even
complicated. It is very basic. It is just: I want an element to align at the
bottom of the window _or_ at the bottom of the page, if the content is
longer than the window.

I spend very much time to explain almost every client that exactly this is
not possible (exept with a frame layout and all its downsides), and some of
them end up in doubting my competence as it is something they see everywere.
Most of them choose a frame solution then, because they want their website
to look as "good" as their competitor's in IE6. That's their world, I can't
change it, I can just talk, they decide.

There should be simple solutions for simple and basic needs. CSS - when,
many years from now, all common visual browsers will support it correctly -
provides simple solutions for some basic needs, but a lot is still missing
in the specs. Just imagine 2 elements with widths of 30% and 70%, with a 2
pixel border each and a 2 em gap between them. This is not possible, I think
not even with CSS3 (where you can at least define a border box model), as
units can't be calculated.

This is not against you of course, I read a lot of threads in this group and
highly appreciate your and other's suggestions and comments. It's just a
pity that "change your design" is the correct answer far too often.

--
Markus


  #12  
Old July 20th, 2005, 06:51 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> Exactly how big do you need your footer? Can it be at the bottom of your[color=blue]
> content, like the copyright at projectseven?[/color]

No, this would be simple to make with tables (and CSS as well).

The challenge is to stack the footer on top of the status bar of the
browser independing of the amount of content. I could live with if the
content pushes the footer downward out of the view port but it should
not hang in the middle of the browser when there is few content.

[color=blue][color=green]
> > or they behave strange in some browsers or have poor
> > "liquidicity" (rigid side panels or ugly text overlapping when
> > narrowing the browser).[/color]
>
> Which browsers did this for you? Which designs? These were all tested to be
> fine in the major browsers.[/color]

I use Firebird and IE6. All suggested designs fail regarding the
footer. Either the footer is missing at all or the footer is not a
footer but a line of text which does not stay at the bottom.

[color=blue][color=green]
> > Mmmh, they simply render *perfectly*.[/color]
>
> Have you ever listened to a layout table being rendered in a speach browser?[/color]

Often heard, but sorry, is this argument not pretty lame? I have to
accept to do without 0.00001% site visitors who uses speech/text
browsers for a better compatibility for 99.999999% of my visitors with
standard browsers.

Our website is targeted to not visually impaired people only as it is
about graphics. And, are there more than 5 users world-wide in total
which still use Lynx? ;-)

[color=blue]
> Or seen it rendered by a text-only browser like Lynx? Have you ever
> considered that when tables were introduced in HTML 2 they were for tabular
> data, not presentation?x[/color]

I fully agree, but tables work and CSS seems to fail in many aspects.
My table layout looks not too bad in Lynx.

[color=blue]
> Tables making slim code? No, not really.[/color]

Would you really go so far to say that this piece of code is bloated?

-----------------
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">header</td>
</tr>
<tr>
<td width="15%">left</td>
<td width="70%">center</td>
<td width="15%">right</td>
</tr>
<tr>
<td colspan="3">footer</td>
</tr>
</table>
-----------------

[color=blue]
> They create more problems then
> they're worth.[/color]

But where is the problem if there is any? In my personal experience -
and I was willing to spend a LOT of time getting into it - CSS
layouting is a pure nightmare. Almost nothing works consistently with
the range of popular browser. But what I know for sure is that above
table layout renders perfect on all popular browsers. I am tired of
seeking trouble. ;-)

Otherwise please explain me, why my CSS book comes with a DIN A3 chart
in small letters with a CSS browser compatibility chart: "This
property works, that fails, this only with that hack, etc.". CSS
reinvented the word "problem" in its very own fashion.

[color=blue]
> CSS code, on the other hand, is cached by the browser and
> most certainly does not require "nasty hacks."[/color]

And why is there an IE6 peekaboo, a Tantek box model hack for IE5, an
@import switch for NN4? Not yet spoken about Mac browsers and their
world of problems? I have gone through all these flaws and have the
feeling that I still scratched the surface of problems with CSS. It
seems to never end.

[color=blue][color=green]
> > CSS positioning appears
> > elegant on the paper only.[/color]
>
> http://www.csszengarden.com/[/color]

Yes, lovely indeed. I browsed this wonderful site literally for hours
earlier and was deeply impressed. This site was actually the
motivation to dig into CSS for me.

But the layout is not as fluid as my table layout and I was not able
to find out whether it has a footer as requested above. There is
always too much content on each page to figure out.


[color=blue][color=green]
> > It simply does not work as well as tables.
> > My simple table layout works so smooth ...except the footer.[/color]
>
> One of the things people find hardest when switching to a CSS deign is
> learning to let go of tabular, boxy designs.[/color]

Well, what else than a box is a <div>? It is nothing more or less than
a cell. What you put into the rectangle counts, not how you create the
cell.

[color=blue]
> Consider writing your code as
> simply and sematically correct as possible. Use h1, h2, h3, etc for
> headings, <p> for paragraphs, lists for navigation lists, and so on. Once
> it's been written and ordered correctly, then add some style. You don't have
> to go overboard, and you'll find that if you make your pages simple and
> structred the same, the same style sheet will work for any page.[/color]

I use and *love* CSS to style everything EXCEPT layout because it is
troublesome.

Peter.

P.S.: My apologies. I do not want to start yet another holy war of CSS
vs. tables. I just asked how to make a footer at the border. I would
love to do it with CSS if it could be done.
  #13  
Old July 20th, 2005, 06:51 PM
Eric Bohlman
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40432ac3$0$21327$afc38c87@news.easynet.ch:
[color=blue]
> There should be simple solutions for simple and basic needs. CSS -
> when, many years from now, all common visual browsers will support it
> correctly - provides simple solutions for some basic needs, but a lot
> is still missing in the specs. Just imagine 2 elements with widths of
> 30% and 70%, with a 2 pixel border each and a 2 em gap between them.
> This is not possible, I think not even with CSS3 (where you can at
> least define a border box model), as units can't be calculated.[/color]

Container divs are your friend:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Setting widths flexibly</title>
<style type="text/css">
#smaller {width: 30%;float: left;}
#bigger {width: 70%;float: left;}
#smaller div {border: 2px solid black; margin-right: 1em;}
#bigger div {border: 2px solid black; margin-left: 1em;}
</style>
</head>
<body>
<div id="smaller">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin auctor,
nunc sit amet ultrices cursus, est nulla imperdiet nibh, ac dignissim massa
odio eget massa. Integer scelerisque nisl eu sapien. Nulla at elit. Duis
mauris diam, vestibulum ut, varius non, suscipit ac, erat.
</p>
</div>
</div>
<div id="bigger">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin auctor,
nunc sit amet ultrices cursus, est nulla imperdiet nibh, ac dignissim massa
odio eget massa. Integer scelerisque nisl eu sapien. Nulla at elit. Duis
mauris diam, vestibulum ut, varius non, suscipit ac, erat.
</p>
</div>
</div>
</body>
</html>

  #14  
Old July 20th, 2005, 06:51 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> <rant>[color=blue]
> Where on earth does this bizarre fetish for footers at the bottom of the
> browser window come from? (I'm not getting at you personally but at all
> the people who keep asking for this.)[/color]


* Look at your empty browser. What do you see? A status bar. This is a
'footer'

* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.

* Look at 90% of industry standard websites. What do you see? A footer
at the bottom of each page

It provides information where users expect it by their browsing
experience accumulated over years. A footer gives the layout its
bottom frame. If you like it or not. It's standard.

[color=blue]
> If people are working in Word (or any other word-processor I have used)
> page footers do not sit at the bottom of the window.[/color]

They do. Word has a footer and header functionality firmly integrated
into the application.

[color=blue]
> Nor in Excel (or[/color]

They do. Just try to *print* an Excel spreadsheet. It may optionally
include a footer which will be in the bottom of the page.

[color=blue]
> Nor in Access.[/color]

Access is a database and has nothing to do with layout. Anyway, if you
print a table of data it may also have a footer.

[color=blue]
> Nor In PDF.[/color]

PDF is a file format and not a layout scheme. You can put whatever you
like in a PDF.

[color=blue]
> Nor in
> any e-mail program I can immediately recall.[/color]

Print an Outlook email and you will find a footer containing at least
the page count.

Errm, have you actually ever used any of above programs? ;-)

Peter (Shaking head)
  #15  
Old July 20th, 2005, 06:51 PM
Kris
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

In article <8205d6ad.0403010232.425fec6d@posting.google.com >,
pdiedrich@gmx.de (Peter Diedrich) wrote:
[color=blue]
> CSS is GREAT for styling text but a total failure in respect of liquid
> layout.[/color]

Sticking a footer text to the absolute bottom of the viewport is an
example of fixed layout, not liquid layout.

Liquid layout allows the footer to position itself at the end of the
page, no matter how long or tall the page is. This is a Good Thing for
various reasons that require a thread of their own.

--
Kris
<kristiaan@xs4all.netherlands> (nl)
<http://www.cinnamon.nl/>
  #16  
Old July 20th, 2005, 06:51 PM
Markus Ernst
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Eric Bohlman" <ebohlman@earthlink.net> schrieb im Newsbeitrag
news:Xns949F487CC3302ebohlmanomsdevcom@130.133.1.4 ...[color=blue]
> "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
> news:40432ac3$0$21327$afc38c87@news.easynet.ch:
>[color=green]
> > There should be simple solutions for simple and basic needs. CSS -
> > when, many years from now, all common visual browsers will support it
> > correctly - provides simple solutions for some basic needs, but a lot
> > is still missing in the specs. Just imagine 2 elements with widths of
> > 30% and 70%, with a 2 pixel border each and a 2 em gap between them.
> > This is not possible, I think not even with CSS3 (where you can at
> > least define a border box model), as units can't be calculated.[/color]
>
> Container divs are your friend:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>Setting widths flexibly</title>
> <style type="text/css">
> #smaller {width: 30%;float: left;}
> #bigger {width: 70%;float: left;}
> #smaller div {border: 2px solid black; margin-right: 1em;}
> #bigger div {border: 2px solid black; margin-left: 1em;}
> </style>[/color]
[...]

Okay I see I have to think more about nesting elements. (At some window
widths it wraps in IE6, but this can be fixed with a total width of 99%). Do
you also have solutions for:
- #smaller = 200px (for a logo gif), #bigger = rest of the page
- making both divs the same height
- or even for the OP's task?

--
Markus


  #17  
Old July 20th, 2005, 06:51 PM
Bertilo Wennergren
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

Peter Diedrich:
[color=blue][color=green][color=darkred]
>> > Mmmh, they simply render *perfectly*.[/color][/color][/color]
[color=blue][color=green]
>> Have you ever listened to a layout table being rendered in a speach browser?[/color][/color]
[color=blue]
> Often heard, but sorry, is this argument not pretty lame? I have to
> accept to do without 0.00001% site visitors who uses speech/text
> browsers for a better compatibility for 99.999999% of my visitors with
> standard browsers.[/color]

You wrote "they simply render *perfectly*". It might well be that you
only care about certain kinds of users, or that you find 99.999999% or
whatever good enough. But it's not perfect.

--
Bertilo Wennergren <bertilow@gmx.net> <http://www.bertilow.com>
  #18  
Old July 20th, 2005, 06:51 PM
Eric Bohlman
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40434259$0$3142$afc38c87@news.easynet.ch:
[color=blue]
> Okay I see I have to think more about nesting elements. (At some
> window widths it wraps in IE6, but this can be fixed with a total
> width of 99%). Do you also have solutions for:
> - #smaller = 200px (for a logo gif), #bigger = rest of the page[/color]

Dead easy: set a 200px width for #smaller and no width (which defaults to
width: auto) for #bigger.
[color=blue]
> - making both divs the same height[/color]

Depends on why you're trying to do that. One common reason is that the two
divs have different background colors and you want the shorter one's
background color to extend vertically all the way to the bottom of the
longer one. In that case you can set the body's (or container div's)
background color to the background you want for the shorter one, and then
set the taller one's background.
  #19  
Old July 20th, 2005, 06:51 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:[color=blue]
>"Eric Bohlman" <ebohlman@earthlink.net> schrieb im Newsbeitrag
>news:Xns949F487CC3302ebohlmanomsdevcom@130.133.1. 4...[color=green]
>> "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
>> news:40432ac3$0$21327$afc38c87@news.easynet.ch:
>>[color=darkred]
>> > There should be simple solutions for simple and basic needs. CSS -
>> > when, many years from now, all common visual browsers will support it
>> > correctly - provides simple solutions for some basic needs, but a lot
>> > is still missing in the specs. Just imagine 2 elements with widths of
>> > 30% and 70%, with a 2 pixel border each and a 2 em gap between them.
>> > This is not possible, I think not even with CSS3 (where you can at
>> > least define a border box model), as units can't be calculated.[/color]
>>
>> Container divs are your friend:
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>> <html>
>> <head>
>> <title>Setting widths flexibly</title>
>> <style type="text/css">
>> #smaller {width: 30%;float: left;}
>> #bigger {width: 70%;float: left;}
>> #smaller div {border: 2px solid black; margin-right: 1em;}
>> #bigger div {border: 2px solid black; margin-left: 1em;}
>> </style>[/color]
> [...]
>
>Okay I see I have to think more about nesting elements. (At some window
>widths it wraps in IE6, but this can be fixed with a total width of 99%). Do
>you also have solutions for:
>- #smaller = 200px (for a logo gif), #bigger = rest of the page[/color]

#smaller {width: 200px; float: left;}
#bigger {margin-left: 200px;}

However, not especially liquid, as on narrow screens #bigger can't
drop down below #smaller.
[color=blue]
>- making both divs the same height[/color]

In theory, display: table-cell; but that's not supported by IE, so
various nasty hacks. See below for one.
[color=blue]
>- or even for the OP's task?[/color]

Is this close?
http://steve.pugh.net/test/test57-short.html
(see also http://steve.pugh.net/test/test57c-.html for latest version
of the footer code but only using two columns and no background
colours.)

Works in most modern browsers, degrades to having the footer after the
content in other browsers. If I could get it to work rather than
degrade in Mac IE5 I'd be a happy man.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
  #20  
Old July 20th, 2005, 06:52 PM
Stephen Poley
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

On 1 Mar 2004 05:09:43 -0800, pdiedrich@gmx.de (Peter Diedrich) wrote:
[color=blue][color=green]
>> <rant>
>> Where on earth does this bizarre fetish for footers at the bottom of the
>> browser window come from? (I'm not getting at you personally but at all
>> the people who keep asking for this.)[/color]
>
>* Look at your empty browser. What do you see? A status bar. This is a
>'footer'[/color]

Actually no. I don't see a status bar, or any other sort of footer.
Though it's true I could put one there if I wanted to.
But your question was about documents within the browser window, so what
is your point?

[color=blue]
>* Look on your newspaper or a book. What do you see? A footer with a
>page count, copyright information or whatever.[/color]

Not remotely relevant to the question, since the question was about
browser windows, not printed documents. (But just to humour you, I
pulled five books at random off my bookshelves, and as it happened four
had no page footer of any kind.)

[color=blue]
>* Look at 90% of industry standard websites. What do you see? A footer
>at the bottom of each page[/color]

What you are talking about? Show me *one* site that produces a footer at
the bottom of each printed page.

Oh hang on, I guess you've stopped talking about printed pages again.
Yes - a footer at the bottom of each *web* page. Precisely. No problems
there.
But you were asking for a footer at the bottom of the *window* - weren't
you?
[color=blue]
>It provides information where users expect it by their browsing
>experience accumulated over years. A footer gives the layout its
>bottom frame. If you like it or not. It's standard.[/color]

So which information that is so important to users is in this footer as
standard, pray?
[color=blue][color=green]
>> If people are working in Word (or any other word-processor I have used)
>> page footers do not sit at the bottom of the window.[/color]
>
>They do.[/color]

Utter rubbish. They sit at the bottom of the *page*.
<font size=42> The PAGE </font>. Not the window.
[color=blue][color=green]
>> Nor in Excel (or[/color]
>
>They do. Just try to *print* an Excel spreadsheet. It may optionally
>include a footer which will be in the bottom of the page.[/color]

Of course - when printed. Are you talking about windows or paper? Do you
have a clue?
[color=blue][color=green]
>> Nor in Access.[/color]
>
>Access is a database and has nothing to do with layout.[/color]

Access has a built-in GUI, though it appears to have escaped you.
[color=blue][color=green]
>> Nor In PDF.[/color]
>
>PDF is a file format and not a layout scheme. You can put whatever you
>like in a PDF.[/color]

OK - I should have said in a PDF reader. Yes, you can put anything you
like in a PDF, much as you can in a Web document, but it doesn't hover
at the bottom of the reader window, and users don't expect it to.
[color=blue][color=green]
>> Nor in
>> any e-mail program I can immediately recall.[/color]
>
>Print an Outlook email and you will find a footer containing at least
>the page count.
>
>Errm, have you actually ever used any of above programs? ;-)[/color]

Well, only for about the last ten years, I must admit. At least I know
the difference between a GUI window, a web page and a printed document,
which you don't seem to have grasped yet.
[color=blue]
>Peter (Shaking head)[/color]

*You* are shaking your head?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
  #21  
Old July 20th, 2005, 06:52 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout


"Peter Diedrich" <pdiedrich@gmx.de> wrote in message
news:8205d6ad.0403010509.6e3953c1@posting.google.c om...[color=blue][color=green]
> > <rant>
> > Where on earth does this bizarre fetish for footers at the bottom of the
> > browser window come from? (I'm not getting at you personally but at all
> > the people who keep asking for this.)[/color]
>
>
> * Look at your empty browser. What do you see? A status bar. This is a
> 'footer'[/color]

If you're using your web site as a platform for distributing an application
that reacts to user input in real time, it may make sense to have a status
bar fixed in the display. If you're just serving ordinary web pages, there's
no "status" to display.
[color=blue]
>
> * Look on your newspaper or a book. What do you see? A footer with a
> page count, copyright information or whatever.[/color]

In a book or publication or printed report with footers, the footers are at
a fixed location because the page's are physically the same height. With a
web document, pages are of variable height, and you normally display the
footer (links, copyright info, etc.) at the bottom of the text, not at the
bottom of the window.
[color=blue]
>
> * Look at 90% of industry standard websites. What do you see? A footer
> at the bottom of each page[/color]

Exactly. As opposed to fixed at the bottom of the window.
[color=blue]
>
> It provides information where users expect it by their browsing
> experience accumulated over years. A footer gives the layout its
> bottom frame. If you like it or not. It's standard.
>
>[color=green]
> > If people are working in Word (or any other word-processor I have used)
> > page footers do not sit at the bottom of the window.[/color]
>
> They do. Word has a footer and header functionality firmly integrated
> into the application.[/color]

In Word, in Print View mode, as you scroll through your document, the
headers and footers are displayed where they belong on every page. They are
not in fixed positions at the top and bottom of the Word window. By invoking
Word you are not explaining why you think that in a browser window, the
footer should appear fixed at the bottom of the window instead of flowing at
the bottom of the document.

  #22  
Old July 20th, 2005, 06:52 PM
Michael Wilcox
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

Peter Diedrich <pdiedrich@gmx.de> wrote:[color=blue]
> That's exactly what I tried. And as you say, no joy in IE. Just try to
> scroll the window and you see that CSS has another definition of
> "bottom" as the browser. The footer scrolls and overlaps the content.[/color]

And isn't that what you wanted? Fixed will make it stay at the bottom of the
viewport, absolute will make it stay at the bottom of the screen (it'll go
away when you scroll).
[color=blue]
> By the way, we speak of the most frequently used browser and not about
> speech or pre-historian text only browsers ;-)[/color]

A good page will not differentiate between any browser except for the
presentation. Content should be structured well enough so it doesn't matter
what browser is rendering it.
[color=blue]
> CSS is GREAT for styling text but a total failure in respect of liquid
> layout.[/color]

Many have had great success. Can your design change to something that's
already been accomplished?
[color=blue]
> Simplest things and top
> most essential things like a "simple" footer which appears on billion
> websites can't be done in CSS easily.[/color]

Again, I'm a little unclear on what you mean by footer. One which is always
viewable or one which is at the bottom and can be scrolled out of view?
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


  #23  
Old July 20th, 2005, 06:52 PM
Michael Wilcox
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

Peter Diedrich <pdiedrich@gmx.de> wrote:[color=blue]
> I use Firebird and IE6. All suggested designs fail regarding the
> footer. Either the footer is missing at all or the footer is not a
> footer but a line of text which does not stay at the bottom.[/color]

Ok since you use both FB and IE, I'll make some demo pages.
http://mikewilcox.curvedspaces.com/demo1.html
http://mikewilcox.curvedspaces.com/demo2.html

They'll look the same in IE, but different in FB.
[color=blue]
> Often heard, but sorry, is this argument not pretty lame?[/color]

I'd hate to have to listen to a site in a speech browser that was written
poorly. Really, a lot of people get out of doing something (i.e., CSS)
that's outside of their standard tables, then say that it really doesn't
matter whether it can be listened to or not.
[color=blue]
> Our website is targeted to not visually impaired people only as it is
> about graphics. And, are there more than 5 users world-wide in total
> which still use Lynx? ;-)[/color]

Well, there's more people with text browsers other than lynx, but there's
also people who browse with author style sheets off and/or with their own
styles.
[color=blue]
> I fully agree, but tables work and CSS seems to fail in many aspects.[/color]

Apparently you and I have a different version of "work." For me, "work"
means it's rendered without problems on any browser, including old, broken,
or alternative format browsers. For others, "work" means it's using only
what they were taught (tables).
[color=blue]
> Would you really go so far to say that this piece of code is bloated?[/color]
<snip code>

When loaded on many pages with more complex layouts (such as a higher volume
site), then the code becomes costly (more bandwidth usage). CSS greatly
streamlines the process.
[color=blue]
> And why is there an IE6 peekaboo, a Tantek box model hack for IE5[/color]

IE has notoriously poor support for CSS. Hacks like these make things easier
while we wait for MS to catch up.
[color=blue]
> an @import switch for NN4?[/color]

It's my understanding that NS4 was one of the first (the first?) browsers to
implement CSS 1. This was riddled with inconsistencies, and many developers
(myself included) simply don't style for it. NS4 will only get the plain
(but still entirely useful) page without style from me (that, or one with
few style suggestions).
[color=blue]
> Not yet spoken about Mac browsers and their
> world of problems?[/color]

Safari? That has great CSS support. IE for Mac has just about as bad of
support as it does on Windows.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


  #24  
Old July 20th, 2005, 06:52 PM
Markus Ernst
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Steve Pugh" <steve@pugh.net> schrieb im Newsbeitrag
news:6gl640ddqtjp7vlknkq8ukciokstla3pk3@4ax.com...[color=blue]
> "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:[color=green]
> >"Eric Bohlman" <ebohlman@earthlink.net> schrieb im Newsbeitrag
> >news:Xns949F487CC3302ebohlmanomsdevcom@130.133.1. 4...[color=darkred]
> >> "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
> >> news:40432ac3$0$21327$afc38c87@news.easynet.ch:
> >>
> >> > There should be simple solutions for simple and basic needs. CSS -
> >> > when, many years from now, all common visual browsers will support it
> >> > correctly - provides simple solutions for some basic needs, but a lot
> >> > is still missing in the specs. Just imagine 2 elements with widths of
> >> > 30% and 70%, with a 2 pixel border each and a 2 em gap between them.
> >> > This is not possible, I think not even with CSS3 (where you can at
> >> > least define a border box model), as units can't be calculated.
> >>
> >> Container divs are your friend:
> >>
> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> >> "http://www.w3.org/TR/html4/strict.dtd">
> >> <html>
> >> <head>
> >> <title>Setting widths flexibly</title>
> >> <style type="text/css">
> >> #smaller {width: 30%;float: left;}
> >> #bigger {width: 70%;float: left;}
> >> #smaller div {border: 2px solid black; margin-right: 1em;}
> >> #bigger div {border: 2px solid black; margin-left: 1em;}
> >> </style>[/color]
> > [...]
> >
> >Okay I see I have to think more about nesting elements. (At some window
> >widths it wraps in IE6, but this can be fixed with a total width of 99%).[/color][/color]
Do[color=blue][color=green]
> >you also have solutions for:
> >- #smaller = 200px (for a logo gif), #bigger = rest of the page[/color]
>
> #smaller {width: 200px; float: left;}
> #bigger {margin-left: 200px;}
>
> However, not especially liquid, as on narrow screens #bigger can't
> drop down below #smaller.
>[color=green]
> >- making both divs the same height[/color]
>
> In theory, display: table-cell; but that's not supported by IE, so
> various nasty hacks. See below for one.
>[color=green]
> >- or even for the OP's task?[/color]
>
> Is this close?
> http://steve.pugh.net/test/test57-short.html
> (see also http://steve.pugh.net/test/test57c-.html for latest version
> of the footer code but only using two columns and no background
> colours.)
>
> Works in most modern browsers, degrades to having the footer after the
> content in other browsers. If I could get it to work rather than
> degrade in Mac IE5 I'd be a happy man.[/color]

I can't find the second example (get your lost page). Anyway the first one
is astonishing! Definitely close and very creative.

Anyway the background-image hack creates strange color differences on both
my PC and my Mac (not in IE6/PC); you could maybe solve this by adding the
background images also to #right and #content. IE 6 displays a 1 or 2 pixel
gap below the footer, and Netscape 7 seems to need a lot of work to render
the page.

About Mac IE: On sites where I work with a content management (and thus not
have a file per page but only one per template) I sometimes make a server
side UA sniff and send a clean table layout version to Netscape 4, PC IE
below 5 and Mac IE. If the background colors are not continued below the
footer it does not look broken, and this is easy with a table layout.

Well, besides admiring your hack I still hope for a bright future where it
will not be necessary...

--
Markus


  #25  
Old July 20th, 2005, 06:52 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:[color=blue]
>"Steve Pugh" <steve@pugh.net> schrieb im Newsbeitrag
>news:6gl640ddqtjp7vlknkq8ukciokstla3pk3@4ax.com.. .[/color]
[color=blue][color=green]
>> Is this close?
>> http://steve.pugh.net/test/test57-short.html
>> (see also http://steve.pugh.net/test/test57c-.html for latest version
>> of the footer code but only using two columns and no background
>> colours.)
>>
>> Works in most modern browsers, degrades to having the footer after the
>> content in other browsers. If I could get it to work rather than
>> degrade in Mac IE5 I'd be a happy man.[/color]
>
>I can't find the second example (get your lost page).[/color]

Sorry, should have been http://steve.pugh.net/test/test57c.html
[color=blue]
>Anyway the first one is astonishing! Definitely close and very creative.[/color]

Standing on the shoulders of giants, etc. (i.e. not all my own work.)
[color=blue]
>Anyway the background-image hack creates strange color differences on both
>my PC and my Mac (not in IE6/PC);[/color]

Is it just that the background colours don't match the background
images? I get that in all browsers except Win IE6 - must be something
funny in the PNGs.
[color=blue]
>you could maybe solve this by adding the
>background images also to #right and #content.[/color]

Or just see if GIFs are handled more consistently.
[color=blue]
>IE 6 displays a 1 or 2 pixel gap below the footer,[/color]

I know about that. I've tried to remove it but it wont budge. Annoying
but ultimately harmless.
[color=blue]
>and Netscape 7 seems to need a lot of work to render
>the page.[/color]

The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.
[color=blue]
>About Mac IE: On sites where I work with a content management (and thus not
>have a file per page but only one per template) I sometimes make a server
>side UA sniff and send a clean table layout version to Netscape 4, PC IE
>below 5 and Mac IE. If the background colors are not continued below the
>footer it does not look broken, and this is easy with a table layout.[/color]

UA sniffing simply isn't reliable and Mac IE5 has better CSS support
than Win IE5.

That's the problem here - it supports more of CSS than Win IE does but
not as much as Mozilla, so it sees some bits of the code that should
be seen by advanced, i.e. non-IE, (hmm wonder what a screen reader
would have made of that) browsers but not all of those bits.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
  #26  
Old July 20th, 2005, 06:52 PM
Markus Ernst
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Steve Pugh" <steve@pugh.net> schrieb im Newsbeitrag
news:dc7940tjfi496obgcrt0n8ie3bhc4vf2u0@4ax.com...[color=blue]
> "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:[color=green]
> >"Steve Pugh" <steve@pugh.net> schrieb im Newsbeitrag
> >news:6gl640ddqtjp7vlknkq8ukciokstla3pk3@4ax.com.. .[/color][/color]

[...]
[color=blue][color=green]
> >you could maybe solve this by adding the
> >background images also to #right and #content.[/color]
>
> Or just see if GIFs are handled more consistently.[/color]

Possible, but I doubt that there is a cross-browser consistent color
rendering at all, as a background color and a GIF or JPG with the same color
definition are displayed differently on systems with 32678 colors while they
fit perfectly on million-color-displays.

[...]
[color=blue][color=green]
> >and Netscape 7 seems to need a lot of work to render
> >the page.[/color]
>
> The PNGs take a while to appear don't they? Heaven knows why, they're
> only 500 bytes.[/color]

Even resizing the window takes some time, too, so it does not seem to have
anything to do with loading. What dimensions do they have? I think to
remember that I tried using very small background images (1 x 1 pixel) years
ago as I thaught minimizing loading time, but that resulted in slowing down
Netscape 4 extremely as it needed to repeat the image too many times.
[color=blue][color=green]
> >About Mac IE: On sites where I work with a content management (and thus[/color][/color]
not[color=blue][color=green]
> >have a file per page but only one per template) I sometimes make a server
> >side UA sniff and send a clean table layout version to Netscape 4, PC IE
> >below 5 and Mac IE. If the background colors are not continued below the
> >footer it does not look broken, and this is easy with a table layout.[/color]
>
> UA sniffing simply isn't reliable and Mac IE5 has better CSS support
> than Win IE5.[/color]

It is reliable enaugh for this task - if somebody makes Opera or whatever
identify itself as Netscape 4 he shall get what he ordered...
[color=blue]
> That's the problem here - it supports more of CSS than Win IE does but
> not as much as Mozilla, so it sees some bits of the code that should
> be seen by advanced, i.e. non-IE, (hmm wonder what a screen reader
> would have made of that) browsers but not all of those bits.[/color]

Mac IE5 seems to have a serious problem with the box model; I don't know
what it is exactly but sometimes it is just really annoying. Well, not as
annoying as Netscape 4, though, but it is still better to deliver a
text-only page than a page that looks broken in any way. (Ok, it's theory, I
don't deliver text-only pages in practice...)

--
Markus


  #27  
Old July 20th, 2005, 06:52 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:[color=blue]
>"Steve Pugh" <steve@pugh.net> schrieb im Newsbeitrag
>news:dc7940tjfi496obgcrt0n8ie3bhc4vf2u0@4ax.com.. .
>[color=green]
>> Or just see if GIFs are handled more consistently.[/color]
>
>Possible, but I doubt that there is a cross-browser consistent color
>rendering at all, as a background color and a GIF or JPG with the same color
>definition are displayed differently on systems with 32678 colors while they
>fit perfectly on million-color-displays.[/color]

But in this case I'm seeing a colour difference on a 32bit display.
That suggest that either I set the wrong colour in the CSS or the PNG
or that something is awry with the rendering.

And a quick check reveals that the PNGs do indeed have different
colours to the CSS. Mea culpe.
[color=blue][color=green]
>> The PNGs take a while to appear don't they? Heaven knows why, they're
>> only 500 bytes.[/color]
>
>Even resizing the window takes some time, too, so it does not seem to have
>anything to do with loading. What dimensions do they have?[/color]

2000 x 20. They need to be wide in order to place the break between
the white and the colour at the correct percentage point for an
extensive range of browser window sizes. To see why either make your
browser window wider than 2000px or use Opera with a small zoom
setting.
[color=blue]
>I think to
>remember that I tried using very small background images (1 x 1 pixel) years
>ago as I thaught minimizing loading time, but that resulted in slowing down
>Netscape 4 extremely as it needed to repeat the image too many times.[/color]

That's true, very small background images can slow browsers down but I
don't think that's the case here.

Part of the problem may be that by using a combination of absolute
positioning and overflow I've replaced the normal scroll of the web
page with one that's in every way identical but isn't. Um, if you see
what I mean.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
  #28  
Old July 20th, 2005, 06:52 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> > CSS is GREAT for styling text but a total failure in respect of liquid[color=blue][color=green]
> > layout.[/color]
>
> Sticking a footer text to the absolute bottom of the viewport is an
> example of fixed layout, not liquid layout.[/color]

Well, great that you are so clever in definitions. So I apologize for
not being precise enough. I meant *horizontally* liquid. Actually, you
could have read this from my posting but now it is also clear for
pedants ;-)
[color=blue]
> Liquid layout allows the footer to position itself at the end of the
> page, no matter how long or tall the page is. This is a Good Thing for
> various reasons that require a thread of their own.[/color]

I cannot find a single good reason for this behaviour. Do you find the
page counter in a books also depending on the amount of content of the
page? I would say, rather no.

It would be soooo great if instead of chatting funny things about
everything senseless, that someone could *finally* help with the
problem. I assume that I am not the only one who run into trouble with
this footer thing. On the other hand there are so many sites which can
do it. So how, pleeeease?

Peter
  #29  
Old July 20th, 2005, 06:53 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> > That's exactly what I tried. And as you say, no joy in IE. Just try to[color=blue][color=green]
> > scroll the window and you see that CSS has another definition of
> > "bottom" as the browser. The footer scrolls and overlaps the content.[/color]
>
> And isn't that what you wanted? Fixed will make it stay at the bottom of the
> viewport, absolute will make it stay at the bottom of the screen (it'll go
> away when you scroll).[/color]

No, have you actually ever tried IE6 together with the bottom:0px
thing? It behaves ridiculous. The footer overlays the content.

[color=blue][color=green]
> > By the way, we speak of the most frequently used browser and not about
> > speech or pre-historian text only browsers ;-)[/color]
>
> A good page will not differentiate between any browser except for the
> presentation. Content should be structured well enough so it doesn't matter
> what browser is rendering it.[/color]

I agree. But still no answer on my OP.

[color=blue][color=green]
> > CSS is GREAT for styling text but a total failure in respect of liquid
> > layout.[/color]
>
> Many have had great success.[/color]

Yes, either they say "NN4 or Mac IE go elsewhere" or they find
themselves experimenting with numerous above mentioned hacks and
tweaks and stylesheet switches.
[color=blue][color=green]
> > Simplest things and top
> > most essential things like a "simple" footer which appears on billion
> > websites can't be done in CSS easily.[/color]
>
> Again, I'm a little unclear on what you mean by footer. One which is always
> viewable or one which is at the bottom and can be scrolled out of view?[/color]


If content is less to fill the browser THEN footer stay in the bottom
of viewport ELSE footer should be at the end of the page (eventually
out of the viewport)

Peter
  #30  
Old July 20th, 2005, 06:53 PM
Peter Diedrich
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout

> Actually no. I don't see a status bar, or any other sort of footer.[color=blue]
> Though it's true I could put one there if I wanted to.
> But your question was about documents within the browser window, so what
> is your point?[/color]

You definitely know what I mean.

[color=blue][color=green]
> >* Look at 90% of industry standard websites. What do you see? A footer
> >at the bottom of each page[/color]
>
> What you are talking about? Show me *one* site that produces a footer at
> the bottom of each printed page.[/color]

http://www.wired.com/animation/

....plus thousands more. Stephen, tell us, which internet are you
actually using? ;-)

[color=blue]
> Yes - a footer at the bottom of each *web* page. Precisely. No problems
> there.
> But you were asking for a footer at the bottom of the *window* - weren't
> you?[/color]

Of course of every *web* page. Have I not posted to "authoring.html"?
[color=blue][color=green]
> >It provides information where users expect it by their browsing
> >experience accumulated over years. A footer gives the layout its
> >bottom frame. If you like it or not. It's standard.[/color]
>
> So which information that is so important to users is in this footer as
> standard, pray?[/color]

Please not yet another senseless debate.

[color=blue][color=green][color=darkred]
> >> If people are working in Word (or any other word-processor I have used)
> >> page footers do not sit at the bottom of the window.[/color]
> >
> >They do.[/color]
>
> Utter rubbish. They sit at the bottom of the *page*.
> <font size=42> The PAGE </font>. Not the window.[/color]

I am amazed how hardly someone can misunderstand what I want. I always
thought, everybody would know what a footer is and where it has to be.
I sincerely apologize for not being clear enough.

Anybody out there who knows what a footer is and what I mean? Is it
really THIS difficult?

Peter
  #31  
Old July 20th, 2005, 06:53 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout


"Peter Diedrich" <pdiedrich@gmx.de> wrote in message
news:8205d6ad.0403020957.417867a5@posting.google.c om...[color=blue][color=green][color=darkred]
> > > CSS is GREAT for styling text but a total failure in respect of liquid
> > > layout.[/color]
> >
> > Sticking a footer text to the absolute bottom of the viewport is an
> > example of fixed layout, not liquid layout.[/color]
>
> Well, great that you are so clever in definitions. So I apologize for
> not being precise enough. I meant *horizontally* liquid. Actually, you
> could have read this from my posting but now it is also clear for
> pedants ;-)
>[color=green]
> > Liquid layout allows the footer to position itself at the end of the
> > page, no matter how long or tall the page is. This is a Good Thing for
> > various reasons that require a thread of their own.[/color]
>
> I cannot find a single good reason for this behaviour. Do you find the
> page counter in a books also depending on the amount of content of the
> page?[/color]

You certainly don't find the footer in the *middle* of a *printed* page, but
that's where it is if your *web* page is taller than the viewport's height
but the "footer" is fixed at the bottom of the screen.

You are confusing printed pages and screens. On the web, pages are not a
fixed height, and the screen is not the page.
[color=blue]
> I would say, rather no.
>
> It would be soooo great if instead of chatting funny things about
> everything senseless, that someone could *finally* help with the
> problem. I assume that I am not the only one who run into trouble with
> this footer thing. On the other hand there are so many sites which can
> do it. So how, pleeeease?
>
> Peter[/color]

  #32  
Old July 20th, 2005, 06:53 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: How to make footer at the bottom in 5 box 3 columns layout


"Peter Diedrich" <pdiedrich@gmx.de> wrote in message
news:8205d6ad.0403021002.62e3c2e4@posting.google.c om...[color=blue][color=green][color=darkred]
> > > That's exactly what I tried. And as you say, no joy in IE. Just try to
> > > scroll the window and you see that CSS has another definition of
> > > "bottom" as the browser. The footer scrolls and overlaps the content.[/color]
> >
> > And isn't that what you wanted? Fixed will make it stay at the bottom of[/color][/color]
the[color=blue][color=green]
> > viewport, absolute will make it stay at the bottom of the screen (it'll[/color][/color]
go[color=blue][color=green]
> > away when you scroll).[/color]
>
> No, have you actually ever tried IE6 together with the bottom:0px
> thing? It behaves ridiculous. The footer overlays the content.
>
>[color=green][color=darkred]
> > > By the way, we speak of the most frequently used browser and not about
> > > speech or pre-historian text only browsers ;-)[/color]
> >
> > A good page will not differentiate between any browser except for the
> > presentation. Content should be structured well enough so it doesn't[/color][/color]
matter[color=blue][color=green]
> > what browser is rendering it.[/color]
>
> I agree. But still no answer on my OP.
>
>[color=green][color=darkred]
> > > CSS is GREAT for styling text but a total failure in respect of liquid
> > > layout.[/color]
> >
> > Many have had great success.[/color]
>
> Yes, either they say "NN4 or Mac IE go elsewhere" or they find
> themselves experimenting with numerous above mentioned hacks and
> tweaks and stylesheet switches.
>[color=green][color=darkred]
> > > Simplest things and top
> > > most essential things like a "simple" footer which appears on billion
> > > websites can't be done in CSS easily.[/color]
> >
> > Again, I'm a little unclear on what you mean by footer. One which is[/color][/color]
always[color=blue][color=green]
> > viewable or one which is at the bottom and can be scrolled out of view?[/color]
>
>
> If content is less to fill the browser THEN footer stay in the bottom
> of viewport ELSE footer should be at the end of the page (eventually
> out of the viewport)[/color]

It doesn't work like that. EITHER you fix it in the viewport OR you include
it in the flow of the page.


  #