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

[Mark Henderson]

On 27 July 2011 18:14, confusticate at gmail.com <confusticate at gmail.com> wrote:
> Because the body already has a repeating background (the dark grey pattern),
> I didn't think Geoff's recommendation would be possible for this design. I
> would be very pleased to find out that it would be possible to use both
> images somehow.

Ok fair point. Which is why David L wrote:
> PS Try. Post your effort. Someone will help.

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.

> I also tried applying Geoff's recommendation to a container
> div. ie, the body retains its dark grey pattern background, and the
> container div has the 500px wide etc png background.

Yeah that's not going to work for you based on the description of your
requirements. 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.

Anyway, back to your earlier comment:

> I didn't think Geoff's recommendation would be possible for this design. I
> would be very pleased to find out that it would be possible to use both
> images somehow

There is one possibility I can think of, but some might consider it a
fudge (merging the two backgrounds into one). Take your original
repeating background image and make it something like 2000px wide by
3px high (wider than any viewport you might expect viewing to occur
in, and 3px high because it helps with the repeating process). Then
take the central column background you are having issues with and
place it on top of and in the middle of the previous background. Then
use that background as per Geoff's previous recommendation on the
body. This should still result in an image of negligible size. Set the
body background colour to something the same as your original, so if
per chance some crazy person using a resolution of  2400 x 1800 has
their browser window maximised, it will still look ok (you *could*
make the image 3000px wide if you really wanted but that is probably
overkill - you can decide on the appropriate values).

ASCII art follows to help (or hinder) my point!

Background 1 (original repeating bg on body): - -
Background 2 (png for central column): ++++++++++++++

New Background 1: - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -  (extended to 2000px)
New Merged Background: - - - - - - - - - - - ++++++++++++++ - - - - -
- - - - - -

Make sense?
HTH

--
/*Mark