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.

4 Comments

  • 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.

  • I just went there and donated $25 – you guys deserve it!
    Quite nice store too, I’m looking forward to receiving my stuff. Congrats on the launch!

  • 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.

  • At first I didn’t notice the links to donate because they looked like Google Adsense ads. I noticed the pretty girls though, so good work in that regard.

Comments are closed.