HTML5 responsive tables alt?

**BorderTerroir** · 03-30-2015, 11:10 AM

Originally Posted by 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

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/_...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/_...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...

Code:


<!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" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/brdgSerpentine.gif" --></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" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/brdgFromDuckIsland.gif" --></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" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/brdgOpeningCrowd.gif" --></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" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/brdgSnakey.gif" --></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" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/brdgFromTheMill.gif" --></a></li>
</ul>
<ul id="grid1">
 <li><a class="chtFancybox" href="images/prjEA1.gif" rel="fishpass" title="&copy; Environment Agency">
 <img src="images/prjEA1_small.gif" alt="The fish pass under contruction" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/prjEA1.gif" --></a></li>
 <li><a class="chtFancybox" href="images/prjEA2.gif" rel="fishpass" title="&copy; Environment Agency">
 <img src="images/prjEA2_small.gif" alt="The fish pass under contruction" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/prjEA2.gif" --></a></li>
 <li><a class="chtFancybox" href="images/prjEA3.gif" rel="fishpass" title="&copy; Environment Agency">
 <img src="images/prjEA3_small.gif" alt="The fish pass under contruction" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/prjEA3.gif" --></a></li>
 <li><a class="chtFancybox" href="images/prjEA4.gif" rel="fishpass" title="&copy; Environment Agency">
 <img src="images/prjEA4_small.gif" alt="The fish pass under contruction" /><!-- MSComment="autothumbnail" xthumbnail-orig-image="file:///C:/zWebsiteFiles/CHT/Website/images/prjEA4.gif" --></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.o...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.

The solution is to use this HTML...

Code:


<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...

Code:


#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>

Code:

<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>&nbsp;Home</b></a></li>
	<li><a class="has-submenu" href="#"><span class="sub-arrow">+</span><b><i class="fa fa-comment"></i>&nbsp;The&nbsp;Trust</b></a>
	 <ul>
		<li><a href="AboutUs.php">About&nbsp;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&nbsp;Castleford&nbsp;Trails</a></li>
			<li><a href="prjTheFootbridge.php">Castleford&nbsp;Footbridge</a></li>
			<li><a href="prjRiversideRegen.php">Riverside&nbsp;Regeneration</a></li>
			<li><a href="prjForumMuseum.php">The&nbsp;Forum&nbsp;Museum</a></li>
		  </ul>
		</li>
		<li><a href="TheMill.php">Queen’s&nbsp;Mill</a></li>
		<li><a href="TheTrustees.php">The&nbsp;Trustees</a></li>
	 </ul>
	</li>
	<li><a href="Calendar.php"><b><i class="fa fa-calendar"></i>&nbsp;Calendar</b></a></li>
	<li><a href="Volunteering.php"><b><i class="fa fa-user"></i>&nbsp;Volunteering</b></a></li>
	<li><a class="has-submenu" href="#"><span class="sub-arrow">+</span><b><i class="fa fa-gears"></i>&nbsp;Miscellanea</b></a>
	  <ul>
		<li><a href="ContactUs.php">Contact&nbsp;Us</a></li>
		<li><a href="FindUs.php">Find&nbsp;Us</a></li>
		<li><a href="TheGallery.php">The&nbsp;Gallery</a></li>
		<li><a class="has-submenu" href="Heritage.php"><span class="sub-arrow">+</span>Our&nbsp;Heritage</a>
	    <ul>
			<li><a href="NaturalCas.php">Natural&nbsp;Heritage</a></li>
			<li><a href="IndustrialCas.php">Industrial&nbsp;Heritage</a></li>
	  		<li><a href="SocialCas.php">Social&nbsp;Heritage</a></li>
	    </ul>
		</li><li><a href="TheLagentian.php">The&nbsp;Lagentian</a></li>
		<li><a href="VisitorsBook.php">Visitors&nbsp;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>&nbsp;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. &nbsp;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. &nbsp;
	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. &nbsp;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. &nbsp;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. &nbsp;
	This important wetland area was formed by subsidence caused by coal mining. &nbsp;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>