HTML5 responsive tables alt? [Archive]

View Full Version : HTML5 responsive tables alt?

mlegg

03-14-2015, 05:41 PM

I'm swapping a site for a friend from HTML4 to a responsive HTML5. On one of his pages (http://www.pscompetitiveedge.com/references.html) 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

03-14-2015, 07:30 PM

mlegg

03-14-2015, 08:01 PM

5630

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

03-28-2015, 12:34 AM

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/_testing/grid-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

03-28-2015, 11:29 AM

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

03-28-2015, 02:05 PM

Hi there mlegg,

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

modified the code and replaced the original attachment.

coothead

mlegg

03-28-2015, 05:34 PM

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 (http://www.pscompetitiveedge.com/grid-img-rwd.html)
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. 5653
also, all of the logos are different sizes too.

coothead

03-28-2015, 05:57 PM

Hi there mlegg,

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

coothead

Beverleyh

03-28-2015, 07:17 PM

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

BorderTerroir

03-30-2015, 09:34 AM

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

http://www.castlefordheritagetrust.org.uk/prjTheFootbridge.php

Many thanks

John

BorderTerroir

03-30-2015, 11:10 AM

Hi there mlegg,

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

modified the code and replaced the original attachment.

coothead

How can I either centre the images or space them evenly on the horizontal?

coothead

03-30-2015, 11:16 AM

Hi there BorderTerroir,

do you mean that you want to use 100% of the page width instead of the 80% of my example?

coothead

Beverleyh

03-30-2015, 12:01 PM

You mean that the first and last are longer than the middle ones?

That appears to be a limitation of coothead current version using standard <img> tags. That was one of the reasons I used background images in my demo: http://fofwebdesign.co.uk/template/_testing/grid-img-rwd-02.htm (background-size:contain; - the advice given to mlegg - contrains the image regardless of size/dimensions)

And this is the same grid using img tags: http://fofwebdesign.co.uk/template/_testing/grid-img-rwd-03.htm

It's probably possible to get the img tag version working like the background-image with a more of extra CSS and overflow:hidden; though.

BorderTerroir

03-30-2015, 12:04 PM

Sorry, I should have posted this link;
http://www.castlefordheritagetrust.org.uk/zSandPit.html

As you can see the second example is 'left justified'.
How would I centre the images?

John

coothead

03-30-2015, 08:02 PM

Hi there BorderTerroir,

here is the relevant CSS and HTML corrected...

<!DOCTYPE html>
<html lang="en">
<head>

<base href="http://www.castlefordheritagetrust.org.uk/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
#grid,#grid1 {
width:95%;
padding:1%;
border:1px solid #999;
border-radius:1vw;
margin:0 auto 1.5%;
list-style-type:none;
overflow:hidden;
background-color:#fff;
box-shadow:1vw 1vw 1vw #999;
}
#grid1 {
width:75%;
}
#grid li {
float:left;
width:19%;
margin:0.5%;
}
#grid1 li {
float:left;
width:24%;
margin:0.5%;
}
#grid a,#grid1 a,#grid img,#grid1 img {
display:block;
width:100%;
}
#grid a:hover,#grid1 a:hover {
opacity:0.5;
}
</style>

</head>
<body>

<ul id="grid">
<li><a class="chtFancybox" href="images/brdgSerpentine.gif" rel="casFootbridge" title="Castleford Footbridge - View from The Mill">
<img src="images/brdgSerpentine_small.gif" alt="Castleford Footbridge" /></a></li>
<li><a class="chtFancybox" href="images/brdgFromDuckIsland.gif" rel="casFootbridge" title="Castleford Footbridge - View from Duck Island">
<img src="images/brdgFromDuckIsland_small.gif" alt="Castleford Footbridge" /></a></li>
<li><a class="chtFancybox" href="images/brdgOpeningCrowd.gif" rel="casFootbridge" title="Castleford Footbridge - The opening day crowds">
<img src="images/brdgOpeningCrowd_small.gif" alt="Castleford Footbridge" /></a></li>
<li><a class="chtFancybox" href="images/brdgSnakey.gif" rel="casFootbridge" title="Castleford Footbridge - An under bridge view">
<img src="images/brdgSnakey_small.gif" alt="Castleford Footbridge" /></a></li>
<li><a class="chtFancybox" href="images/brdgFromTheMill.gif" rel="casFootbridge" title="Castleford Footbridge - Pedestrians crossing the bridge">
<img src="images/brdgFromTheMill_small.gif" alt="Castleford Footbridge" /></a></li>
</ul>
<ul id="grid1">
<li><a class="chtFancybox" href="images/prjEA1.gif" rel="fishpass" title="© Environment Agency">
<img src="images/prjEA1_small.gif" alt="The fish pass under contruction" /></a></li>
<li><a class="chtFancybox" href="images/prjEA2.gif" rel="fishpass" title="© Environment Agency">
<img src="images/prjEA2_small.gif" alt="The fish pass under contruction" /></a></li>
<li><a class="chtFancybox" href="images/prjEA3.gif" rel="fishpass" title="© Environment Agency">
<img src="images/prjEA3_small.gif" alt="The fish pass under contruction" /></a></li>
<li><a class="chtFancybox" href="images/prjEA4.gif" rel="fishpass" title="© Environment Agency">
<img src="images/prjEA4_small.gif" alt="The fish pass under contruction" /></a></li>
</ul>

</body>
</html>

coothead

BorderTerroir

03-30-2015, 08:21 PM

Excellent I can see the logic now.

If you want three images in the row you declare a width of 32% and so on.

Many thanks

John

coothead

03-30-2015, 09:07 PM

No problem, you're very welcome. ;)

coothead

BorderTerroir

04-01-2015, 11:39 AM

EyUp!

You could say the easy way to resolve this is to add another image to row two however that wouldn't explain why I'm having problems.

As I am upgrading the pages on the CHT website I've come across this page;
http://www.castlefordheritagetrust.org.uk/NaturalCas.php

My attempts to convert to a responsive grid are not doing well as you can see;
http://www.castlefordheritagetrust.org.uk/zSandPit.html

I have nested the second list into the first list but the second list has taken on the attributes of the first list i.e. grid4
Where am I going wrong?

I should say I have no formal training in mark up and I have taken on the role as webmaster to the Trust as a volunteer in my retirement.

Thanks for your help so far

John

coothead

04-01-2015, 12:36 PM

Hi there BorderTerroir,

unfortunately things are not always as straightforward as one would hope. ;)

This is certainly true when working with percentage values. :eek:

The solution is to use this HTML...

<div id="grid-holder">
<ul id="grid4">
<li><a class="chtFancybox" href="images/natCasAshTree.gif" rel="naturalCas" title="Ash Trees">
<img alt="Ash Tree" src="images/natCasAshTree_small.gif" /></a></li>
<li><a class="chtFancybox" href="images/natCasBracketFungus.gif" rel="naturalCas" title="Bracket Fungus">
<img alt="Bracket Fungus" src="images/natCasBracketFungus_small.gif" /></a></li>
<li><a class="chtFancybox" href="images/natCasUrbanFox.gif" rel="naturalCas" title="Urban Fox">
<img alt="Fox Cubs" src="images/natCasUrbanFox_small.gif" /></a></li>
<li><a class="chtFancybox" href="images/natCasPerch.gif" rel="naturalCas" title="Schoal of Perch">
<img alt="Small Perch" src="images/natCasPerch_small.gif" /></a></li>
</ul>
<ul id="grid3">
<li><a class="chtFancybox" href="images/natCasKingfisher.gif" rel="naturalCas" title="A Kingfisher">
<img alt="Kingfisher" src="images/natCasKingfisher_small.gif" /></a></li>
<li><a class="chtFancybox" href="images/natCasWetlands.gif" rel="naturalCas" title="Wetlands Habitat">
<img alt="Wetlands Habitat" src="images/natCasWetlands_small.gif" /></a></li>
<li><a class="chtFancybox" href="images/natCasHeron.gif" rel="naturalCas" title="A Grey Heron">
<img alt="Heron" src="images/natCasHeron_small.gif" /></a></li>
</ul>
</div>
...and this CSS...

#grid3 {
width:75%;
padding:0;
border:0;
box-shadow:none;
}
#grid4 {
width:100%;
padding:0;
border:0;
box-shadow:none;
}
#grid-holder {
width:75%;
padding:1%;
margin:0 auto 1.5%;
border:1px solid #999;
border-radius:1vw;
background-color:#fff;
box-shadow:1vw 1vw 1vw #999;
}

coothead

mlegg

04-01-2015, 12:39 PM

take div grid 3 take out and the bottom </ul>

<div id="header-wrap">
<div id="titleGirderStat">
<div id="pageadjCaption">
<p class="textTitle">Castleford Heritage Trust</p>
</div>
</div>

<ul data-smartmenus-id="14278917608016145" id="main-menu" class="sm sm-gray">

<li><a href="http://www.castlefordheritagetrust.org.uk/"><b><i class="fa fa-home fa-lg"></i> Home</b></a></li>
<li><a class="has-submenu" href="#"><span class="sub-arrow">+</span><b><i class="fa fa-comment"></i> The Trust</b></a>
<ul>
<li><a href="AboutUs.php">About Us</a></li>
<li><a href="Activities.php">Activities</a></li>
<li><a href="Events.php">Events</a></li>
<li><a class="has-submenu" href="Projects.php"><span class="sub-arrow">+</span>Projects</a>
<ul>
<li><a href="prjCasTrails.php">The Castleford Trails</a></li>
<li><a href="prjTheFootbridge.php">Castleford Footbridge</a></li>
<li><a href="prjRiversideRegen.php">Riverside Regeneration</a></li>
<li><a href="prjForumMuseum.php">The Forum Museum</a></li>
</ul>
</li>
<li><a href="TheMill.php">Queen’s Mill</a></li>
<li><a href="TheTrustees.php">The Trustees</a></li>
</ul>
</li>
<li><a href="Calendar.php"><b><i class="fa fa-calendar"></i> Calendar</b></a></li>
<li><a href="Volunteering.php"><b><i class="fa fa-user"></i> Volunteering</b></a></li>
<li><a class="has-submenu" href="#"><span class="sub-arrow">+</span><b><i class="fa fa-gears"></i> Miscellanea</b></a>
<ul>
<li><a href="ContactUs.php">Contact Us</a></li>
<li><a href="FindUs.php">Find Us</a></li>
<li><a href="TheGallery.php">The Gallery</a></li>
<li><a class="has-submenu" href="Heritage.php"><span class="sub-arrow">+</span>Our Heritage</a>
<ul>
<li><a href="NaturalCas.php">Natural Heritage</a></li>
<li><a href="IndustrialCas.php">Industrial Heritage</a></li>
<li><a href="SocialCas.php">Social Heritage</a></li>
</ul>
</li><li><a href="TheLagentian.php">The Lagentian</a></li>
<li><a href="VisitorsBook.php">Visitors Book</a></li>
<li><a href="Links.php">Links</a></li>
</ul>
</li>
<li><a href="News.php"><b><i class="fa fa-desktop"></i> News</b></a></li>
</ul>

</div>

<div id="pageHolder">

<h2 class="textCUB">The Sand Pit</h2>

<p>There are many places where you can enjoy the natural environment around Castleford.  Whether you're looking for healthy exercise, a long walk, a bicycle ride, or whether you just want to experience nature away from streets and houses you can find somewhere in the local area.  
In geological terms Carboniferous rocks underlie most of the area and the coal measures are predominantly a shale, mudstone and sandstone series with thin seatearths, a layer of sedimentary rock underlying a coal seam, and coal deposits.  All these rocks have a general dip to the south and south-east.</p>

<p>It is the predominance of these rocks that led to Castleford’s growth at the start of the Industrial Revolution.  Since then industry has left its own mark on the surrounding area, the most notable of all is the formation of Fairburn Ings nature reserve.  
This important wetland area was formed by subsidence caused by coal mining.  Strict controls on what could be done came into force in the middle of the last century, and following the decline of heavy industry at the end of the 20th century, improvements to water and air quality are helping some species to thrive again.
Birds, fish, mammals and insects, and the places that they live, need to be protected so that they can be enjoyed by us and future generations.</p>
<br><br>

<ul id="grid4">
<li><a class="chtFancybox" href="images/natCasAshTree.gif" rel="naturalCas" title="Ash Trees">
<img alt="Ash Tree" src="images/natCasAshTree_small.gif"></a></li>
<li><a class="chtFancybox" href="images/natCasBracketFungus.gif" rel="naturalCas" title="Bracket Fungus">
<img alt="Bracket Fungus" src="images/natCasBracketFungus_small.gif"></a></li>
<li><a class="chtFancybox" href="images/natCasUrbanFox.gif" rel="naturalCas" title="Urban Fox">
<img alt="Fox Cubs" src="images/natCasUrbanFox_small.gif"></a></li>
<li><a class="chtFancybox" href="images/natCasPerch.gif" rel="naturalCas" title="Schoal of Perch">
<img alt="Small Perch" src="images/natCasPerch_small.gif"></a></li>
<li><a class="chtFancybox" href="images/natCasKingfisher.gif" rel="naturalCas" title="A Kingfisher">
<img alt="Kingfisher" src="images/natCasKingfisher_small.gif"></a></li>
<li><a class="chtFancybox" href="images/natCasWetlands.gif" rel="naturalCas" title="Wetlands Habitat">
<img alt="Wetlands Habitat" src="images/natCasWetlands_small.gif"></a></li>
<li><a class="chtFancybox" href="images/natCasHeron.gif" rel="naturalCas" title="A Grey Heron">
<img alt="Heron" src="images/natCasHeron_small.gif"></a></li>
</ul>
</div>

BorderTerroir

04-01-2015, 01:32 PM

Wow what a quick response.

I've just done an Edd China type repair to the dishwasher and I come back to some new mark up.

Many thanks I'll get back to it in the morning.

Cheers

John

coothead

04-01-2015, 03:53 PM

Well, we certainly don't fcuk about here at Dynamic Drive. :D

coothead