[Wylug-help] CSS/HTML hints needed...

[Nigel Metheringham]

I'd appreciate it if someone could give me a prod in the right  
direction on this (potentially including better places to ask).

I'm having one of my occasional forays into web design.  We are  
trying to make the page visually match into some of the printed  
material, so want a layout that has a border around the page -  
specifically there is a logo block top centre, with a border set of  
lines going down the left and right edge (the top part of the border  
is a set of swirls, but from then on down its just straight vertical  
lines).  Across the bottom is another set of horizontal lines which  
cross the side borders at the corners.

I have implemented this by having a 3 column type layout - a (narrow)  
leftbar and rightbar (divs) - each of which contain the top image for  
the border, and have a repeating background applied in CSS to create  
the vertical side borders.  There is a bottom div which contains the  
bottom rule (again a repeating backgound applied via CSS) and a bit  
of blurb (copyright etc).  The centre (content) div contains the logo  
and page content.

The nice thing about this is that it all resizes nicely - I can  
handle down to a few hundred pixels wide up to somthing daft with  
fonts from stupidly small to Sun outraged headline large.   
Appropriate use of transparency on the border images means that you  
get a nice crossing effect where side and bottom borders meet/cross.

The problem is that I cannot get the leftbar and rightbar divs to  
have an appropriate height - the page content could vary from a few  
lines to a few hundred lines.  However there is nothing that pulls  
the height of these side bars to match anything else so I currently  
have to set an element height in CSS - and that height is either too  
large (page finishes - there is a bottom bar in the appropriate  
place, but there is a pile of extra side border below and a scrollbar  
on the browser window that does nothing useful), or the height is too  
small (border runs out before the page does).

One potential solution for this is to do the side pieces as a  
background over the whole page (take a small horizontal slice and  
repeat it down the page) - but that means that the side borders will  
be a fixed distance apart and will not be resizable.

Any ideas how to fix this?

[Just to add complexity into the mix, there are also 2 alternate  
layouts for visually impaired folks - these have precisely the same  
layout but a different CSS which changes backgrounds and fonts as  
well as making the side bars invisible]

	Nigel.
--
[ Nigel Metheringham           Nigel.Metheringham at InTechnology.co.uk ]
[ - Comments in this message are my own and not ITO opinion/policy - ]