Sent by Big John on 7 July 2004 04:04
Richard Grevers wrote:
> I'm about to start work on an ecomm project where the client's major
> concern (based on their past usability testing) is that products should be
> displayed without any scrollbars on the page whereever possible.
> In the 90% of cases where we can detect client window dimensions, we will
> determine how many products to place on a page server-side.
> -snip-
> The product divs A - F will be a fixed size. They must be centered and
> evenly spaced in the available space (vertically as well as horizontally),
> with the space between them shrinking as the window size decreases.
> This would be relatively easy to achieve with nested tables, but that is
> something I'd rather avoid.
> I can't seen any css solutions using floats... ideas anyone?
This looks like a job for Absolute Positioning!
First, assume the images are just one pixel, and assign
left values in % so that those images appear at the dead
center point of the actual images. Then for the real images,
assign negative left margins that are exactly on-half the
coresponding image dimension. The top values can be
treated the same way, using top margin.
This puts each image's center point over that one-pixel
position you started with. Since the positions are
percentages of the width and height of the body, a
smaller body element draws the images closer together.
Make sure that the spacing is great enough to accomodate
small screen sizes, or image overlapping will result.
Also you will probably have to assign 100% height to the
body and/or html. Just experiment until it works.
HTH
Big John
=====
--
Perennial student + Impractical joker + CSS junkie = Big John
<http://www.positioniseverything.net>
__________________________________
Do you Yahoo!?
Read only the mail you want - Yahoo! Mail SpamGuard.
http://promotions.yahoo.com/new_mail
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
