New css technique!

[zionlocke]

I moved this post here because it seems more appropriate.
This hasn't been done before as far as I know. I'm attempting to get a list apart to listen and allow me to publish a tutorial there.

So, this is the only place I could think of to publish at. I'm here to show my discovery of how to implement multi layer backgrounds and make a completely fluid design with as many columns as I wish. This is the test page for my sites redesign.

:bu: http://www.zioncreation.com/new/

It works in Safari 2.0, IE6, IE5 for mac, Mozilla 1.5 for mac, and Firefox 1.0.6. Test it out on others for me, but I think this will work with all css 2 browsers.

[ditt0]

I'm sorry, but could you explain the innovation a bit? Maybe it's the late hour, but I see no new css technique there and no "multi-layer backgrounds", cause you don't have multiple layers.
Anyway, if you're trying to do a fluid layout for your site, I suggest you go for ems intead of px for font size.

[rhamej]

Dito, I dont see anything special :huh:

[simplistik]

Uh... ok... I'm definately missing something here...

[zionlocke]

To summarize: I don't think this has ever been properly done in with css before what I just did.

I thought no one could do stuff like this. I've never found a site that could do a fluid layout with multiple columns, backgrounds like these, a proper footer and header, and still have any columns that can each be able to push the footer down.

I thought that the float left attribute sometimes gave people headaches. My solution to the float left issues that are mentioned around the web, was to float all the div tags left except for the one that centers my main content. That is what I originally thought was innovative. I guess no one thinks that it's new here.

Are there any examples that have done a page like the one I'm showing you? I need proof in the pudding. I've searched the web and have read that multiple columns that float with a footer at the bottom is not possible with css.

The multiple background layers are just below the menu. I have four stretching backgrounds there, three vertical and one horizontal that are nested div tags.

[ElectricGrandpa]

Well I haven't done very much CSS recently so I forgot exactly how the more complex stuff works... but this looks neat to me, I'm not sure if I've ever seen anything like it or not. Either way it's a really cool demo of what you can do with CSS and it works very well in firefox. You should make a www.csszengarden.com skin using this technique if you really wanna get it out there.

-Matt

[Ankou]

Interesting approach... It almost reminds me of http://builder.com.com/5100-6371-5268973-2.html (Published more than a year ago at that site).

Here's a link to a list of a few 3 column layouts - some with headers/footer. You can browser through them and see if any are what you did... http://css-discuss.incutio.com/?page=ThreeColumnLayouts (or another example here: http://www.pixy.cz/blogg/clanky/css-3col-layout/)


A 3 column fluid layout with header and footer isn't anything special. The key is getting the background images to work. I've seen it done and work well ... your approach is just different. There seems to be a lot of extra divs just to handle the backgrounds - almost get the feeling there are too many. I didn't look at the CSS very long so I could be mistaken.

There seem to be easier solutions. It's like telling someone to cut the grass with some scissors when they have a riding lawn mower.