Jason Robb wrote:
Hello friends,
I'm marking up a group of (maybe 25-50) anchored images.
They need to be held tight to a grid, and I want about 6 or 8 to a row.
Here is the (lazy) table based solution:
http://bws.jasonrobb.com/collections/
I've considered a few different approaches.
I want to know: What is the most semantic way to go about this?
[Note: trimmed down code]
1) Using DIV's to hold the anchored images:
<div>
<a href=""><img /></a>
<a href=""><img /></a>
</div>
2) Another method with a UL:
<ul>
<li><a href=""><img /><a/></li>
<li><a href=""><img /><a/></li>
</ul>
3) My least favorite (and likely wrong) choice - with a table:
<table>
<tr>
<td><a href=""><img /></a></td>
<td><a href=""><img /></a></td>
</tr>
</table>
It's been pickin' my brain for days.
The main reason I even considered a table is because the anchors leave
an empty space between the images.
I've set up a test page here:
http://bws.jasonrobb.com/content/image-test.html
What do you think is causing that extra space? How can I avoid/remove it?
What browser(s) do you get the space in? At a glance it looks fine to me
in FF. And I would stick with the div for display, while lists are fun
it looks odd with CSS off (my opinion of course, i hate loooooooong
pages), my preference is to keep imgs and anchors inline and then use
vertical-align: middle; so they stretch across their container and stack
fairly well in any situation. If you need captions and the like you'll
need to use floats and if you need a solution for any situation e.g. if
you don't know the aspect ratio/size of the images etc... etc...
unfortunately a table is the only thing that really keeps a tight layout
together. I figure a table of images isn't too big a travesty because it
will read out sensibly but it's certainly not ideal.
I guess what I'm saying is it depends on the particular job you're
doing, work out what is constant about the images you display and what
might change then use whichever method is most appropriate. Hope thats
some use to you.
Rob
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
