21 September 2006

CSS liquid captioned image list

Despite being an aged programmer (I used punched cards while at school!), I find it difficult to get to grips with XHTML page layout using CSS. I find it very hard to get the effect that I want to achieve. It was generally a lot easier when using tables. Perhaps we need a new tag or attribute that works like a table but is ignored by accessibility browsers.

Anyway, I like (a) liquid flows and (b) specifying fonts without using fixed point sizes.

My latest task was to show a lot images. I wanted them to fill all the available screen space, so a liquid layout was called for. If I simply used a series of IMG tags then this would work immediately. However I also wanted to show a caption underneath (and make the image a link).

My own attempts to make this work failed. I nearly resorted to using a non-liquid table layout. Eventually a search found Mark Newhouse's guide (which is one of those annoying sites which come up with a smaller font than normal). The basic idea is to have each photo/caption block in a DIV that floats to the left. If you add lots of these then each DIV goes to the right of the previous one if there is room, and onto the next line if not. You need to round it off with a DIV style clear:both. Thanks Mark.

My eventual solution can be seen here. Even this solution has its problems, stemming from the fact that the caption text is of variable length. If I set a fixed style height then FF and O would truncate the text, even with overflow:visible set. So I guessed a suitable min-height. The problem remains that picture/caption blocks have different heights. So when a block floats down, it may display at the block that sticks down the most - which is not necessarily at the start of the line. You can see this after a row or three using the above link.

There are also printing problems. IE only shows one page of floating DIVs before giving up. FF does display all the DIVs but those at the bottom of the page are often not shown in their entirety.

Any better suggestions appreciated.

No comments: