? Scalable layout with sections

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Alec S. - 23 Sep 2004 19:43 GMT

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 |

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

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

| 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

Reply to this Message

jmm-list-gn - 24 Sep 2004 08:02 GMT

> 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?

Signature

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

Reply to this Message

Mark Tranchant - 24 Sep 2004 08:19 GMT

> Hi,
>
[quoted text clipped - 13 lines]
> | 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/perspective/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.

Signature

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

Reply to this Message

Jan Roland Eriksson - 24 Sep 2004 08:23 GMT

>I need help redesigning my website....

[...]

>+------------------------------------+
>| logo |
[quoted text clipped - 6 lines]
>| 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".

Signature

Rex

Reply to this Message

Alec S. - 24 Sep 2004 18:06 GMT

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

> +------------------------------------+
> | logo |
[quoted text clipped - 6 lines]
> | misc data |
> +------------------------------------+

Reply to this Message

Alec S. - 25 Sep 2004 01:39 GMT

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

Reply to this Message

Curioso - 24 Sep 2004 19:56 GMT

> +------------------------------------+
>> logo |
[quoted text clipped - 6 lines]
>> misc data |
> +------------------------------------+

can you post the code?!

Signature

Curioso

Reply to this Message

Neal - 24 Sep 2004 20:16 GMT

>> +------------------------------------+
>>> logo |
[quoted text clipped - 7 lines]
>> +------------------------------------+
> can you post the code?!

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

Reply to this Message

Andrew Thompson - 24 Sep 2004 22:25 GMT

> Post a URL instead.

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

Signature

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

Reply to this Message

Neal - 24 Sep 2004 20:23 GMT

> Hi,
>
[quoted text clipped - 14 lines]
> | misc data |
> +------------------------------------+

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

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

Reply to this Message

Alec S. - 26 Sep 2004 23:16 GMT

> This isn't easy. Well, it could be if IE supported fixed positioning.
>
> Take a look at http://webpages.charter.net/mmmbeer/code/css/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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2004

? Scalable layout with sections