On 4/07/2009, at 1:32 PM, Chris Akins wrote: > Can you clarify the above? In my mind, old school is table-based > design with sliced images. CSS-based layouts with background images > for non-content visuals is the new way, right? Is there a newer way > yet that's now the current standard? Many standards-based sites that I > visit use a variety of images, "slices" if you wish, as background > images on various elements. CSS Zen Garden comes to mind as one such > site. I'm definitely open to knowing more about a better approach than > images attached as backgrounds if design is heading another direction. > Do you have example sites of the newer methods?
Sure - I'm certainly not meaning to have a go and I'm sorry if it came across that way. You are right that true 'old skool' would be nested tables, spacer gifs etc. I guess the reason it struck me as reminiscent of this is the way that background images are being used. Each background image is a flat slice of all layers of the design. I would try to isolate each component and ascertain whether it could be achieved firstly with background colour and borders rather than an image and secondly make the background image connect to that particular element. e.g. The 'C' in City of Springfield is part of #homeBtn and the rest is part of the image inside the h1. This is a single heading so even if it's going to be done as an image or a background image it should be part of one element. It looks like the reason it was cut off like that is because of the curve of the circle but it would be possible to have it as a separate background image and either use negative margins or positioning combined with image transparency for the circle to keep these as individual elements. The bar at the bottom of the header is just white so could be a background colour with borders rather than part of a background image. Again, negative margins or relative positioning could push the circle outside of its box. If you look at the rounded corners at the bottom of the page or the bottom left corner of the #homeBtn you can see where slices aren't lining up exactly with backgrounds. This is one of the problems with flattening and slicing a design rather than layering it up using alpha transparent pngs or gifs. Again, I don't mean to have a go and I only brought these things up in an attempt to clarify as requested. All the best with it. Tim ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
