New store CSS updates

Today I launched a new store and donation page for Creative Commons and while we’re always looking to bolster our public support of the non-profit (and the t-shirts are really cool), I mention it here to show what’s possible with CSS.

When I did a mockup of the store page, I did it in photoshop and aimed for a clean, catalog look that brought the photos of the products to the forefront. Once everyone liked it, I had a slight pang of worry that I might have to resort to using a table to align the photos and text.

I’ve been working on some fairly advanced CSS layouts the past couple years, and in the past year I’ve gotten to the point where I can reproduce almost anything in CSS, thanks mostly to a variety of float techniques that Doug Bowman explains here.

I started laying out the page like any other, using a variety of CSS columns floated to align text and images. I figured I’d hit a sticking point eventually and if necessary, resort to some ugly table hack to finish the job. I surprised myself in the end by never reaching that sticking point, and the end result is a nearly pixel-perfect identical layout, and it’s all CSS (I know there are one or two minor html nits keeping it from validation).

I always knew CSS was powerful, flexible, and useful, but in the back of my mind I felt there a few browser limitations that could keep it from letting me do 100% of layouts using it. After this project I think it’s safe to say at this point that using tables for layout is absolutely and completely a thing of the past.

Published by mathowie

I build internet stuff.

4 replies on “New store CSS updates”

  1. Great Designs and ideas, but why use CafePress? I know it’s print-on-demand for t-shirts, but financially, it’s downright stupid. You can get the shirts you have printed for under $10. I bet you could hire three teenagers to work part time and handle all the shipping.
    I’d like to support CC with money, but it’s not going to be via a whore like Cafepress.


  2. Unless you have powerful spam-filtering software, I recommend removing the email address from the URL string for the PayPal donation link. Spambots are guaranteed to scrape it in short order. I wrote about this back in 2002, but am not sure if the process is still the same for finding your PayPal business ID.


Comments are closed.

%d bloggers like this: