div/bg color issue..

On 2009-06-19, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrnh3lbbu.32l.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

1. Background images with repeat-y pretending to be column backgrounds.
2. Borders pretending to be column backgrounds.
3. Absolute positioning and z-index.
4. display: table-cell.
5. dorayme-style nesting (but you need to be able to rank the columns in
order of height)

1. It is so simple for some situations that it feels daft not using it.
The desire not to do it on some sort of purist grounds is fair enough

If someone's both a purist and a web-author I would suggest they're in
the wrong job.

but I notice that Matthew Taylor rather over-eggs the pudding: "Why
waste bandwidth and precious HTTP requests when you can do everything in
pure CSS and XHTML?" One of the attractive features of this technique is
how very tiny the images need be, the repeat-y is just CSS.

2. I think you disapproved of this one a long while back. Seemed fair
comment but I rather like it because it is so nicely counterintuitive
yet solid enough. <g

I don't like it because it's too clever.

3. Seems a solid technique. As with many of these tableless column
techniques extra divs are required, something that I guess many of us
feel slightly compromised by in a rush from simple tables.

3 is to me the obvious way to do it.

4. I have no comment on this at all. I merely weep and wish.

This reminds me: you can also do columns with inline-blocks. But it
doesn't solve the equal-height problem.

[...]

6. Let's stick in HTML tables as a sixth even though the 5 you mention
are meant as alternatives to HTML tables. The biggest thing against
tables for columns - I am talking here just 3 cells and one row and
nothing else at all - is not the harder construction or ease of update,
it is a complete myth that these are real factors. Rather, the arguments
about adaptability to different viewing platforms or human non-visual
modalities. And perhaps arguments concerning search engine advantages.

Yes, although none of these arguments are really very convincing, which
is why I originally ranked "just use a table" quite high.

It is not surprising how natural the desire for columning is. Perhaps,
the cross browser difficulties of it without tables should encourage
more of us to become less dependent on columns in the first place. You
know, "stop wanting them!". Out of adversity...

There are some new things proposed for CSS3 to make these 3-column
layouts quite a bit easier.

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]

here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html

Add this CSS:

#wrapper
{
position: relative;
z-index: 0;
}
.background
{
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
#leftbar_bg { background: #FFFF00; left: 0; width: 250px; }
#content_bg { background: #00CC00; left: 250px; width: 460px; }
#right_bg { background: #CC33CC; right: 0; width: 250px }

And these divs:

<div id="leftbar_bg" class="background"></div>
<div id="content_bg" class="background"></div>
<div id="rightbar_bg" class="background"></div>

Put each div as the first thing inside the #leftbar, #content and
#rightbar divs respectively.

The important reason why this works is as follows:

..background has bottom: 0, which means it stretches all the way to the
bottom of its container. The container for all three background divs is
#wrapper, because it is the nearest positioned ancestor (that's why it's
position: relative). #wrapper's height is given by its contents, i.e.
determined by the height of the tallest column.

We give #wrapper z-index: 0 to make it start a stacking context, and
..background z-index: -1 to put the backgrounds at the back of that
stacking context.

This means the backgrounds will be stacked right at the back of
#wrapper, but on top of anything #wrapper is supposed to be on top of,
i.e., where they belong.

If you were a purist, you could try inserting the background divs with
:before, but that would only work in some browsers (possibly not even in
Firefox).

Good luck!

Ben C wrote:

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]
here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html

Add this CSS:

#wrapper
{
position: relative;
z-index: 0;
}
.background
{
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
#leftbar_bg { background: #FFFF00; left: 0; width: 250px; }
#content_bg { background: #00CC00; left: 250px; width: 460px; }
#right_bg { background: #CC33CC; right: 0; width: 250px }

It never occurred to me that you could position background colors like
background images. It's obvious now and quick imaginative thinking on
Ben's part.

I'm thinking it won't be what they expect, but they would have to
think that it is very creative and consider giving her the job. It's
unknown how much they really know about html/css, but the test is
designed cleverly.

As someone put it earlier, this is a classic design. Everyone should
have a workable way of doing multiple columns that is adjustable. This
has some failures there, but there is a lot that can be done also. For
example, you could just as easily drop in fake borders, which is much
more useful.

I know that *everything* I do starts with this.

Dorayme, didn't you have at one time a compendium of group 3 column
designs? There is one more is missing, I think.

Jeff

And these divs:

div id="leftbar_bg" class="background"></div
div id="content_bg" class="background"></div
div id="rightbar_bg" class="background"></div

Put each div as the first thing inside the #leftbar, #content and
#rightbar divs respectively.

The important reason why this works is as follows:

.background has bottom: 0, which means it stretches all the way to the
bottom of its container. The container for all three background divs is
#wrapper, because it is the nearest positioned ancestor (that's why it's
position: relative). #wrapper's height is given by its contents, i.e.
determined by the height of the tallest column.

We give #wrapper z-index: 0 to make it start a stacking context, and
.background z-index: -1 to put the backgrounds at the back of that
stacking context.

This means the backgrounds will be stacked right at the back of
#wrapper, but on top of anything #wrapper is supposed to be on top of,
i.e., where they belong.

If you were a purist, you could try inserting the background divs with
:before, but that would only work in some browsers (possibly not even in
Firefox).

Good luck!

Ben C wrote:

On 2009-06-19, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrnh3lbbu.32l.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

1. Background images with repeat-y pretending to be column backgrounds.
2. Borders pretending to be column backgrounds.
3. Absolute positioning and z-index.
4. display: table-cell.
5. dorayme-style nesting (but you need to be able to rank the columns in
order of height)
1. It is so simple for some situations that it feels daft not using it.
The desire not to do it on some sort of purist grounds is fair enough

If someone's both a purist and a web-author I would suggest they're in
the wrong job.

I totally agree with Ben on this. Purism leads to what can't be done
and rather staid designs.

but I notice that Matthew Taylor rather over-eggs the pudding: "Why
waste bandwidth and precious HTTP requests when you can do everything in
pure CSS and XHTML?" One of the attractive features of this technique is
how very tiny the images need be, the repeat-y is just CSS.

2. I think you disapproved of this one a long while back. Seemed fair
comment but I rather like it because it is so nicely counterintuitive
yet solid enough. <g

I don't like it because it's too clever.

3. Seems a solid technique. As with many of these tableless column
techniques extra divs are required, something that I guess many of us
feel slightly compromised by in a rush from simple tables.

3 is to me the obvious way to do it.

For non javascript, *3* is the way to go. I almost always use js as
the degradation in non js browsers is not a deal breaker and the ease
and flexibilty is remarkable. If you are living or serving behind a
javascript firewall, as much business to business is, then you will need
to learn 3. I see that there are lots of tutorials. Everything else is a
cludge.

4. I have no comment on this at all. I merely weep and wish.

This reminds me: you can also do columns with inline-blocks. But it
doesn't solve the equal-height problem.

Yeah bummer. There's also the cludge of having to use span for IE6.

[...]
6. Let's stick in HTML tables as a sixth even though the 5 you mention
are meant as alternatives to HTML tables. The biggest thing against
tables for columns - I am talking here just 3 cells and one row and
nothing else at all - is not the harder construction or ease of update,
it is a complete myth that these are real factors. Rather, the arguments
about adaptability to different viewing platforms or human non-visual
modalities. And perhaps arguments concerning search engine advantages.

Yes, although none of these arguments are really very convincing, which
is why I originally ranked "just use a table" quite high.

It is not surprising how natural the desire for columning is. Perhaps,
the cross browser difficulties of it without tables should encourage
more of us to become less dependent on columns in the first place. You
know, "stop wanting them!". Out of adversity...

Simple pages can live without, but it is hard to do a modern high
density site with this missing.

There are some new things proposed for CSS3 to make these 3-column
layouts quite a bit easier.

Yeah, another 4 or 5 years before the non supporting browsers slip
away. It's always that way in html.

Jeff

Ben C wrote:

On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]
here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html

well guys, whaddayaknow.. I just got a phone call from them.. have an
interview Tue morning....

he said he knew the only way to do it was with img-bg's.. that they
deliberately sent contents of diff. lengths for the divs to test
applicants' abilities, etc.. I couldn't hear the guy too well, the
comm. quality was not very good, but well, it looks like all my efforts
and sweating paid off.. and of course once again, I appreciate very much
all the help I got here on this endeavor (btw: my book about CSS layouts
that I mentioned in an earlier post also says the only way to do this is
with img-bg's...)

I've been busy all morning, have not had a chance to check out postings
on this thread since last night, but will absolutely do so, since I'm
sure there are very useful info/code and tips in them, and of course I'm
on a mission to learn div-based layouts as well as I can... wish me
luck.. thanks to all again and have a great weekend...

maya wrote:

well guys, whaddayaknow.. I just got a phone call from them.. have
an interview Tue morning....

he said he knew the only way to do it was with img-bg's..

So I am guessing he hasn't read this thread, which shows you several
ways to do it *without* images...

Best of luck with the interview.

--
-bts
-Friends don't let friends drive Windows

On 2009-06-19, maya <maya778899 (AT) yahoo (DOT) com> wrote:

Ben C wrote:
On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]
here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html

well guys, whaddayaknow.. I just got a phone call from them.. have an
interview Tue morning....

he said he knew the only way to do it was with img-bg's..
[...]

Evidently your future employers don't read c.i.w.a.s. or they'd know
about the 5 or 6 other ways of doing it we've just been discussing

Ben C wrote:

On 2009-06-19, maya <maya778899 (AT) yahoo (DOT) com> wrote:
Ben C wrote:
On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]
here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html
well guys, whaddayaknow.. I just got a phone call from them.. have an
interview Tue morning....

he said he knew the only way to do it was with img-bg's..
[...]

Evidently your future employers don't read c.i.w.a.s. or they'd know
about the 5 or 6 other ways of doing it we've just been discussing

Perhaps they do. I have to check the other 3 or 4 (will check the thread
in a day or two when time allows), but keeping cross-browser in mind,
your last example of .background abs positioned with top/bottom set to
zero works great (thank you for this) with Fx and the like, but does not
with IE6 (+?).

The reliable way is with a tiled background image (should be one of the
5 or 6), IMHO.

--
Gus

On 2009-06-19, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Ben C wrote:
On 2009-06-19, maya <maya778899 (AT) yahoo (DOT) com> wrote:
Ben C wrote:
On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]
here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html
well guys, whaddayaknow.. I just got a phone call from them.. have an
interview Tue morning....

he said he knew the only way to do it was with img-bg's..
[...]

Evidently your future employers don't read c.i.w.a.s. or they'd know
about the 5 or 6 other ways of doing it we've just been discussing


Perhaps they do. I have to check the other 3 or 4 (will check the thread
in a day or two when time allows), but keeping cross-browser in mind,
your last example of .background abs positioned with top/bottom set to
zero works great (thank you for this) with Fx and the like, but does not
with IE6 (+?).

Yes, no doubt you are right a background img is the only one that works
in IE6.

The "dorayme-style" one can be made to work in IE6 fairly easily I
understand, but you have to be able to rank the columns in order of
content height.

On 2009-06-19, Jeff <jeff_thies (AT) att (DOT) net> wrote:

Ben C wrote:
On 2009-06-18, maya <maya778899 (AT) yahoo (DOT) com> wrote:
[...]
here are final versions:
http://www.mayacove.com/dev/devlper_test/test.html

Add this CSS:

#wrapper
{
position: relative;
z-index: 0;
}
.background
{
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
#leftbar_bg { background: #FFFF00; left: 0; width: 250px; }
#content_bg { background: #00CC00; left: 250px; width: 460px; }
#right_bg { background: #CC33CC; right: 0; width: 250px }



It never occurred to me that you could position background colors like
background images. It's obvious now and quick imaginative thinking on
Ben's part.

IIRC that's roughly how the one I keep posting this link to works:

http://www.nrkn.com/3ColEqualPositioned/