meanwhile back in the 20th century.

[lucy24]

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.

---

Just thought I'd share :)

[alt131]

Great search/replace example - plus how much more simple things are when style is separated from structure. I like the use of "advanced" selectors too. Wahoo!

Would it be possible to further reduce the mark-up by using a list? Something like this (very quick, could be further refined)

HTML
<ul>
<li><a href="#"><img src="myimage.jpg" width="?" height="?" alt="?"></a><a href="#">Caption</a></li>
<li><a href="#"><img src="myimage.jpg" width="?" height="?" alt="?"></a><a href="#">Caption</a></li>
<li><a href="#"><img src="myimage.jpg" width="?" height="?" alt="?"></a><a href="#">Caption</a></li>
</ul>

Or even more reduced
<ul>
<li><a href="#"><img src="myimage.jpg" width="?" height="?" alt="?">Caption</a></li>
<li><a href="#"><img src="myimage.jpg" width="?" height="?" alt="?">Caption</a></li>
<li>example unlinked text<a href="#"><img src="myimage.jpg" width="?" height="?" alt="?">Caption</a></li>
</ul>

css
ul {list-style-type:none; clear:left}
li {text-align:center; float:left;}
a {display:block; margin:1em;}
ul + ul img {display:block;margin:1em;}

[lucy24]

Hm, hadn't thought of lists as an inline-block item. (Can you tell I don't deal in dropdown menus? ;)) Gotta remember that.

Some of the jiggery-pokery in styling is necessary because the captions can be either one or two lines, while the images can be either horizontal (126x95) or vertical (95x126). Hence the min-height on the captions. You can see where it was all easy with tables. Everything in its own little box. I had to give up the vertical centering of images-- but in exchange I got response to window width. It's fun just to fiddle with the window and watch things rearrange themselves :) And it becomes vastly easier to rearrange things. "Let me put this picture-plus-caption package over here between these two picture-plus-caption packages. No, doesn't quite work, let's try over here instead."

And yes, I can well remember the light that went on a few years back when I realized I didn't have to say <p class = "hanging"> 87 times in a row; I could put it in the CSS as "div.hanging p". Whew.

I've since learned that a few, a very few, RegEx dialects can capture up to 99 terms. Ooh, I'm envious.

:: now back to sulking because "display: run-in" has apparently been dumped for good, although it made headings so easy... ::