SuzyUK - 1:19 pm on Feb 28, 2008 (gmt 0)

>>I thought "slicing and dicing" was now virtually defunct.

imho it is, well the dicing part anyway. The slices do not go in grid cells, they do not go into anything coded simply for the purpose of holding an image - i.e. you do not make the grid of <whatever> elements simply fit together just for the sake of the design and like a jigsaw, which is a great description btw!

the question AD has been asking, and not just in this thread, is what a lot of folks struggle with - How you get from that kind of thinking (photoshop to jigsaw) to the CSS design suggestion kind of thinking?

slices, not dices, are still useful in letting existing elements contain the illusion of a complete complex graphic, the background image slices are attached to existing elements in order to suggest the complete picture

e.g. take the zengarden (again) look at all or a selection of the designs - could they have been done with a table, yes they could but the tables would likely all have to be marked up differently as they would have had to have been built to fit the design - they could not all been done with THE SAME TABLE marked up code. Whereas they are all done with the same logically structured HTML markup. "jigsaw" designs are reliant on the markup, 'suggested' designs aren't.

I think what some find hard with CSS design, is the fitting the image slices into existing elements, (which is truly what's meant by separation of content and design), they can't see where the elements are yet, and don't know how to slice the main graphic so the do they old-fashioned way and slice the image first the try to markup, using divs, to fit. Elements which make up your "design grid" needn't be table cells, in fact they needn't always be divs either. You don't need to force the grid that might hold your complete graphic even though you can see it your head, let it build itself.

To let it build itself, you markup the content using logical divs nav header sidebar footer etc.. add some background colors to these "main" divs and then add main elements like h1, h2, <p> etc - float/position the main divs where you would like to appear, but don't try and force them to height or anything - then superimpose your photoshop design over the top of your naturally built grid and "see" which elements are best suited to hold the main slices that would allow your "complete picture" to appear. a lot of the rest of it (the varying content heights/widths bits) can likely be done with background repeating images or nested span "hooks"

sorry if that sounds silly, but it's really hard to describe a visualisation method in words :)