I would have guessed that this issue had been discussed to death, but I
couldn't find an answer to my problem in the ciwas archives. So, at the
risk of asking something trivial, here goes:

I want to have a page that looks as follows: at the left, a blue column
with a navigation menu. The rest of the page, with a white background, is
for the content. The blue fades smoothly into the white.

I managed to do this by using a background image for the body, repeated
vertically. This image is a 200px wide blue field, with a smooth
transition to white. A div with the menu is absolutely positioned at
the right, so it overlaps the blue of the background image. You can see
the result at http://www.phys.uu.nl/~gdevries/test/goal.cgi

The problem with this solution is that I have to specify the width of the
menu in px. I would of course prefer to specify it in em, but then the
trick with the background image doesn't work.

The best I could do so far is to set the background-color of the menu div
to blue and its height to 100%. According to the CSS2 specs, its height
should then be the height of the containing box, which is the body. I
understand from previous posts that the height of the viewport is taken in
this case.

Now if the content is taller then the height of the viewport, and you
scroll down, you see that the menu div with its background colour is
really only as high as the viewport; underneath you see the body
background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi

My question is: how can I make this menu div stretch all the way to the
bottom of the body?

I have read numerous posts about centering in the viewport, or filling the
viewport if the content is short, but no answer to this particular
question.

Thanks for any thoughts you can give!

Garmt de Vries.

Garmt de Vries wrote:[color=blue]
> I would have guessed that this issue had been discussed to death, but I
> couldn't find an answer to my problem in the ciwas archives. So, at the
> risk of asking something trivial, here goes:[/color]

[table-like layout]

You want a table-like layout. So you have to use the table* values for
the display property (CSS, don't work in WinIE <= 6.0) or use HTML tables.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Garmt de Vries <gdevries@phys.uu.nl> wrote:
[color=blue]
>I want to have a page that looks as follows: at the left, a blue column
>with a navigation menu. The rest of the page, with a white background, is
>for the content. The blue fades smoothly into the white.
>
>I managed to do this by using a background image for the body, repeated
>vertically. This image is a 200px wide blue field, with a smooth
>transition to white. A div with the menu is absolutely positioned at
>the right, so it overlaps the blue of the background image. You can see
>the result at http://www.phys.uu.nl/~gdevries/test/goal.cgi
>
>The problem with this solution is that I have to specify the width of the
>menu in px. I would of course prefer to specify it in em, but then the
>trick with the background image doesn't work.[/color]

I can't think of a way to do it with ems (other than nasty stuff with
z-index and em scaled images), but the following works with percentage
sized columns: http://steve.pugh.net/test/test66.html

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

In article Garmt de Vries wrote:
[color=blue]
> I want to have a page that looks as follows: at the left, a blue column
> with a navigation menu. The rest of the page, with a white background, is
> for the content. The blue fades smoothly into the white.[/color]

That's easy.
[color=blue]
> I managed to do this by using a background image for the body, repeated
> vertically. This image is a 200px wide blue field, with a smooth
> transition to white. A div with the menu is absolutely positioned at
> the right, so it overlaps the blue of the background image. You can see
> the result at[/color]
[color=blue]
> http://www.phys.uu.nl/~gdevries/test/goal.cgi[/color]

Server seems to have some slowdown... You are right that it is not good
solution. Anyway you could use em and huge white area on right of image,
and blue body backgroud. That might degrade badly though
[color=blue]
> Now if the content is taller then the height of the viewport, and you
> scroll down, you see that the menu div with its background colour is
> really only as high as the viewport; underneath you see the body
> background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi[/color]

Replace CSS that you have with this:
---
html, body {margin:0;padding:0;height:100%; background:yellow}
[foo], html, body, #menu {min-height:100%;height:auto;}

#content {
background: url("transition.gif") yellow repeat-y;
border-left:blue solid 15em;
margin-left: -40px;
/* This padding has to have some value, as collapsing margins work in
Opera 7*/
padding:0.5em;
padding-left:60px;

}

#menu {
background: url("transition.gif") blue right repeat-y;
position: absolute; top: 0; left: 0;
height:100%;
width: 15em;
}
---

Practically, have that transition picture in both parts, and position
them one over another.

There is also some code that tries to make menu at least as high as
viewport. Not tested exept Opera 7.5p1, might work on IE, Might work on
Mozilla and maybe in others too. [foo] is supposed to hide rule from IE,
but I'm not sure if I recalled correctly how to use it...

If you don't need ot to be as high as viewport, just remove all vertical
stuff.
[color=blue]
> I have read numerous posts about centering in the viewport, or filling the
> viewport if the content is short, but no answer to this particular
> question.[/color]

I have answered it few times, exept not exactly in this form. Usually it
is about border in between ;-)


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

In article Steve Pugh wrote:

[transition of color in middle of page]
[color=blue]
> I can't think of a way to do it with ems [...], but following
> works with percentage sized columns:
> http://steve.pugh.net/test/test66.html[/color]

Hm. I managed to think two ways, but I haven't tested them much, just
Opera 7.5p1:

http://www.student.oulu.fi/~laurirai...ion/index.html
http://www.student.oulu.fi/~laurirai...on/index2.html

Maybe I will get some testing done sometime, but now I need to go buy
some food.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

> In article Garmt de Vries wrote:[color=blue]
>[color=green]
>>Now if the content is taller then the height of the viewport, and you
>>scroll down, you see that the menu div with its background colour is
>>really only as high as the viewport; underneath you see the body
>>background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi[/color][/color]

I was hoping to glean some information from this thread, since I have
the same problem.

http://www.tsmchughs.com/

div#navigation has position absolute, top left, green background. It
should be an easier case, since there's no image involved. Just the
green background for #navigation, and white background for body. On
short pages, I have green for nav, white for body. On long pages, the
green nav only extends a bit below the first screen. Beneath that, it
changes to white. This isn't catastrophic, but it'd look nicer if the
green extended down. I didn't think there was a solution, but still I
tried what was suggested.

Lauri Raittila wrote:[color=blue]
> html, body {margin:0;padding:0;height:100%; background:yellow}
> [foo], html, body, #menu {min-height:100%;height:auto;}[/color]
[selector for bg image snipped; I don't think it was relevant...][color=blue]
> #menu {
> background: url("transition.gif") blue right repeat-y;
> position: absolute; top: 0; left: 0;
> height:100%;
> width: 15em;
> }[/color]

I played around with height and min-height on my localhost test
server, with no luck. Tested in MSIE 5/Win, O7.23, and Moz 1.3. Is
there a simple solution that I'm missing?

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Lauri Raittila <lauri@raittila.cjb.net> wrote:[color=blue]
>In article Steve Pugh wrote:
>
>[transition of color in middle of page]
>[color=green]
>> I can't think of a way to do it with ems [...], but following
>> works with percentage sized columns:
>> http://steve.pugh.net/test/test66.html[/color]
>
>Hm. I managed to think two ways, but I haven't tested them much, just
>Opera 7.5p1:
>
>http://www.student.oulu.fi/~laurirai...ion/index.html[/color]

I like. Very obvious, surprised I didn't think of it. ;-)
[color=blue]
>http://www.student.oulu.fi/~laurirai...on/index2.html[/color]

Hmm, seems rather inelegant. But that appears to be mostly down to the
need to get it working in IE...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

In article Brian wrote:[color=blue][color=green]
> > In article Garmt de Vries wrote:
> >[color=darkred]
> >>Now if the content is taller then the height of the viewport, and you
> >>scroll down, you see that the menu div with its background colour is
> >>really only as high as the viewport; underneath you see the body
> >>background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi[/color][/color]
>
> I was hoping to glean some information from this thread, since I have
> the same problem.[/color]

I answered about this same question few days ago. Independently in
alt.html and sfnet.viestinta.www IIRC. Maybe it is fashionable...

[color=blue]
> http://www.tsmchughs.com/
>
> div#navigation has position absolute, top left, green background. It
> should be an easier case, since there's no image involved.[/color]

Maybe, maybe not.
[color=blue]
> Just the green background for #navigation, and white background for body. On
> short pages, I have green for nav, white for body. On long pages, the
> green nav only extends a bit below the first screen. Beneath that, it
> changes to white.[/color]

If I understood you correctly, problem is only in long pages. (so I
ignore short ones)
[color=blue]
> This isn't catastrophic, but it'd look nicer if the
> green extended down. I didn't think there was a solution, but still I
> tried what was suggested.[/color]

You missed that {border:15em blue solid} in that suggestion - that was
the point in it, height stuff was just experiment.
[color=blue]
> Is there a simple solution that I'm missing?[/color]

This could be what you need:

body {border-left:4px solid green;margin-left:0;}
body > div {border-left:8em solid green;}

Of course that needs lots of work, but your CSS is so hard to follow I
gave up. IE certainly don't get it whitout changes.



--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

On Mon, 19 Jan 2004 17:21:40 GMT, Brian
<usenet2@julietremblay.com.invalid-remove-this-part> wrote:
[color=blue]
>I was hoping to glean some information from this thread, since I have
>the same problem.
>
>http://www.tsmchughs.com/
>
>div#navigation has position absolute, top left, green background. It
>should be an easier case, since there's no image involved. Just the
>green background for #navigation, and white background for body. On
>short pages, I have green for nav, white for body. On long pages, the
>green nav only extends a bit below the first screen. Beneath that, it
>changes to white. This isn't catastrophic, but it'd look nicer if the
>green extended down. I didn't think there was a solution, but still I
>tried what was suggested.[/color]

Not sure, but does this help?

http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Mon, 19 Jan 2004, Lauri Raittila wrote:
[color=blue]
> In article Steve Pugh wrote:
>
> [transition of color in middle of page]
>[color=green]
> > I can't think of a way to do it with ems [...], but following
> > works with percentage sized columns:
> > http://steve.pugh.net/test/test66.html[/color]
>
> Hm. I managed to think two ways, but I haven't tested them much, just
> Opera 7.5p1:
>
> http://www.student.oulu.fi/~laurirai...ion/index.html
> http://www.student.oulu.fi/~laurirai...on/index2.html
>
> Maybe I will get some testing done sometime, but now I need to go buy
> some food.[/color]

Thanks all for your suggestions.

Steve's method, and Lauri's 1st method seem to work fine on Opera 7.21
(haven't tested others yet). They present one problem, though: they both
require the menu div to come before the content div. Switching off CSS
forces you to go through the entire menu before you reach the content. I
would really like to have the menu after the content in the HTML code.

Perhaps I'm too demanding?

Lauri's second attempt, with an absolutely positioned menu, doesn't pose
this problem. Unfortunately, it doesn't work as intended if you have to
scroll below the lower edge of the viewport... just like my original
attempt.

But your contributions have given me some food for thought. I'll
experiment a bit more.

Thanks,
Garmt.

Garmt de Vries <gdevries@phys.uu.nl> wrote:[color=blue]
>On Mon, 19 Jan 2004, Lauri Raittila wrote:[color=green]
>> In article Steve Pugh wrote:
>>[color=darkred]
>> > http://steve.pugh.net/test/test66.html[/color]
>>
>> http://www.student.oulu.fi/~laurirai...ion/index.html
>> http://www.student.oulu.fi/~laurirai...on/index2.html[/color]
>
>Thanks all for your suggestions.
>
>Steve's method, and Lauri's 1st method seem to work fine on Opera 7.21
>(haven't tested others yet). They present one problem, though: they both
>require the menu div to come before the content div. Switching off CSS
>forces you to go through the entire menu before you reach the content. I
>would really like to have the menu after the content in the HTML code.[/color]

For my method just float the content right instead of floating the nav
left. The content now has width:75%; and the nav has margin-right:
75%;, the image and styles for the background remain unchanged.

With Lauri's method this sort of simple swap isn't as easy. A
position: based method like Lauri's second suggestion is more amenable
to that sort of manipulation.

However, I've just thought of something else. Let me see if it
works...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Steve Pugh <steve@pugh.net> wrote:
[color=blue]
>However, I've just thought of something else. Let me see if it
>works...[/color]

http://steve.pugh.net/test/test66-em.html

It works. Though I'm certain that in theory it should break when the
nav is longer than both the content and the window, but it doesn't
seem to in my test browsers (Opera 5 and 7.23, IE 5.01 and 6, Netscape
6, Mozilla 1.5). Even degrades fairly gracefully in Netscape 4.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

On Tue, 20 Jan 2004, Steve Pugh wrote:
[color=blue]
> Steve Pugh <steve@pugh.net> wrote:
>
> http://steve.pugh.net/test/test66-em.html
>
> It works. Though I'm certain that in theory it should break when the
> nav is longer than both the content and the window, but it doesn't
> seem to in my test browsers (Opera 5 and 7.23, IE 5.01 and 6, Netscape
> 6, Mozilla 1.5). Even degrades fairly gracefully in Netscape 4.[/color]

Yes, this looks good. Needs a larger background image, but that can be
taken care of.

I put your method in my ply-around script at
http://www.phys.uu.nl/~gdevries/test/pugh2.cgi to test for various font
sizes and menu/content heights.

It works fine in Opera 7.21 (Linux), Konqueror 3.03 (Linux) too.

Thanks a lot!

Best,
Garmt.

In article Garmt de Vries wrote:[color=blue]
> On Mon, 19 Jan 2004, Lauri Raittila wrote:
>[color=green]
> > In article Steve Pugh wrote:
> >
> > [transition of color in middle of page]
> >[color=darkred]
> > > I can't think of a way to do it with ems [...], but following
> > > works with percentage sized columns:
> > > http://steve.pugh.net/test/test66.html[/color]
> >
> > Hm. I managed to think two ways, but I haven't tested them much, just
> > Opera 7.5p1:
> >
> > http://www.student.oulu.fi/~laurirai...ion/index.html
> > http://www.student.oulu.fi/~laurirai...on/index2.html
> >
> > Maybe I will get some testing done sometime, but now I need to go buy
> > some food.[/color]
>
> Thanks all for your suggestions.
>
> Steve's method, and Lauri's 1st method seem to work fine on Opera 7.21
> (haven't tested others yet). They present one problem, though: they both
> require the menu div to come before the content div. Switching off CSS
> forces you to go through the entire menu before you reach the content. I
> would really like to have the menu after the content in the HTML code.
>
> Perhaps I'm too demanding?[/color]

You aren't, it took 30 seconds to change it:
http://www.student.oulu.fi/~laurirai...on/index3.html
[color=blue]
> Lauri's second attempt, with an absolutely positioned menu, doesn't pose
> this problem. Unfortunately, it doesn't work as intended if you have to
> scroll below the lower edge of the viewport... just like my original
> attempt.[/color]

Really? Yes it seems to do now. I tested it god knows how many times and
couldn't get it break. I must have changed something accidentally. It
seems worse way anyway, so it is not big problem


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Stephen Poley wrote:[color=blue]
> On Mon, 19 Jan 2004 17:21:40 GMT, Brian wrote:
>[color=green]
>> http://www.tsmchughs.com/
>>
>> On long pages, the green nav only extends a bit below the first
>> screen. Beneath that, it changes to white.[/color]
>
> Not sure, but does this help?
> http://www.xs4all.nl/~sbpoley/webmatters/layout3.html[/color]

Thanks for the link to the layout idea. It doesn't work for me because
#navigation has position: absolute. On balance, I'd rather keep the
nav in a sensible place in the html than have the green extend down
the page as I'd like.

It's a real pity that I can't use display: table-cell with position:
absolute; that would at least solve the problem in Safari, Moz, and Opera.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

In article Brian wrote:
[color=blue]
> Thanks for the link to the layout idea. It doesn't work for me because
> #navigation has position: absolute. On balance, I'd rather keep the
> nav in a sensible place in the html than have the green extend down
> the page as I'd like.
>
> It's a real pity that I can't use display: table-cell with position:
> absolute; that would at least solve the problem in Safari, Moz, and Opera.[/color]

I don't think your structure will change worse if you wrap all content
exept menu in one div, and give it suitable green left border. Then it
works in IE. That is what I tried to write in my other post.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.