Sent by Saila, Craig on 2 December 2003 16:04
DL Neil wrote:
> Have been handed a spec (?demand) for a site that has the following
> layout: header (incl logo), footer (contrasting color, copyright
> stmt, 'status' type info, etc), left col for navigation/menu, right
> 'col' for page body/content.
> - both header and footer are to be 100% wide
> - the screen/viewport may not scroll
> - if/when nec, the nav or page body 'cols' may scroll
> - screen size is to be 1000+ (1024x768min in PC parlance)
> - browser specs are "5 and above", ie no need to worry about NN4,
> IE4, etc; but must cover the big names, IE5, IE6, NN7, Op7.2n, Saf,
> etc.
Guess it's a case of the grass is always greener. These kind of specs
are actually quite good and easy to accomplish with this CSS:
html, body { margin: 0; padding: 0; overflow: hidden; }
#header { width: 1024px; height: 100px; }
#menu { width: 250px; height: 568px; overflow: auto; }
#content { width: 774px; height: 568px; overflow: auto; }
#footer { width: 1024px; height: 100px; }
Setting the BODY to "overflow: hidden" prevents the browser from display
the main scrollbars, while "overflow: auto" allows the content/nav to
scroll when needed.
Given the screen dimensions, you can pretty much lock everything into
place using pixel-based values for the width and height. Position the
necessary blocks absolutely, or use floats (careful of the wrap at less
than 1024px), and you're good to go.
--
Cheers,
Craig Saila
------------------------------------------
[EMAIL-REMOVED] : http://www.saila.com/
------------------------------------------
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/