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.
82  10585 
Peter Diedrich <pd*******@gmx.de> wrote: 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.).
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
So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.
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
> 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
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). So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.
Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
if possible.
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
Peter Diedrich <pd*******@gmx.de> wrote: 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)
Exactly how big do you need your footer? Can it be at the bottom of your
content, like the copyright at projectseven?
or they behave strange in some browsers or have poor
"liquidicity" (rigid side panels or ugly text overlapping when
narrowing the browser).
Which browsers did this for you? Which designs? These were all tested to be
fine in the major browsers.
Mmmh, they simply render *perfectly*.
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?
rocket fast and slimmest possible code (compared to CSS
*including* all these nasty hacks required).
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."
CSS positioning appears
elegant on the paper only.
http://www.csszengarden.com/
It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.
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
On 28 Feb 2004 10:28:43 -0800, pd*******@gmx.de (Peter Diedrich) wrote: 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?
<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>
Please no frame or scripting.
Ah OK, I see you're a good guy really. ;-)
--
Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/
Peter Diedrich <pd*******@gmx.de> wrote: 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?
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
On Sun, 29 Feb 2004 21:23:17 +0100, Stephen Poley
<sb******************@xs4all.nl> wrote: 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.)
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.
On Sun, 29 Feb 2004, Neal wrote: Oftern I look at a magazine
article and marvel at hw much the layout reminds me of some awful webpage.
Sounds like a nasty case of reverse-engineering :-}
> 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>
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
"Michael Wilcox" <mj*****************@yahoo.com> schrieb im Newsbeitrag
news:fQ******************@newsread1.news.atl.earth link.net...
[...] One of the things people find hardest when switching to a CSS deign is
learning to let go of tabular, boxy designs.
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
> Exactly how big do you need your footer? Can it be at the bottom of your content, like the copyright at projectseven?
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.
or they behave strange in some browsers or have poor
"liquidicity" (rigid side panels or ugly text overlapping when
narrowing the browser).
Which browsers did this for you? Which designs? These were all tested to be
fine in the major browsers.
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.
Mmmh, they simply render *perfectly*.
Have you ever listened to a layout table being rendered in a speach browser?
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? ;-)
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
I fully agree, but tables work and CSS seems to fail in many aspects.
My table layout looks not too bad in Lynx.
Tables making slim code? No, not really.
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>
-----------------
They create more problems then
they're worth.
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.
CSS code, on the other hand, is cached by the browser and
most certainly does not require "nasty hacks."
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.
CSS positioning appears
elegant on the paper only.
http://www.csszengarden.com/
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.
It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.
One of the things people find hardest when switching to a CSS deign is
learning to let go of tabular, boxy designs.
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.
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.
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.
"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40***********************@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>
</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>
> <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.)
* 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.
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.
They do. Word has a footer and header functionality firmly integrated
into the application.
Nor in Excel (or
They do. Just try to *print* an Excel spreadsheet. It may optionally
include a footer which will be in the bottom of the page.
Nor in Access.
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.
Nor In PDF.
PDF is a file format and not a layout scheme. You can put whatever you
like in a PDF.
Nor in
any e-mail program I can immediately recall.
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)
In article <82**************************@posting.google.com >, pd*******@gmx.de (Peter Diedrich) wrote: CSS is GREAT for styling text but a total failure in respect of liquid
layout.
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
<kr*******@xs4all.netherlands> (nl)
<http://www.cinnamon.nl/>
"Eric Bohlman" <eb******@earthlink.net> schrieb im Newsbeitrag
news:Xn*******************************@130.133.1.4 ... "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40***********************@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>
[...]
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
Peter Diedrich: > Mmmh, they simply render *perfectly*.
Have you ever listened to a layout table being rendered in a speach browser?
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.
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 <be******@gmx.net> <http://www.bertilow.com>
"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40**********************@news.easynet.ch: 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
Dead easy: set a 200px width for #smaller and no width (which defaults to
width: auto) for #bigger.
- making both divs the same height
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.
"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote: "Eric Bohlman" <eb******@earthlink.net> schrieb im Newsbeitrag
news:Xn*******************************@130.133.1. 4... "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40***********************@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>
[...]
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
#smaller {width: 200px; float: left;}
#bigger {margin-left: 200px;}
However, not especially liquid, as on narrow screens #bigger can't
drop down below #smaller.
- making both divs the same height
In theory, display: table-cell; but that's not supported by IE, so
various nasty hacks. See below for one.
- or even for the OP's task?
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 <st***@pugh.net> <http://steve.pugh.net/>
On 1 Mar 2004 05:09:43 -0800, pd*******@gmx.de (Peter Diedrich) wrote: <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.)
* Look at your empty browser. What do you see? A status bar. This is a
'footer'
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?
* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.
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.)
* Look at 90% of industry standard websites. What do you see? A footer
at the bottom of each page
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?
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.
So which information that is so important to users is in this footer as
standard, pray?
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.
They do.
Utter rubbish. They sit at the bottom of the *page*.
<font size=42> The PAGE </font>. Not the window.
Nor in Excel (or
They do. Just try to *print* an Excel spreadsheet. It may optionally
include a footer which will be in the bottom of the page.
Of course - when printed. Are you talking about windows or paper? Do you
have a clue?
Nor in Access.
Access is a database and has nothing to do with layout.
Access has a built-in GUI, though it appears to have escaped you.
Nor In PDF.
PDF is a file format and not a layout scheme. You can put whatever you
like in a PDF.
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.
Nor in
any e-mail program I can immediately recall.
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? ;-)
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.
Peter (Shaking head)
*You* are shaking your head?
--
Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/
"Peter Diedrich" <pd*******@gmx.de> wrote in message
news:82**************************@posting.google.c om... <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.)
* Look at your empty browser. What do you see? A status bar. This is a
'footer'
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.
* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.
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.
* Look at 90% of industry standard websites. What do you see? A footer
at the bottom of each page
Exactly. As opposed to fixed at the bottom of the window.
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.
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.
They do. Word has a footer and header functionality firmly integrated
into the application.
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.
Peter Diedrich <pd*******@gmx.de> wrote: 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.
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).
By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)
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.
CSS is GREAT for styling text but a total failure in respect of liquid
layout.
Many have had great success. Can your design change to something that's
already been accomplished?
Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.
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
Peter Diedrich <pd*******@gmx.de> wrote: 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.
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.
Often heard, but sorry, is this argument not pretty lame?
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.
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? ;-)
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.
I fully agree, but tables work and CSS seems to fail in many aspects.
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).
Would you really go so far to say that this piece of code is bloated?
<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.
And why is there an IE6 peekaboo, a Tantek box model hack for IE5
IE has notoriously poor support for CSS. Hacks like these make things easier
while we wait for MS to catch up.
an @import switch for NN4?
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).
Not yet spoken about Mac browsers and their
world of problems?
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
"Steve Pugh" <st***@pugh.net> schrieb im Newsbeitrag
news:6g********************************@4ax.com... "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:"Eric Bohlman" <eb******@earthlink.net> schrieb im Newsbeitrag
news:Xn*******************************@130.133.1. 4... "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote in
news:40***********************@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>
[...]
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%).
Doyou also have solutions for:
- #smaller = 200px (for a logo gif), #bigger = rest of the page
#smaller {width: 200px; float: left;}
#bigger {margin-left: 200px;}
However, not especially liquid, as on narrow screens #bigger can't
drop down below #smaller.
- making both divs the same height
In theory, display: table-cell; but that's not supported by IE, so
various nasty hacks. See below for one.
- or even for the OP's task?
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.
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
"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote: "Steve Pugh" <st***@pugh.net> schrieb im Newsbeitrag
news:6g********************************@4ax.com.. .
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.
I can't find the second example (get your lost page).
Sorry, should have been http://steve.pugh.net/test/test57c.html
Anyway the first one is astonishing! Definitely close and very creative.
Standing on the shoulders of giants, etc. (i.e. not all my own work.)
Anyway the background-image hack creates strange color differences on both
my PC and my Mac (not in IE6/PC);
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.
you could maybe solve this by adding the
background images also to #right and #content.
Or just see if GIFs are handled more consistently.
IE 6 displays a 1 or 2 pixel gap below the footer,
I know about that. I've tried to remove it but it wont budge. Annoying
but ultimately harmless.
and Netscape 7 seems to need a lot of work to render
the page.
The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.
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.
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 <st***@pugh.net> <http://steve.pugh.net/>
"Steve Pugh" <st***@pugh.net> schrieb im Newsbeitrag
news:dc********************************@4ax.com... "Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote:"Steve Pugh" <st***@pugh.net> schrieb im Newsbeitrag
news:6g********************************@4ax.com.. .
[...]
you could maybe solve this by adding the
background images also to #right and #content.
Or just see if GIFs are handled more consistently.
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.
[...]
and Netscape 7 seems to need a lot of work to render
the page.
The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.
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.
About Mac IE: On sites where I work with a content management (and thus
nothave 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.
UA sniffing simply isn't reliable and Mac IE5 has better CSS support
than Win IE5.
It is reliable enaugh for this task - if somebody makes Opera or whatever
identify itself as Netscape 4 he shall get what he ordered...
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.
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
"Markus Ernst" <derernst@NO#SP#AMgmx.ch> wrote: "Steve Pugh" <st***@pugh.net> schrieb im Newsbeitrag
news:dc********************************@4ax.com.. .
Or just see if GIFs are handled more consistently.
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.
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.
The PNGs take a while to appear don't they? Heaven knows why, they're
only 500 bytes.
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?
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.
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.
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 <st***@pugh.net> <http://steve.pugh.net/>
> > CSS is GREAT for styling text but a total failure in respect of liquid layout.
Sticking a footer text to the absolute bottom of the viewport is an
example of fixed layout, not liquid layout.
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 ;-)
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.
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
> > 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.
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).
No, have you actually ever tried IE6 together with the bottom:0px
thing? It behaves ridiculous. The footer overlays the content. By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)
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.
I agree. But still no answer on my OP. CSS is GREAT for styling text but a total failure in respect of liquid
layout.
Many have had great success.
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. Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.
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?
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
> 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?
You definitely know what I mean.
* Look at 90% of industry standard websites. What do you see? A footer
at the bottom of each page
What you are talking about? Show me *one* site that produces a footer at
the bottom of each printed page.
http://www.wired.com/animation/
....plus thousands more. Stephen, tell us, which internet are you
actually using? ;-)
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?
Of course of every *web* page. Have I not posted to "authoring.html"? 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.
So which information that is so important to users is in this footer as
standard, pray?
Please not yet another senseless debate. 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.
They do.
Utter rubbish. They sit at the bottom of the *page*.
<font size=42> The PAGE </font>. Not the window.
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
"Peter Diedrich" <pd*******@gmx.de> wrote in message
news:82**************************@posting.google.c om... CSS is GREAT for styling text but a total failure in respect of liquid
layout.
Sticking a footer text to the absolute bottom of the viewport is an
example of fixed layout, not liquid layout.
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 ;-)
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.
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?
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.
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
"Peter Diedrich" <pd*******@gmx.de> wrote in message
news:82**************************@posting.google.c om... 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.
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).
No, have you actually ever tried IE6 together with the bottom:0px
thing? It behaves ridiculous. The footer overlays the content.
By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)
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.
I agree. But still no answer on my OP.
CSS is GREAT for styling text but a total failure in respect of liquid
layout.
Many have had great success.
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.
Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.
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?
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)
It doesn't work like that. EITHER you fix it in the viewport OR you include
it in the flow of the page.
> > * Look at your empty browser. What do you see? A status bar. This is a 'footer'
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.
Jeeeeesus, this was just an example.
* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.
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.
This is the point. You are wrong. If a book's page is almost empty,
the page counter will still sitting in the bottom and not in the
middle of the page.
The page may have the same physical height, but the text has not. Any
my "page" is the FIXED browser window height. At least the browser
window height is normally fixed during a surf session.
O yes, it will not take more then 1 second that someone will reply.
Haha, but you can resize the browser. My reply in advance: Yes, you
can, but visitors will most probably set a comfortable browser size
once and use it for the surfing session.
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.
Because it looks bad if you have a page with just few content where
the footer with perhaps a dark background crosses the browser window
right in the middle of the browser window.
Peter
> 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
Thanks for your effort but sorry, no joy in IE6. Works only in Firefox
here and even then the footer is overlaying the content (however,
this is something where I could live with)
I'd hate to have to listen to a site in a speech browser that was written
poorly.
Again, our site is not intended to listen to. It's about graphics.
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.
OK, but then I could spend years for the perfect layout and they would
dump it anyway. ;-)
I fully agree, but tables work and CSS seems to fail in many aspects.
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.
Yes, this would exactly be my definition. A page should work on IE4.
Gotcha :-)
I would be attracted to bet with you a Whopper that more people are
using IE4 vs. a text browser.
IE has notoriously poor support for CSS.
We are 100% in line. THAT is why I do not use CSS. Look at your web
stats. How many people are using IE.
Do not take me wrong. I love the idea of CSS and would not have spent
so much time on it if I would not like the concept. But as long as the
browser are not working as smoothly with CSS as they do with tables,
how can people promote coding in CSS?
Hacks like these make things easier
while we wait for MS to catch up.
Hopefully. I will be first to switch to CSS once the CSS compatible
browser base is established.
an @import switch for NN4?
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).
So you are comfortably doing so well, that you can effort to keep more
NN4 users in front of your door than I do without the speech/text
browser guys with "my" tables?!
IE for Mac has just about as bad of
support as it does on Windows.
And yet another crowd of people you are saying "Sorry, you are not
welcome here".
That's the point.
.....Mmmh, I still have no footers at the bottom. Strange. Am I here in
a political debating forum? ;-)
Peter.
Peter Diedrich wrote: The site design is pretty simple:
============================================
| Head |
============================================
| | | |
| | | |
| left | center | right |
| | | |
| | | |
============================================
| Footer |
============================================
[snip] 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?
[snip]
I note that there is a lot of discussion in this thread about the value of
footers. So I'll suggest a distinction:
On a printed page, there are sometimes "footnotes". These supplement the main
material, and should be within "easy scan", but without interrupting the
reading. These don't appear to work on web pages as footnotes. Who wants to
scroll down to see them? The equivalent appears to be the "sidenote",
sometimes in a right-floated box, or else in a "rightbar". In the diagram
above, put these in the 3rd column, or (not very good in a 3-column design) as
right-floated boxes in the centre column. Frankly, I think this is really what
rightbars are good for. Then they are there to look at, but you don't need to
read them while reading the main material.
When a web page is considered to be, in some sense, a "document", there are
some "important but not urgent" administrative details. Perhaps copyright,
date created, date last updated, etc. (In a paper document, perhaps
corresponding to multiple-web-pages, these would only appear once). These
should not clutter up the display while a user is trying to get at the
content, but should be there if needed. And the convention is that these are
at the bottom of the page. (Obvious, really - it keeps them out of the way,
but people probably know where to find them if they really need them).
So, keep separate in your mind, and in your design, "supplementary notes", and
"administrative details". Put the first in (say) the rightbar, and the second
in (say) the footer.
I judge that this is what vast numbers of on-line services have done. Many of
the on-line news services have done this. They haven't just copied paper onto
the web. They have studied the *function* of the material, "supplementary
notes" or "administrative details", and translated this to the web
environment. That is probably why the 5-box 3-column design is so common, and,
in my opinion, so useful.
--
Barry Pearson http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/
In article <82**************************@posting.google.com >, pd*******@gmx.de (Peter Diedrich) wrote: Sticking a footer text to the absolute bottom of the viewport is an
example of fixed layout, not liquid layout.
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 ;-)
Being generous with smileys after making insults will not gain you
favors.
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.
I cannot find a single good reason for this behaviour.
See a different thread. Els is craving for different opinions.
<http://tinyurl.com/34fhr >
Do you find the
page counter in a books also depending on the amount of content of the
page? I would say, rather no.
What makes a paper page the same as a virtual one?
It would be soooo great if instead of chatting funny things about
everything senseless, that someone could *finally* help with the
problem.
This is Usenet. Live with it.
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?
<table height="100%">
....
<tr><td>footer</td></tr>
</table>
--
Kris
<kr*******@xs4all.netherlands> (nl)
<http://www.cinnamon.nl/>
In article <82**************************@posting.google.com >, pd*******@gmx.de (Peter Diedrich) wrote: 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.
Jeeeeesus, this was just an example.
Documents and applications, apples and pears.
* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.
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.
This is the point. You are wrong. If a book's page is almost empty,
the page counter will still sitting in the bottom and not in the
middle of the page.
Maybe footers of books should be at the bottom of the bookcase. Can you
maybe supply us with a _good_ reason why one would have a footer at the
bottom of the window? After all, there is a considerable effort needed
to achieve this, regardless of approach. Without that effort -- the
natural situation -- the footer is below the content.
"Because this and that site do it too" or "because you see it in books"
are not valid reasons.
The page may have the same physical height, but the text has not. Any
my "page" is the FIXED browser window height.
No it is not. It is not called 'window' for nothing. You look through it
at the document; it is a framework to hold the document, not the
boundaries of it.
At least the browser
window height is normally fixed during a surf session.
Mine isn't. I often change my window's dimensions.
O yes, it will not take more then 1 second that someone will reply.
Oh, thy sweet bitterness.
Haha, but you can resize the browser. My reply in advance: Yes, you
can, but visitors will most probably set a comfortable browser size
once and use it for the surfing session.
And because you have no way of telling what that size will be, why
making guesses about whether it is comfortable for a visitor to see a
footer at the bottom of the window, separated of the content by possibly
a 10 mile gap.
--
Kris
<kr*******@xs4all.netherlands> (nl)
<http://www.cinnamon.nl/>
"Peter Diedrich" <pd*******@gmx.de> wrote in message
news:82**************************@posting.google.c om... * Look at your empty browser. What do you see? A status bar. This is a
'footer'
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.
Jeeeeesus, this was just an example.
* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.
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.
This is the point. You are wrong. If a book's page is almost empty,
the page counter will still sitting in the bottom and not in the
middle of the page.
The page may have the same physical height, but the text has not. Any
my "page" is the FIXED browser window height. At least the browser
window height is normally fixed during a surf session.
O yes, it will not take more then 1 second that someone will reply.
Haha, but you can resize the browser. My reply in advance: Yes, you
can, but visitors will most probably set a comfortable browser size
once and use it for the surfing session.
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.
Because it looks bad if you have a page with just few content where
the footer with perhaps a dark background crosses the browser window
right in the middle of the browser window.
Peter
"Peter Diedrich" <pd*******@gmx.de> wrote in message
news:82**************************@posting.google.c om... * Look at your empty browser. What do you see? A status bar. This is a
'footer'
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.
Jeeeeesus, this was just an example.
* Look on your newspaper or a book. What do you see? A footer with a
page count, copyright information or whatever.
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.
This is the point. You are wrong. If a book's page is almost empty,
the page counter will still sitting in the bottom and not in the
middle of the page.
Why do you think a browser is supposed to look like a book?
Are you saying that millions of web designers around the world are wrong to
be doing it the way virtually all of them do it, and only you have the
Correct, Enlightened approach? 'Cause if everyone were doing it the way you
say is the correct way, then surely you would have found millions of
resources telling you how to do it, and all the major browsers would support
it.
The page may have the same physical height, but the text has not. Any
my "page" is the FIXED browser window height. At least the browser
window height is normally fixed during a surf session.
O yes, it will not take more then 1 second that someone will reply.
Haha, but you can resize the browser. My reply in advance: Yes, you
can, but visitors will most probably set a comfortable browser size
once and use it for the surfing session.
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.
Because it looks bad if you have a page with just few content where
the footer with perhaps a dark background crosses the browser window
right in the middle of the browser window.
Then you must be horrified by all the short pages you see on the web.
Apparently those of us you're conversing with here don't thing anything is
wrong with it.
Markus Ernst wrote: "Michael Wilcox" <mj*****************@yahoo.com> schrieb im
[snip] 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.
[snip]
Why not use a simple layout table? Then it is possible.
In fact, if you use floats, rather than absolute positioning, surely you can
add an extra element that clears the floats, and provide a footer that way?
Of all the ways of laying out a web page, (normal flow, floats, layout tables,
absolute positioning, Frames, iFrames, etc), it is absolute positioning that
has this particular problem.
So, if this is the requirement, don't use absolute positioning! (There are
several alternatives).
--
Barry Pearson http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/
Peter Diedrich wrote:
[snip] No, this would be simple to make with tables (and CSS as well).
[snip] I fully agree, but tables work and CSS seems to fail in many aspects.
My table layout looks not too bad in Lynx.
[snip] 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. ;-)
[snip] 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.
[snip]
What you are experiencing is a tactical blunder by advocates of CSS
positioning. They tend to use "knocking copy" against layout tables. But,
since layout tables are demonstrably successful, perhaps accounting for about
99% of the pages on the web, year after year, they simply damage their
credibility!
Advocates of CSS positioning can't hope to prove their point by showing that
layout tables don't work, because they clearly *do* work. Instead, they should
accept what layout tables can do, (which many people know anyway), and show
what advantages CSS positioning can demonstrate. These lie in the following
areas:
- There are some layouts that CSS positioning can do that layout tables can't.
They should emphasise these.
- If you layout using CSS, you may have more opportunities to change the
layout via CSS alone. (Although CSS positioning often relies on HTML elements
that then constrain the layout).
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.
If absolute positioning had been intended for page layout purposes, I would
expect it to handle footers with ease. I draw my conclusions from the fact
that it struggles.
So, why not use "float" instead? Then you can add footers. "Float" wasn't
intended for page layout purposes - but I don't think absolute positioning was
either. (Fixed positioning may have been, but doesn't work in practice).
See:
Variations on the 5-box 3-column layout http://www.barry.pearson.name/articles/layout_5_3/
--
Barry Pearson http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/
Peter Diedrich <pd*******@gmx.de> wrote: http://mikewilcox.curvedspaces.com/demo1.html
http://mikewilcox.curvedspaces.com/demo2.html Thanks for your effort but sorry, no joy in IE6.
position: fixed; has never worked in IE.
Works only in Firefox
here and even then the footer is overlaying the content
It isn't overlapping in demo2, and I made it so it wouldn't. Exactly what do
you want? You could change demo1 so the div has a width of 100%, which might
make it look to some that the content is not being overlapped.
Yes, this would exactly be my definition. A page should work on IE4.
Gotcha :-)
It certainly would work, but not with any style, and there's several ways to
do this.
http://w3development.de/css/hide_css...wsers/summary/
I would be attracted to bet with you a Whopper that more people are
using IE4 vs. a text browser.
I don't know that I care that much. They'll still get the same page, with
all the same content, but without my presentation suggestions. That doesn't
matter to me since I can write semantically correct pages.
But as long as the
browser are not working as smoothly with CSS as they do with tables,
how can people promote coding in CSS?
Many people don't use tables for presentation because that's not
semantically what they're for. CSS accomplishes many layout techniques and
maintains a structurally sound page. This page can be viewed by all browsers
and remain logical.
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).
So you are comfortably doing so well, that you can effort to keep more
NN4 users in front of your door than I do without the speech/text
browser guys with "my" tables?!
"In front of my door"? As in they can't see my site? Certainly not, I took
time so that even the most baisc (or broken) browser could still view my
page. Maybe they don't get as many neat colors, but they still get a page
with the same, logical content.
IE for Mac has just about as bad of
support as it does on Windows.
And yet another crowd of people you are saying "Sorry, you are not
welcome here".
See above.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com
On 2 Mar 2004 10:11:27 -0800, Peter Diedrich <pd*******@gmx.de> wrote: What you are talking about? Show me *one* site that produces a footer at
the bottom of each printed page.
http://www.wired.com/animation/
That's a frameset.
...plus thousands more. Stephen, tell us, which internet are you
actually using? ;-)
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?
Of course of every *web* page. Have I not posted to "authoring.html"?
See, here's the miscommunication. The bottom of the webpage might not be
as far down as the bottom of the viewport. The "paper" might be as tall as
the viewport, shorter, or longer. Longer pages require us to scroll down.
Shorter pages have their bottom edge in the middle somewhere.
The reason it's so hard to adequately do what you ask is because unless
you have content that stretches it out, the page might not get to the
bottom edge.
Yes, other sites do this. It is done as a frameset or a table. It's my
opinion that either of those techniques will hurt you more than help you.
If you really have to do this, set up a frameset or do table layout.
But I don't see why it's such a crisis that a footer doesn't carry all the
way down. Don't you see, the pages aren't all the same size, even though
your viewport is the same size.
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?
1) Don't be rude, it will get you nowhere.
2) If I haven't gotten it here, and no one else has either, maybe the
fault lies not with everyone else but with you?
Peter Diedrich <pd*******@gmx.de> wrote: No, have you actually ever tried IE6 together with the bottom:0px
thing? It behaves ridiculous. The footer overlays the content.
bottom: 0; along with position: fixed; is supposed to overlay the content,
and that's what it does in FB as well. And yes, it is stupid in IE, but
that's no surprise.
Yes, either they say "NN4 or Mac IE go elsewhere"
Wrong.
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)
The best I can do is what's on demo1 ( http://mikewilcox.curvedspaces.com/demo1.html ) right now. You can
experiment with different ammounts of content. There is a hack for IE in
there, sorry if you don't like it.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com
On 2 Mar 2004 10:20:59 -0800, Peter Diedrich <pd*******@gmx.de> wrote: This is the point. You are wrong. If a book's page is almost empty,
the page counter will still sitting in the bottom and not in the
middle of the page.
The page may have the same physical height, but the text has not. Any
my "page" is the FIXED browser window height. At least the browser
window height is normally fixed during a surf session.
Some of my books are 9 inches tall, and the page number is about 8 1/2
inches from the top. Other books are 5" tall, and the page number is
closer to the top. Now, if I was reading through an 8" wide by 6" high
hole, the first book would be taller (and maybe wider) than the
"viewport", and I'd have to "scroll down" to see the page number. Reading
the second book, the page number would not be at the bottom of my
"viewport" as the content does not reach that far!
With paper, we control the display. With webpages, we do not. That's why
this comparison is flawed.
Let go of the idea that printed media is a literal model to follow. It's
like trying to use an oilpaint knife with pastels. It's the wrong
technique for that medium.
Peter Diedrich wrote:
[snip] 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?
I suggest you simply make it clear what you mean, and stop the debate. (If you
don't, people will rightly draw their own conclusions).
By "footer", do you mean some material at the bottom of the web page? In other
words, rendering after all other content of the web page? If you mean this,
you have a *very* strong case. This is a very sensible & important
requirement.
Or do you mean some material that you want to be positioned (where possible)
at the end of the viewport? This is *vastly* different. And if you mean this,
you face some serious questions. There is little logic for that, and it might
confuse some users.
--
Barry Pearson http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/
On 2 Mar 2004 09:57:22 -0800, pd*******@gmx.de (Peter Diedrich) declared
in comp.infosystems. www.authoring.html: On the other hand there are so many sites which can
do it. So how, pleeeease?
If there are so many sites that do it, find one and steal their course
code. If you are having so much trouble finding a way to do it, there
can't be that many out there that have achieved it.
--
Mark Parnell http://www.clarkecomputers.com.au This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Tristan Miller |
last post by:
Greetings.
I have a two-column web layout, where the first column is just the regular
body text with a "marign-right" of 16em, and the second column is an
"absolute"-positioned div with a width...
|
by: Will Buntin |
last post by:
I am trying to design my site without tables, using CSS for
positioning and am having limited success. My main issue is I have a
three column layout and my footer needs to run across the page,...
|
by: Andrew |
last post by:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work,...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
