I think the problem you have there is that you're breaking the
pictures down in too many different ways on a single page. You might
find it more managable if you allow users to choose the presentation:
For example, you can separate browsing by:
* Photographer
* Major catagory
* Country (maybe, depending on the span of your site)
Then, if you're browsing by photographer you can simplify your output
by just listing the most recent photographs next to each person in the
list. At the moment you have Photographer -> Multiple Albums (which
then indicates there are multiple photographs to view).
After a user has picked out a photographer of their liking, /then/ you
can offer the list of organised albums, comments and so forth on the
author page.
That should hopefully be far more managable for you (not to mention
for someone viewing the site)!
By reducing the overflow of information, you should find that your
code can simpify right down. At the moment you're using a lot of
tables largely for layout. The above "photographer -> recent photos"
listing could work with a simple definition list, styled with CSS.
So,
<dl class="photographers">
<dt>Pete Flint</dt>
<dd class="description">
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dt>Terry Gulliford</dt>
<dd class="description">
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<dd class="photo"><img /></dd>
<!-- ... and so on -->
</dl>
In the above case, each "<img />" would of course be a different
recent photograph by that photographer, but I'm just using it as a
placeholder to avoid cluttering the example.
The following CSS is simple, but might give you some idea of the same
layout you have on your current page.
dl,
dt,
dd
{
display: block;
margin: 0; /* this clears the default margin on <dd> elements */
}
dd.photo {
float: left;
border: 2px solid black;
}
/* then, to ensure that each new photographer appears on a new line,
clear all <dt> elements */
dt
{
clear: both;
}
That's completely untested (sorry!), but should give you some idea of
what I mean (hopefully!).
Cheers,
Ben
On 5/29/05, Jad Madi <[EMAIL PROTECTED]> wrote:
> actually i'm having a problem in my project, I have to have category
> for every person, with his albums
> so the site become so ugly and so huge, and the current content is
> only 20% of what I have
> would you mind to take a look
> http://joite.org/gallery/
>
>
> On 5/29/05, Kornel Lesinski <[EMAIL PROTECTED]> wrote:
> > On Sun, 29 May 2005 15:46:29 +0100, Chris Kennon <[EMAIL PROTECTED]> wrote:
> >
> > > How to Create a Photographic Gallery Using CSS:
> > > http://www.webreference.com/programming/css_gallery/index.html
> >
> > I don't like it. It works only on hover and that's Bad Thing for usability
> > and accessiblity.
> >
> > I can't use keyboard.
> > I can't get link to certain image.
> > I can't copy image or get it's properties.
> > I can't leave page open on certain image (try not getting lost in
> > 100-image gallery).
> > I can't use Opera's slideshow feature.
> >
> > For me even Apache's simple directory listing makes better gallery than
> > that.
> >
> > --
> > regards, Kornel Lesiński
> > ******************************************************
> > The discussion list for http://webstandardsgroup.org/
> >
> > See http://webstandardsgroup.org/mail/guidelines.cfm
> > for some hints on posting to the list & getting help
> > ******************************************************
> >
> >
>
>
> --
> Web standards Planet
> http://www.w3planet.info/
> Personal Blogger
> http://www.EasyHTTP.com/jad/
> EasyHTTP Network
> http://www.EasyHTTP.com
>
--
http://www.ben-ward.co.uk
