auto resizeable page footer depends on window size

How to get a feature at the bottom of a page to shrink or grow

[andy_brit]

I have a page <SNIP> where the tramlines that go upwards to the top of the window from the main body should do likewise at the bottom of the page, but the lower ones should resize automatically to the size of the browser window and do in effect a downwards fill from the bottom of the page body.

I've seen bits and pieces on CSS etc that go someway towards this but nothing that really hits the spot.

I've tried a 2nd div at the bottom of the screen where the table is 100% high, no luck and done a bit of twiddling with cells and ....now I'm stuck!

I would be grateful for anybody's help
Ta Andrew

[edited by: BlobFisk at 5:58 pm (utc) on Aug. 2, 2004]
[edit reason] No URLs please! [webmasterworld.com] [/edit]

[tedster]

Welcome to the forum, andy_brit

I assume this is a graphic that needs to fill the space. Is it such that you can tile it as a background image for the bottom div/table cell?

[andy_brit]

Hi Tedster and thanks for the kind words.

It is a graphic, but I already use a tall thin bg image for the horizontal bars, I didn't think that you could have two bg images.....can you?

Andy

ps. I was a member of this place a year or two ago, but lost my id etc. but it's nice to be back

[tedster]

Many elements can have a background image - it's easily done with CSS. So you may have one background for the body element (I assume that's what you have now), but you can also give a background image to a table, a table cell, a div and so on.

I've been able to create some visually interesting and low bandwidth pages by using tiled backgrounds on several different elements.

[andy_brit]

Aha, I solved my own problem with css, may benefit others, so here it is.

To recap, I need a complex background image to the page, tram lines going both horizontally AND vertically on the same page. HTML doesn't allow this directly, and I don't want to use a huge image, because it should extend the tramlines horizontally and vertically to suit the browser window size. A combination approach was required.

The page has a delivery area in a layout table, centered horizontally and 50px down from the top, easy. This was put into a single cell container table which had no height defined, the height would be controlled by the inner layout table.

Ok so far?

The horizontal tramlines were created with a 1 pixel wide n pixels high image that is used as the outer container table bg image, this tiles its way across the screen. The 1 px wide is a trade off between download speed and screen tiling speed, I have't found any real probs.

This works really well. The vertical tramlines at the top of the screen are a simple 700px wide 1 px high image that is used as a cell bg and tiles it's way down 50px, equally quick.

The lower tramlines were a b&^ch. However the following code fragment worked a dream.

<style type="text/css">
<!--
body {background-image: url('images/vert_bars.gif');
background-repeat: repeat-y;
background-position: center;}
-->
</style>

This was in the head of the page, but could equally be put as a separate text file.

The image is 1 px high 700px wide image and repeats it's way down the screen from center/center.

The only problem I have found is that occaisionally it jigs off to the right slightly, about every 10 or so refreshes, not solved that one.

The moral of the story is that CSS allows you to do stuff that HTML won't. I have been a CSS scaredycat, but now I can see the benefits, all hail CSS!

Enjoy.

A