skip to primary navigationskip to content
 

Adding images and text to a page to replace a table

Often it is useful to link to other pages from a contents page using a set of images with text titles. In the past this would have been done with a table, but with responsive design it is better to float elements so the content will re-arrange for smaller-screened devices.

The essentials

To have an attractive page, it is essential to have images all of the same size. The images in this example are all 150px wide and 120px deep and the height allowed for both the image and the caption is 190px for normal viewing and 230px on a mobile device. On the full desktop view this allows for four images across the screen, on a portrait smartphone one image will show. Extra coding needs to be added through the 'html' editing in the content area, and the styling needs to be available. In February 2014, the coding was not yet in the stylesheets and will need to be added to an individual site, using the method in 'Adding a custom stylesheet'.

Styling

The style to add is:

/*non-table display*/
#content div.display {padding-left: 20px;margin-bottom: 20px;}
#content div.displaycell {float:left; left: 0%;padding-right: 40px;width:150px;height: 190px;display: inline;}
#content div.displaycell a {width:150px;}
#content div.displaycell img {margin:0 auto;padding-bottom:6px;}
@media (max-width: 767px) {
#content div.displaycell {float:left; left: 0%;padding-right: 20px;width:150px;height: 230px;display: inline;}}

The markup

The layout is easy to envisage by coding the images and captions in blocks of four, with the coding as follows:

<div class="display">
<div class="displaycell">
<a href="">
<img src="" /><br />
text</a></div>
<div class="displaycell">
<a href="">
<img src="" /><br />
text</a></div>
<div class="displaycell">
<a href="">
<img src="" /><br />
text</a></div>
<div class="displaycell">
<a href="">
<img src="" /><br />
text</a></div>
</div>

Note that the link goes around the image and the text, so that if either are clicked on the user goes to the right place. To create the display, it's probably easiest to add the images, the text on a following line and create the link around the two in the editor view, then go into html view and copy and paste or type the other coding that's required. Add another block and another until you have added as many as you need, leaving the last block part full if need be.

If you want to add more content after the images and text, you will need to add a 'clear floats' element (from the style popdown) between them so that the new content starts on a fresh line.