alt131 - 12:08 pm on May 4, 2012 (gmt 0)

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;}