Hello,
I designed a frame-based site layout: one right column frame, a fixed top and bottom frame and a scrolling center (see <!-- m --><a class="postlink" href="http://kanka.de/konzept">http://kanka.de/konzept</a><!-- m --> ).
Now I tried to convert this to CSS2, top and right boxes work fine, scrolling box as well ('position.. overflow').
BUT: The bottom-box gets overlayed by text from the scroll-box when the window is small ( see <!-- m --><a class="postlink" href="http://www.kanka.de/test/overflow_test.html">http://www.kanka.de/test/overflow_test.html</a><!-- m --> ).
Is it possible at all to program this kind of layout with CSS?
// Berndthis? (<!-- m --><a class="postlink" href="http://cheers-sendai.com/kanka.htm">http://cheers-sendai.com/kanka.htm</a><!-- m -->)Great - this works.
I was looking at several CSS-sites but none had a similar layout example or adressed the problem.
Only I do not (yet) understand the magic - is it the '* html #text ' definition .. or 'overflow: hidden'?
Will have to dig a bit deeper .. anyway - thanks!Hi -
I noticed that you used floats but didn't see any
block-level elements afterwards that used clear:both;
in order to float them correctly...
Also, I usually set a height for any elements that I'm
going to scroll, which also helps to solve placement
issues - without a lot of extra coding or 'hacks'.
Good luck,
ElI don't understand it 100% myself - I just know it works.
We need this : overflow : hidden; to keep everything on the page - without it there are extra scrollbars that we really don't want.
This part : * html #text {
top:0px;
bottom:0px;
height : 100%;
max-height : 100%;
position : absolute;
border-top : 55px solid #ddd;
border-bottom : 40px solid #ddd;
z-index:1;
}{
is for IE - it works fine in Firefox without it.
Not a great answer - I know, but...
Maybe someone else can explain to us why this works...(?)
I designed a frame-based site layout: one right column frame, a fixed top and bottom frame and a scrolling center (see <!-- m --><a class="postlink" href="http://kanka.de/konzept">http://kanka.de/konzept</a><!-- m --> ).
Now I tried to convert this to CSS2, top and right boxes work fine, scrolling box as well ('position.. overflow').
BUT: The bottom-box gets overlayed by text from the scroll-box when the window is small ( see <!-- m --><a class="postlink" href="http://www.kanka.de/test/overflow_test.html">http://www.kanka.de/test/overflow_test.html</a><!-- m --> ).Is it possible at all to program this kind of layout with CSS?
// Berndthis? (<!-- m --><a class="postlink" href="http://cheers-sendai.com/kanka.htm">http://cheers-sendai.com/kanka.htm</a><!-- m -->)Great - this works.
I was looking at several CSS-sites but none had a similar layout example or adressed the problem.
Only I do not (yet) understand the magic - is it the '* html #text ' definition .. or 'overflow: hidden'?
Will have to dig a bit deeper .. anyway - thanks!Hi -
I noticed that you used floats but didn't see any
block-level elements afterwards that used clear:both;
in order to float them correctly...
Also, I usually set a height for any elements that I'm
going to scroll, which also helps to solve placement
issues - without a lot of extra coding or 'hacks'.
Good luck,
ElI don't understand it 100% myself - I just know it works.
We need this : overflow : hidden; to keep everything on the page - without it there are extra scrollbars that we really don't want.
This part : * html #text {
top:0px;
bottom:0px;
height : 100%;
max-height : 100%;
position : absolute;
border-top : 55px solid #ddd;
border-bottom : 40px solid #ddd;
z-index:1;
}{
is for IE - it works fine in Firefox without it.
Not a great answer - I know, but...
Maybe someone else can explain to us why this works...(?)