[thelist] [CSS] Creating table free CSS image blocks

[Dan Eastwell]

Dan Eastwell wrote:

> I think I'd agree with that, the caption does define what the image 
> is. How would you style that as a block?
>
> In the end, though, I went with a series of divs that are floated 
> left, as mentioned here 
> (http://css.maxdesign.com.au/floatutorial/tutorial0401.htm), in no way 
> semantic and I don't really like having done it!
>
> I'm very much an advocate of WAI and table-less layout, but I do 
> wonder, though, what the crime would be in rendering the same thing in 
> a table?
>
> I've found myself seriously doubting the time spent hacking round the 
> browsers to try and get something to lay out as essentially a set of 
> rows and columns. Seeing as a lot of graphic design for print is done 
> on the grid, isn't it time that CSS recommendations reflect that?
>
> Currently it seems that W3C recommendations reflect the paradigm of MS 
> Word in terms of layout and are equally as unpredictable! : ;-)
>
> Seriously, do people think that CSS (though a radical improvement 
> over, say, V4 browsers) allows them to do what they want to do, or 
> find that more often they are having to work against it?
>
> Dan.
>
>
> Sarah Sweeney wrote:
>
>>> I've got some generated content that I'd like to style as a block of 
>>> image thumbs (three in a row), with their respective captions above 
>>> them.
>>>
>>> I've decided that using a list of thumbs and captions  (which in 
>>> themselves are a list of items) would be using the correct semantic 
>>> XHTML to write this up. The php used to generate the lists breaks 
>>> them at the maximum number of thumbs per row, which currently is 3.
>>
>>
>>
>> Another (perhaps more semantically correct, but that's open to 
>> debate) way to mark this up is using a definition list, like this:
>>
>> <dl class="image">
>>   <dt>Title 1</dt>
>>   <dd><a href="/profiles/index.php?profile_id=1" title="Title 1"><img 
>> src="/photos/thumbs/image1.jpg" alt="Title 1" /></a></dd>
>>
>>   <dt>Title 2</dt>
>>   <dd><a href="/profiles/index.php?profile_id=2" title="Title 2"><img 
>> src="/photos/thumbs/image2.jpg" alt="Title 2" /></a></dd>
>>
>>   <dt>Title 3</dt>
>>   <dd><a href="/profiles/index.php?profile_id=3" title="Title 3"><img 
>> src="/photos/thumbs/image3.jpg" alt="Title 3" /></a></dd>
>> </dl>
>>
>
>


-- 
Daniel Eastwell

http://www.thoughtballoon.co.uk