Topic: css layout needed

can anyone help me with the structure for this layout by using a css approach (no tables):



the height of layers 2 and 3 are variable depending on the content.

the point where i am stuck is to put the bottom layer always below layer 2 AND 3.

thanks!

edit: im talking cross browsers here. of course i had a version working in foxy!



(Edited by GRUMBLE on 11-17-2004 19:17)

You must nest the DIVs 2 and 3 in another DIV

This works in ie5.2m, moz, op7, saf1.2 on the Mac. It should work just fine in ie6w as well, I don't think I have used anything it has quirks with. Can't test it on PC for the moment though.

The sample uses IDs for styling so as to allow you to change the elements.

http://liorean.net/samplelayout.html

--
var Liorean = {
prototype: JavaScriptGuru.prototype,
abode: "http://liorean.web-graphics.com/",
profile: "http://codingforums.com/member.php?u=5798"};

liorean: is it normal if there's neither HEAD nor BODY tags in your page

There are HTML, HEAD and BODY elements in it. Why should I need to write them out if the DTD does that for me?

(On a more serious note, I develop test pages like that out of lazyness. As long as it doesn't affect the rendering, and is still conformant and in this case also valid, I don't see why I should write them explicitly in the source.)




At a deeper level, I do it like this because it makes a clear point about the sense in XHTML not allowing optional tags. Everybody that knows me know that my pages are with few exceptions valid and semantically correct. They know it would have been no harder for me to write that in all lower case, valid XHTML without any well formedness problems, and thus the reason I didn't was just to make that very point.

--
var Liorean = {
prototype: CSSGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

(Edited by liorean on 11-18-2004 00:27)

ok, thanks so far.

but there is one thing i forgot to mention. sorry!

all layers should be inside another layer, so they share the same background color.

liorean, this is the case in your example, but it doesnt work with the background color.

thanks!

liorean, knowing you from web-graphics, I've been surprised to see that kind of markup.

GRUMBLE: I'm not sure to understand your request but I suspect that you want to have a background color on the whole width of each DIV. To do, you should use a background repeated vertically in the parent DIV. This method is illustrated in the article ALA: Faux Columns by Dan Cederholm.

hmm, they use a one pixel high background image all the way down...
i dunno if i like that idea.

isnt there a "cleaner" way?

thanks anyway, poi!

I've read that using a 1px image is not advisable as the amount of repetition of the image is really high. It's recomended to use a bigger image, like 64px or 128px or even bigger.

You're welcome

Poi: It's SGML and not XML... I just follow the rules for the platform. Had user agents supported it, the code would have looked far worse from the XML perspective.

SGML has the nice design that allows BOTH leaving out end-of-object markers and instead of specific end-of-object markers you can use generic end-of-object markers, leading to a lot of possible confusions. The additions of different content types (RCDATA, CDATA, PCDATA), that the CDATA content type is not consistent between attributes and elements, that CDATA blocks differ from CDATA content in handling, that you can shortcut tag nesting, and many other super-configurable properties of SGML have made the HTML language a veritable mess. Of course, SGML was never intended to be used as a generic language the same way XML was. SGML was intended to be used on a per-specific-SGMl-implementation basis.

--
var Liorean = {
prototype: HTMLGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

Grumble: Can you explain a bit more exactly how it does work now, and how you would like to have it working? I'm not really sure I understand how you mean by "share the same background colour". What elements (or areas of the layout) should have what background colour? I just made the colours take the places they had in your example.

--
var Liorean = {
prototype: JavaScriptGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

well it was about what poi means. and the trick he posted works of course. i just dont really like the type of solution. its a dirty trick if you ask me and not very stylish for a style sheet.

liorean: I'm not as familiar as you with the specs of the various markup languages. I find you latest page even weirder But you're certainly right.

GRUMBLE: yep, that trick is not really clean, but actually it makes sense since the height of the children DIV is unpredictable.