HTML5 responsive tables alt?

[mlegg]

I'm swapping a site for a friend from HTML4 to a responsive HTML5. On one of his pages the entire thing is tables.

For this page, would it be better to leave it as a table layout or a grid style page?

[Beverleyh]

Semantically and responsively, it would be better to recode and get away from tables for anything other than statistical data.

For all the logos at the bottom, maybe you could use this as a starting point http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

[mlegg]

Row 1 is going to be split into a left, middle and right div
Row 2 is going to be done with a grid, like your link above
Row 3 is is going to be split into a left and right div
everything below will be done with a grid, like your link above

[mlegg]

Semantically and responsively, it would be better to recode and get away from tables for anything other than statistical data.

For all the logos at the bottom, maybe you could use this as a starting point http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

Is there a way to turn the images into hyperlinks (pop up window, modal window, whatever) so I can get it to open a window for the reference letter they are linked to?

[Beverleyh]

Try wrapping a standard hyperlink anchor tag around the div that holds each img

<a href="my-page.htm"><div class="img img-01"></div></a>

[coothead]

Hi there mlegg,

here is a slightly different example to Beverley's that can be seen in the attachment.

Edit: modified the code and replaced the original attachment.

coothead

[mlegg]

Try wrapping a standard hyperlink anchor tag around the div that holds each img

<a href="my-page.htm"><div class="img img-01"></div></a>

That works. test page
The Blue Water logo is originally 150 x 76. In the test page it shows a portion of the logo, not the whole thing scaled to fit.
Here is the original logo.
also, all of the logos are different sizes too.

[coothead]

Hi there mlegg,

my example, as it uses the "img element" rather than
the "background-image" does not have that problem.

coothead

[Beverleyh]

Look for background-size:cover; in the CSS and try changing it to background-size:contain;

[BorderTerroir]

What a great script I've tried a test page and now I'll implement it on the whole site.

http://www.castlefordheritagetrust.o...Footbridge.php

Many thanks

John