[thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS?

Thu Jul 28 22:13:36 CDT 2011

On Fri, Jul 29, 2011 at 5:18 AM, Will <willthemoor at gmail.com> wrote:

>
> Move the background image from #container_innards to #container and take
> the
> height off of #container_innards. Then, merge the header image with the
> pattern background (instead of leaving it transparent) and lay it on top to
> mask the repeating background and 'fake' the space up top.
>

Thanks Will. Well, we've reached a solution. It was as easy as deciding that
we're not going to have the effect of the container 'moving over' the
pattern background when the window is resized. Everything was so
straightforward from then on. That meant that I could change the pattern
background to 'top center' rather than 'top left', which meant that it was
possible to follow Will's approach. ie, the header image could be merged
with the pattern background (no transparency required), #container_innards
was removed and its background shifted to #container, and the height:100% on
the body only. No further changes to background images necessary.

One more thing I had to do: I had thought that setting height:100% on the
container would cause its background to stretch either to the bottom of the
window, or to the bottom of its content if that exceeded the window height.
The first part works, the second part doesn't. I had to set min-height:100%
and overflow:hidden on the #container to achieve this.

For anyone in the same situation as me, here is the simplified version of my
final result.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Final</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
html, body {
height:100%;
}
body {
 background:url(page_bg.jpg) top center repeat-x #000;
}
#container {
width: 1004px;
 min-height: 100%;
overflow:hidden;
 margin-left: auto;
margin-right: auto;
background:url(container_bg.png) top center repeat-y;
}
#container_top {
background:url(container_top.png) bottom center no-repeat;
height: 35px;
}
</style>
</head>

<body>
<div id="container">
<div id="container_top"></div>
 <p>Page content goes in here.</p>
</div>
</body>
</html>

Thanks everyone for your help.

Cheers,
CB.