? Scalable layout with sections

[Alec S.]

Hi,

I need help redesigning my website. I want to have a header, contents
bar, main content, and footer. I want the whole thing to be static, that
is, I want all sections to be visible at all times with the main content
section being scrollable. Like this:

+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+

I've already implemented it nicely with CSS but I've had to use
hard-coded values for positioning while setting it up which is bad because
when the browser is resized (or screen resolution changed) it ends up
looking awful.

I'm looking for a good tutorial on how to do this properly. I found one
that looked promising but when I implemented it's method it didn't work
because their example had the same background for the middle sections which
was fine, but when I changed the backgrounds, it looks bad when it gets
resized because for example the content section is bigger than the menu bar
so the default background shows up behind the menu bar. Also, the footer
would not stay attached to the bottom of the browser at all times.
Does anyone know of a good place?
Thanks.

--
Alec S.
alec <@> synetech <.> cjb <.> net

[jmm-list-gn]

Alec S. wrote:

I've already implemented it nicely with CSS but I've had to use
hard-coded values for positioning while setting it up which is bad because
when the browser is resized (or screen resolution changed) it ends up
looking awful.

An URL would go a long way toward helping you.
Have you tried using % or ems instead of pixels?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Mark Tranchant]

Alec S. wrote:

Hi,

I need help redesigning my website. I want to have a header, contents
bar, main content, and footer. I want the whole thing to be static, that
is, I want all sections to be visible at all times with the main content
section being scrollable. Like this:

+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+

My site (sig) does this but without the footer. I would imagine that
shouldn't be too hard to add in. Note that it only works on browsers
that support position: fixed; - there are work-arounds for IE but I
refuse to cobble them in on principle.

Almost all sizes are specified in em units, so the whole thing is
resizable. Only the header bar size is fixed, so the top left links get
a bit unwieldy at very large font sizes. That's a trade-off I've chosen
to make.

You might find this article on dynamic resizing interesting:

http://www.themaninblue.com/writing/...ve/2004/09/21/

He uses a Javascript style switcher to change layout if the window size
gets too small for the normal layout. I use this to good (IMO) effect on
my latest creation:

http://step-by-step.org.uk/

Shrink the window width below 695px and the header, menu and
"decoration" images resize and.

--
Mark.
http://tranchant.plus.com/

[Jan Roland Eriksson]

On Thu, 23 Sep 2004 18:43:27 GMT, "Alec S." <[e-mail]> wrote:

I need help redesigning my website.... [...]+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+ [...]I'm looking for a good tutorial...

[...]

This may be close to what you are looking for...

<http://www.css.nu/exp/nf-illustration.html>

[for the Mozilla & Opera families of browsers]

....but really, MSIE stifles a lot of possible creativity on the www due
to its total lack of support for some really basic areas of "electronic
typesetting".

--
Rex

[Alec S.]

Thanks everyone but I found a great solution in one of those CSS forums.
It turns out the trick (the part I was missing) was to specify the bottom of
the middle sections. doh!
--
Alec S.
alec <@> synetech <.> cjb <.> net
"Alec S." <[e-mail]> wrote in message
news:jP***************@news04.bloor.is.net.cable.r ogers.com...

+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+

[Curioso]

Alec S. <[e-mail]> wrote:

+------------------------------------+

logo |

+--------+---------------------------+

menu | main content, with |
| scrollbars if the content |
| is too long |
| |

+--------+---------------------------+

misc data |

+------------------------------------+

can you post the code?!
--
Curioso

[Neal]

On Fri, 24 Sep 2004 20:56:19 +0200, Curioso <cu*****@despammed.com> wrote:

Alec S. <[e-mail]> wrote:

+------------------------------------+

logo |

+--------+---------------------------+

menu | main content, with |
| scrollbars if the content |
| is too long |
| |

+--------+---------------------------+

misc data |

+------------------------------------+

can you post the code?!

Post a URL instead. Only tiny bits of code should be posted, full page
layouts should not be.

[Neal]

On Thu, 23 Sep 2004 18:43:27 GMT, Alec S. <[e-mail]> wrote:

Hi,

I need help redesigning my website. I want to have a header,
contents
bar, main content, and footer. I want the whole thing to be static, that
is, I want all sections to be visible at all times with the main content
section being scrollable. Like this:

+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+

This isn't easy. Well, it could be if IE supported fixed positioning.

Take a look at http://webpages.charter.net/mmmbeer/...layouts/fixed/
for a method of doing this. This page screws the footer up in IE, but play
with the ideas.

[Andrew Thompson]

On Fri, 24 Sep 2004 15:16:32 -0400, Neal wrote:

Post a URL instead.

For further tips on an ideal example, check here..
<http://www.spartanicus.utvinternet.ie/help_us_help_you.htm>

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.lensescapes.com/ Images that escape the mundane

[Alec S.]

I just got an idea. I figured this would work:

<html>
<head>
<style type="text/css">
html,body {
overflow :hidden;
}

#header {
background :#f80;
position :absolute;
top :0px;
left :0px;
width :100%;
height :75px;
}

#contents {
background :#0f8;
position :absolute;
top :75px;
left :0px;
bottom :25px;
width :150px;
}

#main {
background :#08f;
position :absolute;
top :75px;
left :150px;
bottom :25px;
right :0px;
overflow :auto;
}

#footer {
background :#80f;
position :absolute;
left :0px;
bottom :0px;
width :100%;
height :25px;
}
</style>
</head>

<body>
<div id="header" ></div>
<div id="contents"></div>
<div id="main" ></div>
<div id="footer" ></div>
</body>
</html>
And in FireFox it does. In Opera it almost does but the main section
doesn't go to the right edge, it is indented about 20 pixels; using
right:0px won't push it to the right edge but using width:100% does and
using left:0px pushes it to the left edge. Opera also shows the main
scrollbar when the browser is resized smaller even though I set it to
hidden. In IE it's downright terrible; the header and footer touch the left
but are indented about 20 pixels from the right, the contents are the right
width but only a dozen pixel high, and the main section doesn't show up at
all unless I put something in it and then it just expands the main div to
the extent of the content. I've posted the IE thing separately because it
is a different issue.

This is discouraging. The above solution I thought of SHOULD work
(right?) at least in theory. Unfortunately it doesn't so my entire site has
to be put on hold again until I can get this fixed.
--
Alec S.
alec <@> synetech <.> cjb <.> net

[Alec S.]

"Neal" <ne*****@yahoo.com> wrote in message
news:op**************@news.individual.net...

This isn't easy. Well, it could be if IE supported fixed positioning.

Take a look at http://webpages.charter.net/mmmbeer/...layouts/fixed/
for a method of doing this. This page screws the footer up in IE, but play
with the ideas.

Yeah, sucky IE. :) I'm currently using absolute positioning and it's
okay. I'll look into fixed positioning soon.
--
Alec S.
alec <@> synetech <.> cjb <.> net