Marcel Stör wrote:
Jacob Head wrote:
>Marcel Stör wrote:
>>I want to overhaul http://www.s-tisch.ch/. The layout is fine IMHO
and I need to keep it that way. The implementation, however, is
totally ugly. I intend to replace all frames with a CSS-based
solution. I seriously doubt that it can be achieved without breaking
the layout. Do you think it's possible at all? You seem to have the
expertise to make such a judgement...
It should be quite simple to do-- the site appears just to be a
two-column layout with a header and footer which is a classic CSS
layout. For instance, you might like to have a look at
http://www.strictlycss.com/examples/...n-layout-9.asp which is
pretty much the same (although it has a third menu (in green) at the
top which you wouldn't need).
Thanks a bunch for the link. Some nice examples there...
However, they're all a bit different from what I'm really after. I want to
keep the ~30px padding inside the viewport (dark grey in my example).
Also, I need the "box" to stretch to the entire width & height of the viewport.
That should be possible. The easiest way (although you might get
told-off by some for adding more <div>s than strictly required...) would
be to enclose your whole content (header, columns and footer) in a <div>
which has { margin: 30px; }. Then you would set your body
background-color to be gray. That would put a gray, 30 pixel wide, space
between your content and the edge of the screen, as happens now.
Last but not least, except for the content area all elements should remain
static (i.e. "in place") when the viewport is resized or the content
requires scrolling.
In my example this is achieved with a frameset inside an iframe, which is
double ugly.
Hmm...this is more difficult and I'm not sure whether it's something
that's totally desirable, particularly for viewers with smaller
resolutions. For instance, at the moment, your site is quite hard to
read on an 800x600 monitor:
http://www.jacob-head.com/screenshot.png
because everything has to be fitted into one screen. If you let it
scroll it would be easier to read. Only using CSS, the closest you could
probably get would be by using "position" to set your navigation, header
and footer 30px from the periphery of the screen and giving them a
"z-index" of 1 so that they appear over the top of your content. The
result would be something like this:
http://www.csszengarden.com/?cssfile=202/202.css but with the navigation
etc. instead of the decorative borders. That said, I think having the
content expanding vertically would be an improvement for usability.
Best wishes,
Jacob
>
Thanks for your help.
Marcel