Sent by Tim Snadden on 4 July 2009 05:05
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 [EMAIL-REMOVED]]
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/
