lucy24 - 8:17 am on May 1, 2012 (gmt 0)

I've got a cluster of gallery-type pages that have always used :: cough-cough :: tables for layout. They've been around forever; I found one that was dated 2003. (Don't ask where I picked up the <address> habit. I have no idea. Maybe the long-gone UIUC tutorial was hipped on it.) Some are newer. I've got fifteen of 'em now, and I know I started out with seven because I just got through redirecting the former names. There's been some spit-and-polish; a few years back I expanded from four to five cells wide. Don't we all assume everyone's browser is just like ours? But no change to basic design.

Was thinking vaguely that maybe I should spiff up the inner pages, bit of javascript, make it more like a slideshow ... Naah. All those individual static pages work really nicely in searches. I'll deal with them some other day. Instead...

Goodbye to
table.piclink {margin-top: 1em; margin-bottom: 1em;}
table.piclink td {padding: .5em; vertical-align: middle;}
table.piclink tr.caption td {padding-top: 0; vertical-align: top;
font-size: 90%;}
table.piclink td.header, table.piclink tr.header td {font-weight: bold;
padding-top: 1em;}
table.piclink td.header {padding-right: 50%;}

Welcome to
div.holder {margin: 1em 0; text-align: center;}
div.unit {display: inline-block; margin: 0;}
div.onelink {display: inline-block; vertical-align: bottom;
margin: .5em .5em 0; max-width: 130px;}
div.holder h3 {margin-bottom: 0;}
h3 + div.onelink {margin-top: 0;}
div.onelink p {text-align: center; font-size: 90%;}
p.caption {min-height: 2.5em;}

So...

<table class = "piclink"> ... </table>
becomes
<div class = "holder"> ... </div>

and then

<tr>\n<td>((?:.+\n){1,2}.+)?</td>\n<td>((?:.+\n){1,2}.+)?</td>\n(<td>(?:(?:.+\n){1,2}.+)?</td>\n<td>(?:(?:.+\n){1,2}.+)?</td>\n<td>(?:(?:.+\n){1,2}.+)?</td>\n</tr>\n<tr class = "caption">\n)<td>((?:.+<br>\n?)*.+)?</td>\n<td>((?:.+<br>\n?)*.+)?</td>\n(<td>(?:(?:.+<br>\n?)*.+)?</td>\n<td>(?:(?:.+<br>\n?)*.+)?</td>\n<td>(?:(?:.+<br>\n?)*.+)?</td>\n</tr>\n)
becomes
<div class = "onelink">\n<p>\1</p>\n<p class = "caption">\n\4</p>\n</div>\n\n<div class = "onelink">\n<p>\2</p>\n<p class = "caption">\n\5</p>\n</div>\n\n<tr>\n\3\6

and

<tr>\n<td>((?:.+\n){1,2}.+)?</td>\n<td>((?:.+\n){1,2}.+)?</td>\n<td>((?:.+\n){1,2}.+)?</td>\n</tr>\n<tr class = "caption">\n<td>((?:.+<br>\n?)*.+)?</td>\n<td>((?:.+<br>\n?)*.+)?</td>\n<td>((?:.+<br>\n?)*.+)?</td>\n</tr>\n
becomes
<div class = "onelink">\n<p>\1</p>\n<p class = "caption">\n\4</p>\n</div>\n\n<div class = "onelink">\n<p>\2</p>\n<p class = "caption">\n\5</p>\n</div>\n\n<div class = "onelink">\n<p>\3</p>\n<p class = "caption">\n\6</p>\n</div>\n\n

(It had to be done in two steps because Regular Expressions can only capture nine things at a time, and five-celled rows meant I had groups of ten.)

Delete any empty
<div class = "onelink">\n<p></p>\n<p class = "caption">\n</p>\n</div>
resulting from empty table cells.

And some final business with <div class = "unit"> for a few sets of two or three thumbnails that I want to keep together.

Final effect: Nifty. And it flows nicely as I change my window width.