CSS flexible layout with images

[tommythewolfboy]

I've been playing around with a few css designs but haven't managed to create a very elegant way of creating the following FLEXIBLE page layout ... anyone have any ideas? I wanted it to be 95% in width.

http://img277.imageshack.us/img277/3498/layout002pt.gif (http://imageshack.us)

The 'slices' in red would be non repeating while those in green would repeat-x or repeat-y

... I just seem to be ending up with a lot of divs with my design ...

Thanks

tom

[senocular]

basically you just gotta throw in some nested elements and set some backgrounds (and no, its not as easy as it was back in the day when we used tables).

I'll attach an example, the h1/p and span elements are used in assigning the background images and help in keeping the html a little cleaner. The only exception is within the body block which has a nested div (bg).

[morse]

Sen, I still can't believe you're using css instead of tables! You were so die-hard gung-ho tables!

[ironikart]

Just a tip. If you want to avoid IE's peek-a-boo bug (nested elements with background images hiding content) then set a width for the problem area. You might get away with this because the width in senocular's example is set to 90% on the box... but if you set a containing div with a width, and not the one with the actual background then you'll hit a spot of bother (just fixed that for a client - thanks microsoft!).

[senocular]

Sen, I still can't believe you're using css instead of tables! You were so die-hard gung-ho tables!

I do miss my tables :*( and they are still easier to use... but you gotta get with the times. Plus Im familiar enough with CSS designs now that I can implement them a little better than before so its not as troublesome (though still more troublesome).

I should also point out that the 1px padding in the body bg element is important as it stops the margin collapsing within the paragraph elements contained within. Without it, the p margins would screw up the box.

[tommythewolfboy]

Thanks all - very much appreciated :)

t

[thirdworldman]

Maybe I need to get with the times, but what advantage(s) would there be of coding this in CSS over tables? I'm curious, because my design background is deep-rooted in html and I haven't found a functional use for css outside of manipulating the appearance of text and form elements.

[tommythewolfboy]

Maybe I need to get with the times, but what advantage(s) would there be of coding this in CSS over tables? I'm curious, because my design background is deep-rooted in html and I haven't found a functional use for css outside of manipulating the appearance of text and form elements.

Well, primarily that css allows you to separate presentation and content, allowing for much easier updates. For example, changing a single css file can result in updates across the whole of your site, without having to go into each individual page and updating tables etc. Take a look at www.csszengarden.com/ to see what can be achieved with css
It's also semantics - while tables can be pretty effective when used for layout purposes, that wasn't what they were intended for.

[senocular]

I think a good way to look at it (and this is one of the primary justifications I use to convince myself) is that in using CSS and avoiding tables for layout, you are able to create web pages that can change in design (separate presentation and content as tommythewolfboy said) to fit the needs of the viewer. Such a change would be for viewing a web page using a desktop monitor vs a PDA. Obviously the PDA will have a smaller, and more likely more vertical screen compared to the larger monitor. Using CSS, that PDA would be able to view a website with a style that better supports its screen and all without having to redesign new tables to fit a PDA's screen.

You can usually see the difference in these kinds of websites if you browse with styles turned off. Those which avoid tables for layout you can still see and read clearly within a very thin browser window. Those that are not, are harder to read and the tables become funky and the site is usually a mess.

csszengarden is also a good example of how you can also completely redesign your web site without even having to change the HTML at all. Intimidated by the May 1 reboot? It may only require swapping out the CSS file and a few images if you have a well designed XHTML site.