Fixed "frame" at top, main text doesn't flow under it

[Stan Brown]

I've searched Google and the group archives, and came up empty, but
maybe I just haven't selected the right search term.

This concerns only the screen -- printing isn't an issue. I'm also
not concerned about the appearance of the page in IE6 as long as the
page is still usable.

I want to have two pseudo-frames, using only CSS and no JS. The top
"frame", 4em high, is a menu, and I want it to stay at the top of the
viewport. The rest of the page is the text. The menu items all
point to various anchors, <h2 id-...and similar, in the page.

I've got the menu in place using position:fixed. And using a
padding-top, I have the text starting below the menu. But as soon as
I scroll the text it slides under the menu, and when I click a link
in the menu the anchor text is a the top of the viewport, under the
window.

Is there a way to set up these pseudo-frames, or can I truly not do
it in CSS2?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Ben C]

On 2008-09-30, Stan Brown <th************@fastmail.fmwrote:

I've searched Google and the group archives, and came up empty, but
maybe I just haven't selected the right search term.

This concerns only the screen -- printing isn't an issue. I'm also
not concerned about the appearance of the page in IE6 as long as the
page is still usable.

I want to have two pseudo-frames, using only CSS and no JS. The top
"frame", 4em high, is a menu, and I want it to stay at the top of the
viewport. The rest of the page is the text. The menu items all
point to various anchors, <h2 id-...and similar, in the page.

I've got the menu in place using position:fixed. And using a
padding-top, I have the text starting below the menu. But as soon as
I scroll the text it slides under the menu, and when I click a link
in the menu the anchor text is a the top of the viewport, under the
window.

Is there a way to set up these pseudo-frames, or can I truly not do
it in CSS2?

You don't need to do position: fixed. Divide the page up with absolutely
positioned divs and make each of them overflow: scroll.

This kind of thing:

.frame
{
position: absolute;
left: 0;
right: 0;
overflow: scroll;
}
.top
{
top: 0;
height: 4em;
}
.main
{
top: 4em;
bottom: 0;
}

....

<div class="frame top">
</div>

<div class="frame main">
</div>

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

I want to have two pseudo-frames, using only CSS and no JS. The top
"frame", 4em high, is a menu, and I want it to stay at the top of the
viewport. The rest of the page is the text. The menu items all
point to various anchors, <h2 id-...and similar, in the page.

....

Is there a way to set up these pseudo-frames, or can I truly not do
it in CSS2?

You don't need to do position: fixed. Divide the page up with absolutely
positioned divs and make each of them overflow: scroll.

This kind of thing:

.frame
{
position: absolute;
left: 0;
right: 0;
overflow: scroll;
}

Nice idea Ben...

<http://dorayme.890m.com/alt/pseudoFrames.html>

--
dorayme

[Ben C]

On 2008-09-30, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

I want to have two pseudo-frames, using only CSS and no JS. The top
"frame", 4em high, is a menu, and I want it to stay at the top of the
viewport. The rest of the page is the text. The menu items all
point to various anchors, <h2 id-...and similar, in the page.

...

>
Is there a way to set up these pseudo-frames, or can I truly not do
it in CSS2?

You don't need to do position: fixed. Divide the page up with absolutely
positioned divs and make each of them overflow: scroll.

This kind of thing:

.frame
{
position: absolute;
left: 0;
right: 0;
overflow: scroll;
}

Nice idea Ben...

<http://dorayme.890m.com/alt/pseudoFrames.html>

What does height* mean? I had a look at view source and saw it there.

Maybe it's a typo and that's why you also set background: #fcc on body.

Using that #fifth link is a nice idea-- you couldn't do that with
frames.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-09-30, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

I want to have two pseudo-frames, using only CSS and no JS. The top
"frame", 4em high, is a menu, and I want it to stay at the top of the
viewport. The rest of the page is the text. The menu items all
point to various anchors, <h2 id-...and similar, in the page.

...

Is there a way to set up these pseudo-frames, or can I truly not do
it in CSS2?

You don't need to do position: fixed. Divide the page up with absolutely
positioned divs and make each of them overflow: scroll.

This kind of thing:

.frame
{
position: absolute;
left: 0;
right: 0;
overflow: scroll;
}

Nice idea Ben...

<http://dorayme.890m.com/alt/pseudoFrames.html>

What does height* mean? I had a look at view source and saw it there.

Just my quick and dirty way to remove it for a moment. I forgot to
remove it. I could bot see it being necessary

>
Maybe it's a typo and that's why you also set background: #fcc on body.

Using that #fifth link is a nice idea-- you couldn't do that with
frames.

I don't think this is quite so, you can do it in frames. You just link
to whatever#id in the target doc. Oh yes! I just remembered, you are of
the modern generation which thinks iFrames whereas I think the T model
job, real frames! <g>

By the way, the first thought that struck me in looking at OP's problem
was that he could have made fixed work (at least on FF and Safari) by
attending to backgrounds:

<http://dorayme.890m.com/alt/positionFixed.html>

But yours was more interesting.

--
dorayme

[dorayme]

In article <do**********************************@web.aioe.org >,
dorayme <do************@optusnet.com.auwrote:

bot

not

--
dorayme

[Ben C]

On 2008-10-01, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2008-09-30, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
I want to have two pseudo-frames, using only CSS and no JS. The top
"frame", 4em high, is a menu, and I want it to stay at the top of the
viewport. The rest of the page is the text. The menu items all
point to various anchors, <h2 id-...and similar, in the page.

...

Is there a way to set up these pseudo-frames, or can I truly not do
it in CSS2?

You don't need to do position: fixed. Divide the page up with absolutely
positioned divs and make each of them overflow: scroll.

This kind of thing:

.frame
{
position: absolute;
left: 0;
right: 0;
overflow: scroll;
}

Nice idea Ben...

<http://dorayme.890m.com/alt/pseudoFrames.html>

What does height* mean? I had a look at view source and saw it there.

Just my quick and dirty way to remove it for a moment. I forgot to
remove it. I could bot see it being necessary

>>
Maybe it's a typo and that's why you also set background: #fcc on body.

Using that #fifth link is a nice idea-- you couldn't do that with
frames.

I don't think this is quite so, you can do it in frames. You just link
to whatever#id in the target doc. Oh yes! I just remembered, you are of
the modern generation which thinks iFrames whereas I think the T model
job, real frames! <g>

No I was thinking of real frames this time. I'm sure you're right and it
does work.

By the way, the first thought that struck me in looking at OP's problem
was that he could have made fixed work (at least on FF and Safari) by
attending to backgrounds:

<http://dorayme.890m.com/alt/positionFixed.html>

Yes that works too, and means you get to scroll the main "frame" with
the proper viewport scrollbar. But quite jerky in Firefox because their
implementation of position: fixed is crap.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-10-01, dorayme <do************@optusnet.com.auwrote:

>

By the way, the first thought that struck me in looking at OP's problem
was that he could have made fixed work (at least on FF and Safari) by
attending to backgrounds:

<http://dorayme.890m.com/alt/positionFixed.html>

Yes that works too, and means you get to scroll the main "frame" with
the proper viewport scrollbar. But quite jerky in Firefox because their
implementation of position: fixed is crap.

I had heard of this jerkiness and have raised it myself at times but I
notice not a trace of such jerkiness in my Mac FF3 with the above URL
(nor in any other of my browsers. But I have not tested on Windows).

Now, I am talking simple scrollbar with mouse, not scroll wheels

------------
(Reminder to myself, must get one of these... I miss it when I have had
a session on a Windows box, they all have scroll wheels with their mice)

--
dorayme

[Stan Brown]

Wed, 01 Oct 2008 08:47:56 +1000 from dorayme
<do************@optusnet.com.au>:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

This kind of thing:

.frame
{
position: absolute;
left: 0;
right: 0;
overflow: scroll;
}

Nice idea Ben...

<http://dorayme.890m.com/alt/pseudoFrames.html>

My thanks to you both. This seems to do exactly what I asked in FF3
and IE7. It fails in IE6 (top element disappears off top of screen
when clicking "make fifth element visible"), but I mentioned that I
don't care about IE6. Terrific!

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Ben C]

On 2008-10-01, dorayme <do************@optusnet.com.auwrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2008-10-01, dorayme <do************@optusnet.com.auwrote:

>>

By the way, the first thought that struck me in looking at OP's problem
was that he could have made fixed work (at least on FF and Safari) by
attending to backgrounds:

<http://dorayme.890m.com/alt/positionFixed.html>

Yes that works too, and means you get to scroll the main "frame" with
the proper viewport scrollbar. But quite jerky in Firefox because their
implementation of position: fixed is crap.

I had heard of this jerkiness and have raised it myself at times but I
notice not a trace of such jerkiness in my Mac FF3 with the above URL
(nor in any other of my browsers. But I have not tested on Windows).

Now, I am talking simple scrollbar with mouse, not scroll wheels

I get the jerkiness even with the normal scrollbar, or just pressing the
down arrow (FF3 on GNU/Linux). It may be that you just have a faster
computer. Also Darwin may be more efficient at updating the screen than
Xorg.