Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Photography Website?



1:52 pm on Sep 26, 2005 (gmt 0)

10+ Year Member

I have to build a website for a photographer, including several galleries linking thumbnails to larger images, plus links from images to PayPal.

I'd like to build the site in CSS but, being new to it (i.e. never having built a CSS site before), I'm not sure if there are any tips or tricks I should be aware of in building an image-heavy site.

Any thoughts you have will be much appreciated.


2:33 pm on Sep 26, 2005 (gmt 0)

10+ Year Member

I've done a few photography sites... the only thing that comes to mind as a particular benefit or difference in using CSS-P for the site is that you have a lot of nice choices in the way you can create a photo gallery, unlike the old school option of just creating a table and plopping photos in each cell. Many people use unordered lists(HTML layout, CSS style) or simply float and clear the images(CSS layout, CSS style)... you should find what works best for you. You will most likely use Javascript to make any kind of complex effect, but if you really wanted to be cool, you could actually build a very interactive gallery using CSS only. Depends on how comfortable you feel after creating the gallery layout.

There are great tutorials on CSS/Javascript photo galleries... i've seen a few on ALA, mezzoblue, etc. Have a surf and see what you find.

Edit- Sorry, one other "trick": photographers often bug you about making their photos look as good as possible (read: large file size), so if they have any images that can be repeated from page to page (i.e. header, background image, etc), you can place these images in the CSS, and they will be cached on the first page's download... users will not have to download new images on every page.

#header {
background-image: url(example.jpg);


2:44 pm on Sep 26, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I'm a hugely avid supporter of standards based web design, and will fight tooth and nail with anyone who questions the benefits of using CSS-P over tables-based design.

However, it's important to bear in mind that tables do have their uses. One of the central ideas behind CSS-P is using elements for the purposes to which they were intended. Tables are intended to display tabular data, that is, data which is better understood when presented in columns and rows.

So the question is: does an image gallery count as tabular data, or is it more like a list? That answer probably depends on the application, as I can think of gallery set-ups that would match either description.

Point being, consider the possibility that using a table to display the image thumbnails may actually be the semantically correct approach, and if so, there's nothing wrong with placing a table in the layout to hold those images.

If, however, you think that a list format is more fitting, my adivce is to make ample but correct use of the float property. This will be far easier if you can standardize the size of the thumbnails, even if this means nesting each thumbnail in a standard-sized box, which is then floated. FLoats used in this way will work beautifully UNLESS the floated elements are different sizes, in which case so many funky things will happen you'll curse the day stylesheets were invented.



4:33 pm on Sep 26, 2005 (gmt 0)

10+ Year Member

Don, cEM, good points both of you. Thanks.

One other thought. The photographer, I know, will want to add new images to his galleries -- I don't know how frequently, but probably several times a year. Is this simple enough with CSS?

Also, should the photos be in some external file, such as XML?


6:40 pm on Sep 26, 2005 (gmt 0)

10+ Year Member

I agree with cEM that there is definitely a "tables suck!" mentality among some of us CSS-ers, which leads to people building totally unnecessary layouts where tables would work fine/better.

However I am happy that you just posted this reply Pab, as the issue you pointed out is what led to my rationale behind NOT using tables for image galleries for photographers' websites (Though again, I agree with cEM that depending on content and purpose of any other site, tables could often work wonderfully).

As I said, I've done some photographers' sites... and during the design process, ALL of them admitted that they wanted to constantly update with more photos, but had no specific idea of how many more photos they be adding to the galleries in 6, 12, 18, and 24 months. Hearing this, I decided that creating a monster-sized table and leaving empty cells for later was a fairly moronic approach (perhaps there is a better client-friendly way to do it with tables, but my idea is to always to build a site that the client can update on their own... trying to tell people how to manipulate td's and tr's over the phone is quite fruitless).

By using float properties correctly, or creating a solid list style, you or your HTML-illiterate client can add photos til the cows come home, tacking on only a few html tags every time, rather than a completely new table row, or worse yet, having to rehash the whole table. Doing things with CSS-P solved any potential 3am calls I may have gotten in 2 years when the site owner needs to add 20 photos to a page.


1:29 pm on Oct 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Missed this topic, but seeing as it's something I'm doing at the moment I thought I'd comment.

First, 'tables are for tabular data' is a good phrase, but not very useful unless you define 'tabular data'. Generally I take 'tabular data' to be 'data that fits into the intersect of two headings', not 'data that's traditionally laid out in a grid format'. For that purpose CSS supplies display:table and other associated table displays. Shame that it's not supported in IE but as ever we have to work around this.

Secondly, the float/clear method has some obvious benefits over tables. In my example I have a sidebar floated to the right of my main column. When my images come to the end of this I want each line length to expand out to fill up the whitespace automatically. This would be impossible with traditional table based layouts.


1:57 pm on Oct 7, 2005 (gmt 0)

10+ Year Member

For best results use server side code with image upload. As long as the code is Accessible its fine to use tables for layout. The users will not know the deference and I bet they also use their dinning table as a desk or work bench given the chance of convenience? CSS is more complex than tables and the Internet is not about standards but the ability for average Joe to build a website without having to know about complex DIV's and CSS. For advanced users by all means use DIV's where you can but its no big deal in reality.

Featured Threads

Hot Threads This Week

Hot Threads This Month