div/bg color issue..

maya wrote:

John Hosking wrote:

Or no absolute positioning (that I have detected) as at
http://matthewjamestaylor.com/blog/perfect-3-column.htm


again, thank you.. examples here
http://www.manisheriar.com/holygrail/index.htm are a bit confusing, he
doesn't include all code.. he includes an image representation of the
layout but not all the code... I copied all the css (the css closest to
the bottom of the page) and created the HTML, but I can't get it to
work.. I wish he would include a full example so we can just grab the
code by doing view src code... (how can all the divs be width:100% when
there supposed to be side-by-side??)

Width:100% refers to 100% of its container. The container isn't
necessarily the viewport.

(I take back what I said earlier, he does mention this issue ("Full
length column background colours") here,
http://matthewjamestaylor.com/blog/perfect-3-column.htm, but well, still
would like to see a full working example, with all HTML and CSS code..)

I'm pretty sure http://matthewjamestaylor.com/blog/perfect-3-column.htm
*IS* a full working example. With code. View source to see it.

(Or were you only talking about
<http://www.manisheriar.com/holygrail/index.htm> ? In that case, I
believe <http://www.manisheriar.com/holygrail/index.htm> to be a full
working example. View source to see the code.)


--
John
Did you look at the footer?
Sometimes there's interesting stuff in the footer.

John Hosking wrote:

maya wrote:
John Hosking wrote:

Or no absolute positioning (that I have detected) as at
http://matthewjamestaylor.com/blog/perfect-3-column.htm


again, thank you.. examples here
http://www.manisheriar.com/holygrail/index.htm are a bit confusing,
he doesn't include all code.. he includes an image representation of
the layout but not all the code... I copied all the css (the css
closest to the bottom of the page) and created the HTML, but I can't
get it to work.. I wish he would include a full example so we can
just grab the code by doing view src code... (how can all the divs be
width:100% when there supposed to be side-by-side??)

Width:100% refers to 100% of its container. The container isn't
necessarily the viewport.


(I take back what I said earlier, he does mention this issue ("Full
length column background colours") here,
http://matthewjamestaylor.com/blog/perfect-3-column.htm, but well,
still would like to see a full working example, with all HTML and CSS
code..)

I'm pretty sure http://matthewjamestaylor.com/blog/perfect-3-column.htm
*IS* a full working example. With code. View source to see it.

(Or were you only talking about
http://www.manisheriar.com/holygrail/index.htm> ? In that case, I
believe <http://www.manisheriar.com/holygrail/index.htm> to be a full
working example. View source to see the code.)

this last one is one I mentioned in my last post, that I can't get to
work for me (http://www.mayacove.com/dev/holy-grail.html) even though I
copied all code verbatim (except added text to the divs..)

other one, http://matthewjamestaylor.com/blog/perfect-3-column.htm, I
don't see any divs with background-colors and content of different
lengths here... (the two layouts you see on this page are not "real"
layouts, they are IMAGES...) no mention on where code is for these
layouts.....

thank you..

maya wrote:

John Hosking wrote:
Ben C wrote:
On 2009-06-17, John Hosking wrote:
maya wrote:

how can I do this so bg colors for divs with paragraphs cover
ENTIRE area of div and not just the content in the div? (like div
on the right..)

http://www.mayacove.com/dev/layout.html


I don't understand your question. You've *got* BG colors for each
full div. I don't see the difference between the gray, right sidebar
and any of the other divs (except, of course, the colors).

I think he wants the backgrounds to extend all the way down to the blue
footer.

Ah, that's very different. (And speaking of different, I think OP's a
she.)


In other words, this is another quest for the "Holy Grail"...

I recommend in approximate order of preference:

1. Stop wanting it
2. Just use a table
3. Use absolute positioning along these lines:
http://www.nrkn.com/3ColEqualPositioned/

Or no absolute positioning (that I have detected) as at
http://matthewjamestaylor.com/blog/perfect-3-column.htm



again, thank you.. examples here
http://www.manisheriar.com/holygrail/index.htm are a bit confusing, he
doesn't include all code.. he includes an image representation of the
layout but not all the code... I copied all the css (the css closest to
the bottom of the page) and created the HTML, but I can't get it to
work.. I wish he would include a full example so we can just grab the
code by doing view src code... (how can all the divs be width:100% when
there supposed to be side-by-side??)

(I take back what I said earlier, he does mention this issue ("Full
length column background colours") here,
http://matthewjamestaylor.com/blog/perfect-3-column.htm, but well, still
would like to see a full working example, with all HTML and CSS code..)

also found this..
http://www.manisheriar.com/holygrail/index.htm
however: I copied all HTML and CSS code, but for some reason it's not
working for me as expected: http://www.mayacove.com/dev/holy-grail.html
I did not change a thing in the HTML or CSS code, yet for me the
bg-colors for the divs are not working..

also here, http://www.nrkn.com/3ColEqualPositioned/, that I found after
running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my project..

oh brother.. this would be SO MUCH SIMPLER WITH TABLES, sorry, I still
don't get everyone's irrational fear and loathing of tables....

mainly don't get why this http://www.manisheriar.com/holygrail/index.htm
is not working for me... (http://www.mayacove.com/dev/holy-grail.html)

thank you very much..

ok, I got it.. here, http://www.manisheriar.com/holygrail/index.htm he
"cheats" he uses imgs for bgs for the divs with less content (one
pixel high and same width as div, with repeat:repeat-y..) that's what I
will do.. I don't think there's another way..

thank you very much to all for your suggestions.. the urls pointed out
in this thread are all very interesting and I will study them further in
the near future (I'm fully embarked on learning div-based layouts, am
using a book (Sitepoint, "HTML Utopia - Designing without Tables") it's
very good, covers lots of advanced stuff but also all the basics, thus
it's an excellent reference source too.. I've learned a lot already,
but this particular request stumped me.. (I'm having another little
problem with it, but it's got nothing to do w/layout, I'll post about it
later if I can solve it..)

thanks again..

maya wrote:

other one, http://matthewjamestaylor.com/blog/perfect-3-column.htm, I
don't see any divs with background-colors and content of different
lengths here...

If you view the source of that page, you should find this in the CSS:

/* 3 Column settings */
..threecol {
background:#eee; /* right column background colour */
}
..threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
}
..threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}

Where it says "background" above, you would assign your preferred colors
(and any colored or not-so-colorful background images you need). The
lines to the right, between the /* and */ delimiters, are comments.
Note the comments referring to the background colour of the three columns.

(the two layouts you see on this page are not "real"
layouts, they are IMAGES...)

I see only one layout on this page. There are indeed two diagrams there,
both providing different illustrations of the layout exemplified by the
page (and which is simultaneously the subject of the page.

The images are further explanations of the textual description that you
see when you *read* the page at
<http://matthewjamestaylor.com/blog/perfect-3-column.htm>. All of that
is in support of the code which makes the page itself.

no mention on where code is for these layouts.....

VIEW SOURCE in IE
VIEW PAGE SOURCE in FF


--
John
How can I be more clear?

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

Ben C wrote:
[...]
3. Use absolute positioning along these lines:
http://www.nrkn.com/3ColEqualPositioned/

exactly right, you got it.. for each div of three divs across, I need
the bg color to fill ENTIRE area, not just the text....

this is for a very specific request, they don't want tables, and they
want for each of the three divs that the bg color extend to the whole
area of the div.. oh brother..
(how will abs positioning fix the div bg-color issue??)

See the URL I posted. The basic idea is that an absolutely positioned
div is about the only thing that can match its height to the "used" auto
height of a container. ("used" just means the height you got in the end,
after it took account of its contents).

So instead of a real background, you stretch out an absolutely
positioned div behind the container using top: 0; left: 0; bottom: 0;
right: 0 and z-index to put it behind in the stacking order. Then you
put the background on that positioned div.

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

John Hosking wrote:
Ben C wrote:
[...]
I recommend in approximate order of preference:

1. Stop wanting it
2. Just use a table
3. Use absolute positioning along these lines:
http://www.nrkn.com/3ColEqualPositioned/
[...]
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found after
running google search Jeff suggested,

That's also the one I first suggested.

but he uses browser-conditionals.. not sure I can use that in my project..

oh brother.. this would be SO MUCH SIMPLER WITH TABLES, sorry, I still
don't get everyone's irrational fear and loathing of tables....

You're right that tables are the best way to do this. These other
solutions are basically complicated workarounds for IE since it doesn't
even attempt CSS tables (or didn't until recently).

mainly don't get why this http://www.manisheriar.com/holygrail/index.htm
is not working for me... (http://www.mayacove.com/dev/holy-grail.html)

thank you very much..

The problem is just that the images aren't there. You need an
.../images/leftcolor_bg.gif and an ../images/rightcolor_bg.gif that are
1px high stripes of the same colours you have on #leftcol and #rightcol.

Copy the ones from the original site, although you may need to change
them unless you want to stick with the Parma violet colour scheme.

"maya" <maya778899 (AT) yahoo (DOT) com> wrote

also here, http://www.nrkn.com/3ColEqualPositioned/, that I found after
running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my project..

You can't do it unless you use browser-conditionals, JavaScript or tables

Nik Coughlin wrote:

"maya" <maya778899 (AT) yahoo (DOT) com> wrote in message
news:Cq6dnUbIWJEJ4qTXnZ2dnUVZ_tydnZ2d (AT) giganews (DOT) com...
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found
after running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my
project..

You can't do it unless you use browser-conditionals, JavaScript or tables

Dorayme has some tricks if you know one column is going to be the
longest, that are very easy. Usually the main oolumn is and you can set
min-height for short content pages.

I almost always use js as all I have to do is name the equal height
columns with equal in a classname. But I don't care if there is a short
column in a js off browser.

I don't see the issue with conditionals though as it usually only
affects IE and is considered kosher by IE. There's lots of things, like
flash embeds, or ajax calls, where the IE method is different. They
aren't hacks, it's just IEs way of being different.

I'm done with tables, except for forms and data. Much happier!

Jeff

Jeff wrote:

Nik Coughlin wrote:
"maya" <maya778899 (AT) yahoo (DOT) com> wrote in message
news:Cq6dnUbIWJEJ4qTXnZ2dnUVZ_tydnZ2d (AT) giganews (DOT) com...
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found
after running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my
project..

You can't do it unless you use browser-conditionals, JavaScript or tables

Dorayme has some tricks if you know one column is going to be the
longest, that are very easy. Usually the main oolumn is and you can set
min-height for short content pages.

I almost always use js as all I have to do is name the equal height
columns with equal in a classname. But I don't care if there is a short
column in a js off browser.

I don't see the issue with conditionals though as it usually only
affects IE and is considered kosher by IE. There's lots of things, like
flash embeds, or ajax calls, where the IE method is different. They
aren't hacks, it's just IEs way of being different.

I'm done with tables, except for forms and data. Much happier!

Jeff

actually with img-bg's it also doesn't work for me..
http://www.mayacove.com/dev/layout.html
(did the same way as here, http://www.manisheriar.com/holygrail/index.htm

CONFESSION: this was actually for a test for a job....
(oh....... you must be thinking, NOW I know why requirement is so
unreasonable...

here is "assignment" and "mockup" they sent:
http://www.mayacove.com/dev/assignment.html
in case you're curious.. I think they just wanted XHTML and CSS code,
that's it, no imgs, no JavaScript.. (however, as you will note if you
check out the assignment, there is also a requirement to chg bg-color
for the links on mouseover (but: for the divs CONTAINING the links, not
merely the links.. this would have to be done w/JavaScript, since IE 6
doesn't support :hover for divs.. (and: <a>'s aren't block elements, you
can't set width and height for them, I tried with padding and
line-height and stuff for the <a>'s, but that's not too reliable
cross-browser-wise... oh brother..)

I agree with respondents here who say you can't do w/o tables and/or
JS.. I'm all for div-based layouts, I think they're more elegant, all
that jazz.. but I don't get trying to fit a square into a circle...

so: pondering what/how I should respond to these folks.... obviously
they demanded the impossible here, as a way to gauge reactions,
approaches, etc.. I suppose.. in this job market I suppose employers
can afford to be unreasonable and mess with folks' minds....

any comments???? thank you again to everyone for your responses..

On 06/18/09 12:31, maya wrote:

Jeff wrote:
Nik Coughlin wrote:
"maya" <maya778899 (AT) yahoo (DOT) com> wrote in message
news:Cq6dnUbIWJEJ4qTXnZ2dnUVZ_tydnZ2d (AT) giganews (DOT) com...
also here, http://www.nrkn.com/3ColEqualPositioned/, that I found
after running google search Jeff suggested,
but he uses browser-conditionals.. not sure I can use that in my
project..

You can't do it unless you use browser-conditionals, JavaScript or tables

Dorayme has some tricks if you know one column is going to be the
longest, that are very easy. Usually the main oolumn is and you can set
min-height for short content pages.

I almost always use js as all I have to do is name the equal height
columns with equal in a classname. But I don't care if there is a short
column in a js off browser.

I don't see the issue with conditionals though as it usually only
affects IE and is considered kosher by IE. There's lots of things, like
flash embeds, or ajax calls, where the IE method is different. They
aren't hacks, it's just IEs way of being different.

I'm done with tables, except for forms and data. Much happier!

Jeff


actually with img-bg's it also doesn't work for me..
http://www.mayacove.com/dev/layout.html
(did the same way as here, http://www.manisheriar.com/holygrail/index.htm

CONFESSION: this was actually for a test for a job....
(oh....... you must be thinking, NOW I know why requirement is so
unreasonable...

here is "assignment" and "mockup" they sent:
http://www.mayacove.com/dev/assignment.html
in case you're curious.. I think they just wanted XHTML and CSS code,
that's it, no imgs, no JavaScript.. (however, as you will note if you
check out the assignment, there is also a requirement to chg bg-color
for the links on mouseover (but: for the divs CONTAINING the links, not
merely the links.. this would have to be done w/JavaScript, since IE 6
doesn't support :hover for divs.. (and: <a>'s aren't block elements, you
can't set width and height for them, I tried with padding and
line-height and stuff for the <a>'s, but that's not too reliable
cross-browser-wise... oh brother..)

I agree with respondents here who say you can't do w/o tables and/or
JS.. I'm all for div-based layouts, I think they're more elegant, all
that jazz.. but I don't get trying to fit a square into a circle...

so: pondering what/how I should respond to these folks.... obviously
they demanded the impossible here, as a way to gauge reactions,
approaches, etc.. I suppose.. in this job market I suppose employers
can afford to be unreasonable and mess with folks' minds....

any comments???? thank you again to everyone for your responses..

If what they're asking for doesn't seem reasonable, are you sure that's
not the answer they're looking for?