How to add a footer to a page with left menu?

[John Dalberg]

I have a template webpage which consists of a table which has one row and
two columns. The left column will have a navigational menu and the right
cell has the page's main body.

I have a footer file which is a table which is basically one row and one
column.

I want to add the footer so that it shows up at the bottom of the main page
body flush with the bottom of the menu. White space should show between
main body and footer if main body doesn't have much text. The problem is
that if I add the footer after the body, it shows up just beneath the main
body because the column has align=top.
Any ideas on how to add the footer so that it's always at the bottom flush
with the left menu where bottom of menu aligns with bottom of footer?

J.

 

[brucie]

in post: <

I have a template webpage which consists of a table
http://allmyfaqs.com/faq.pl?Tableless_layouts

which has one row and two columns. The left column will have a
navigational menu and the right cell has the page's main body.
I have a footer file which is a table which is basically one row and one
column.
I want to add the footer so that it shows up at the bottom of the main page
body flush with the bottom of the menu. White space should show between
main body and footer if main body doesn't have much text.

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.wannabegirl.org/css/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutorials/box_lesson/index.html
http://www.webreference.com/authoring/style/sheets/layout/advanced/

 

[Toby A Inkster]

I have a template webpage which consists of a table which has one row and
two columns. The left column will have a navigational menu and the right
cell has the page's main body.

A link speaks a thousand words.

 

[John Dalberg]

A link speaks a thousand words.

I don't have one ready. Can you go through my description?

J.

 

[Rob McAninch]

I have a template webpage which consists of a table which has
one row and two columns. I have a footer file which is a table
which is basically one row and one column.

I want to add the footer so that it shows up at the bottom of
the main page body flush with the bottom of the menu.

Something like?

<table borders="1">
<tr>
<td rowspan="2">menu</td>
<td>content</td>
</tr>
<tr>
<td valign="bottom">footer</td>
</tr>
</table>

Be sure to turn on the table borders while working on it so you
can see what's going on.

 

[John Dalberg]

Something like?

<table borders="1">
<tr>
<td rowspan="2">menu</td>
<td>content</td>
</tr>
<tr>
<td valign="bottom">footer</td>
</tr>
</table>

Be sure to turn on the table borders while working on it so you
can see what's going on.

Thanks but this won't work. The footer needs to be under the main body
only. The way you have it is it's in its new row which therefore will show
up under the menu, which means it won't be flush with the menu. Bottom of
footer is flush with the bottom of menu.

Here's a little visual.

I want:

menu body
..
..
menu footer


your html produces (I am guessing)

menu body
footer..footer

J.

 

[Andrew Glasgow]

I have a template webpage which consists of a table which has one row and
two columns. The left column will have a navigational menu and the right
cell has the page's main body.

I have a footer file which is a table which is basically one row and one
column.

I want to add the footer so that it shows up at the bottom of the main page
body flush with the bottom of the menu. White space should show between
main body and footer if main body doesn't have much text. The problem is
that if I add the footer after the body, it shows up just beneath the main
body because the column has align=top.
Any ideas on how to add the footer so that it's always at the bottom flush
with the left menu where bottom of menu aligns with bottom of footer?

J.

This is very simple to do with CSS positioning instead of tables.

 

[Richard]

John Dalberg wrote:

I have a template webpage which consists of a table which has one row and
two columns. The left column will have a navigational menu and the right
cell has the page's main body.

I have a footer file which is a table which is basically one row and one
column.

I want to add the footer so that it shows up at the bottom of the main
page body flush with the bottom of the menu. White space should show
between main body and footer if main body doesn't have much text. The
problem is that if I add the footer after the body, it shows up just
beneath the main body because the column has align=top.
Any ideas on how to add the footer so that it's always at the bottom
flush with the left menu where bottom of menu aligns with bottom of
footer?

J.

No problem.
First, create a container division that will hold the three main divisions.
The menu division will be a fixed width, say 15%.
Use float:left; in the definition.
The main body division will come next.
Give it say a height of 80 - 90%.
The footer division will then take up the rest of the space and always be in
place where you want it.
Without the main container, the footer will drop below the menu column.


..bigbox { widtth; 100%; .... .... }
..menu { width: 15%; ... ... ... float:left; }
..box1 { width; 85%; height: 85%; ... ... }
..footer { width; 85%; ... ... }


<div class="bigbox">
<div class="menu"> links </div>
<div class="box1"> text text text </div>
<div class="footer"> text </div>
</div>

 

[Els]

Thanks but this won't work. The footer needs to be under the main body
only. The way you have it is it's in its new row which therefore will show
up under the menu, which means it won't be flush with the menu. Bottom of
footer is flush with the bottom of menu.

Here's a little visual.

I want:

menu body
.
.
menu footer


your html produces (I am guessing)

I'm guessing too, while reading the a.m. code.
I think you're guessing wrong.
Hence the 'rowspan'.

 

[Rob McAninch]

This is very simple to do with CSS positioning instead of tables.

But how well does the page come together without CSS support? I use
CSS for styling but I don't rely too much on its positioning
ability.

 

[Rob McAninch]

your html produces (I am guessing)

You ask for assistance and then guess what a proposed solution
does without trying it? Not very polite.

menu body
footer..footer

Check out what rowspan and colspan attributes do when used with a
table cell.

http://www.w3.org/TR/html4/struct/tables.html#edef-TD

You may also want to check out valign and align, though those
might be better handled by CSS. The table will get the layout
pretty close for most browsers without the align attribs, and the
CSS is the 'right' way to do presentational stuff to get it even
closer to what you want.

 

[Kris]

This is very simple to do with CSS positioning instead of tables.

But how well does the page come together without CSS support? I use
CSS for styling but I don't rely too much on its positioning
ability.[/QUOTE]

Relying on presentation is something you should not do. CSS was designed
to be optional.

 

[Rob McAninch]

But how well does the page come together without CSS support?
I use CSS for styling but I don't rely too much on its
positioning ability.

Relying on presentation is something you should not do. CSS
was designed to be optional.[/QUOTE]

CSS is indeed optional, but tables are effectively not optional
so they can be used for layout more predictably from what I've
seen. Certainly they were not really meant for layout but how is
putting a navigation menu in one cell and content in another so
different from putting two different images of fish in the table?
;-)

 

[Kris]

Relying on presentation is something you should not do. CSS
was designed to be optional.

CSS is indeed optional, but tables are effectively not optional
so they can be used for layout more predictably from what I've
seen.[/QUOTE]

Persistent stalking by control freak web authors, if you ask me. Believe
Opera allows to disable table rendering.

 

[KirstyH]

CSS is indeed optional, but tables are effectively not optional
so they can be used for layout more predictably from what I've
seen. Certainly they were not really meant for layout but how is
putting a navigation menu in one cell and content in another so
different from putting two different images of fish in the table?
;-)

But putting fish in a table might be a valid (of course the fish might
disagree...)

For example a webpage about a fishing lake might want a table comparing
fish species available with an image of the fish, average weight, rules
about catching and so on.

Kirsty

 

[Toby A Inkster]

Persistent stalking by control freak web authors, if you ask me. Believe
Opera allows to disable table rendering.

As does Mozilla, though the UI for it is less friendly.

And some browsers don't support tables at all.

 

[Rob McAninch]

CSS is indeed optional, but tables are effectively not
optional so they can be used for layout more predictably from
what I've seen.

Persistent stalking by control freak web authors, if you ask
me. Believe Opera allows to disable table rendering.[/QUOTE]

I'll have to check that out when I get a chance. Does it ignore
the table completely? Or render the content without the structure
of the table?

Even so it is a minority who would disable tables on purpose, at
least for general information/entertainment use.

My concern with using too much CSS to position stuff is when CSS
support is turned off, or poor (e.g. Netscape 4), or the user has
not properly configured their own stylesheet, then the page may
be the next thing to useless.

To my knowledge tables, when rendered, have a fairly predictable
outcome.

 

[Barry Pearson]

Kris <news:[email protected]>: [snip]

Persistent stalking by control freak web authors, if you ask
me. Believe Opera allows to disable table rendering.

I'll have to check that out when I get a chance. Does it ignore
the table completely? Or render the content without the structure
of the table?

Have a look (below) at what you can do with tables using CSS2. You can swap
left & right columns. Or dismember them and stick the bits to the sides of the
viewport.

The following HTML (4.01 Strict) & CSS validate at W3C. It has 3 identical
copies of the same simple table, each handled differently via CSS. But ... you
need a suitably-compliant browser, and there are no prizes for guessing which
browsers are not suitable! (Even Opera 7.23 struggles a bit). So I doubt if it
has much practical application (for a decade).

http://www.barry.pearson.name/articles/table_pages/disable1.htm

Even so it is a minority who would disable tables on purpose, at
least for general information/entertainment use.

I think it makes a lot of sense to design not just valid code, but pages that
look OK in the common browsers at their default setting. There appear to be
plenty of people who run like that.

Then the people who change the settings, perhaps because of special needs or
simply different preferences, can be assumed to know what they are doing, and
shouldn't be inhibited. This appears to give the best of all worlds - you get
what you want most of the time, and people with strong feelings get what they
want and accept the consequences.

My concern with using too much CSS to position stuff is when CSS
support is turned off, or poor (e.g. Netscape 4), or the user has
not properly configured their own stylesheet, then the page may
be the next thing to useless.

Yes. After all, it is often stressed that CSS is optional, and CSS rules are
suggestions not control. So if you have a preference for how you want the page
to be rendered, think about how you want it rendered without CSS too. (And
without script, etc). Don't just give those people what you would consider to
be third best, eg. content without any resemblence to how you think it should
look.

To my knowledge tables, when rendered, have a fairly predictable
outcome.

"Rendered visually on screen medium by default". There are plenty of
qualifications (and more than that)! But, most people run like that, and what
they see is fairly predictable.

 

[Kris]

So if you have a preference for how you want the page
to be rendered, think about how you want it rendered without CSS too. (And
without script, etc). Don't just give those people what you would consider to
be third best, eg. content without any resemblence to how you think it should
look.

Don't you think that getting rid of any resemblance of how you think it
should look is the main reason for visitors disabling CSS?

 

[Barry Pearson]

Don't you think that getting rid of any resemblance of how you think
it should look is the main reason for visitors disabling CSS?

The last time I asked someone why they weren't using CSS, this is the answer I
got. So I guess there are various reasons.

http://groups.google.com/[email protected]

Whatever we put in the HTML document, we are making choices about the default
rendering in the absence of CSS. We are making decisions about rendering in
all conditions. Except that sometimes we are making those decisions by
default, even by accident.

I think we should make those choices consciously, not by accident. I can quite
imagine someone wanting to disable all font & colour control, perhaps because
of serious visual disability, yet still wanting the layout similar, for
example.