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

[confusticate at gmail.com]

On Wed, Jul 27, 2011 at 5:05 PM, Patrick Horgan <phorgan1 at yahoo.com> wrote:

> No, I looked at that and I'm really not clear about what you want.  If I
> understood what you want I could give you an easy solution, I promise.
>


Apologies for being so unclear. Perhaps if I approached it by listing the
requirements of the design. "The background" is the very dark grey floral
repeating background. "The container" (where the content will go) is the
medium-grey striped rectangle and everything within it.

1. The container has to be centred. As the window is widened, the container
needs to move across the background.
2. The container needs to stretch to the bottom of the window, even if it
doesn't contain enough content to push it down that far.
3. Item (2) should not create an unnecessary scrollbar.

That's it really. It really seems so straightforward, yet I can't seem to
figure it out. I think what's tripping me up is the combination of a
patterned repeating background, the 100% height requirement, and the
semi-transparency of the header div image.


On Wed, Jul 27, 2011 at 6:06 PM, Mark Henderson <shadefrozen at gmail.com>
 wrote:
>
> As you can tell, by not posting a live example of your
> current progress and not explaining your wishes clearly the first time
> round, it is difficult for list members to offer up much in the way of
> *useful* assistance without a certain amount of guesswork.
>
>
Yes, I have clearly invoked the ire of the list by not posting my real work.
The reason I gave such a basic example in my original post was because I
thought it was the simplest illustration of my wishes rather than my actual
faulty work. I didn't want to influence any ideas by showing an approach
that already wasn't working. Well, I know not to do that again! The reaction
nearly scared me right off. My intention here is to learn, not to annoy, so
I do apologise for that.


On Wed, Jul 27, 2011 at 6:06 PM, Mark Henderson <shadefrozen at gmail.com>
 wrote:
>
> I didn't take the time to view the prototype in multiple browsers but
> in FF3 on XP at a 1024x768 screen resolution, it didn't assist much at
> all (again that could just be me). Do you actually have a *simplified*
> test page with something *close* to what you want, INCLUDING the
> background and the issue you have with it? That way we can look at the
> code you have and make recommended changes, or re-write it according
> to what we see.


Simplified div-based test page: http://snipurl.com/t5wyq-meep

What's right: The patterned background fills the window as necessary, and
the content floats over it to centre itself.
What's wrong: The unnecessary scrollbar. If there is a way to have the
scrollbar come up only when necessary, then the problem is solved.

Full table-based approach: http://snipurl.com/t7pyu-meep. (I didn't simplify
this because my intention is to show behaviour.)

What's right: This behaves as I intended ...
What's wrong: ... except for on IE7, where cell heights are problematic.
Also... it's tables. Tables for layout. You don't need to tell me.


On Wed, Jul 27, 2011 at 6:06 PM, Mark Henderson <shadefrozen at gmail.com>
 wrote:

> There is one possibility I can think of, but some might consider it a
> fudge (merging the two backgrounds into one).
>
> [...]
>
> Make sense?


Yes, it does make sense, thanks. I had considered this approach, but was
really hoping there was an alternative just because it did seem a bit of a
fudge. Plus, using that approach, I wasn't sure how to incorporate the
patterned background fading to black near the bottom. I'm starting to think
that the design may have to be changed to accommodate the situation.



Sincere thanks to everyone on this thread.

Cheers,
CB.