Ted's Computer World HTML & CSS
Tips and Tricks

DISPLAYING GRAPHICS THE EASY WAY
Part B — Multiple Images

There is much online gnashing of teeth over how to display multiple images on a line.  In a sensible world, such a simple and commonly desired construct would be almost effortlessly implemented, but no — the CSS people have elected to make a virtual nightmare of it.  The single word that best describes this scenario is stupid.  It's no wonder that there actually is a groundswell movement to replace CSS altogether.

Pending the revolution, however, we must do what we can with available tools.  A relatively new approach is to master the intricacies of the <grid> system that, despite what its pundits claim, is quite convoluted.  Should you choose to tackle that methodology, then more power to you; but perhaps you would like to start a bit slower.

Another old-fashioned approach is to utilize a <float> style; but that is difficult to control and always has seemed flaky to me,  A better solution was to use a <table> that's right, the stable, tried-and-true, easily manageable structure that yields perfect results every time, yet which now is denigrated by so many.

If you are one of the disparagers, please bear with me for a bit.  Let's say that we would like to display three photographs on a line, nicely arranged.  Using a table:

*

Then:

*

* * *

Very nice.  As on the prior page, the [alt=""] references have been left out of the illustrations just for the sake of clarity.  Also in the interest of readability, I have programmed all images on this page to have a simple border; you might not want those on your own page.

The cell and image widths can be adjusted for a different look, and captions are an option:

*

Now,

*

* * *
Brodiaea Cactus Corn Lily

(Note: I pre-specified that captions would be displayed in a small blue font.)

Optionally, a caption can underscore the entire line of images:

*

* * *
Now is the time for all good men to stop and smell the flowers

So what is wrong with using tables?  Absolutely nothing!  In fact, they are so inherently useful that the CSS/HTML gurus have gone out of their way to create 'fake' table functions to supplant the real ones!  Hypocrites.  Most of my own pages, including this one, feature a little table at the top — not because I am old-fashioned or just being arbitrary, but because it's a quick and easy way to get the job done.  And that is what's important.

Perhaps, however, you are concerned that a blind person's screen-reader might tell him that some ignorant blogger is improperly using a table for something other than 'tabular data'.  Although that person probably would respond with, "Who gives a shit?", you are determined to do the modern thing and display your images in another manner.

In your quest to come up with a useful solution to the seemingly trivial task of placing a couple of images side-by-side, you probably have run across the suggested usage of <ul> and <li>, and that method can work.  Using a structure designed to generate unordered lists is absolutely not what the gurus had in mind; but the Internet Police will not come after you for it.

The default properties for <ul> define it as a block element with settings for margins and padding; those must be amended as follows:

*

The definition for <li> must be adjusted as well, to function like a — dare I say it? — table:

*

This property turns out to be an incredibly useful function, which is no surprise.  Because we don't want all of our unordered lists to behave strangely, though, we will assign this one to a class:

*

Those numbers are based upon a known page-width of 192×5, or 960 pixels.  Such layouts are flexible.  The markup actually is more concise than that for a table!  This is good.

*

Captions can be added without concern for vertical spacing:

*

Oops!  What happened to the centering?  The problem is that <ul> no longer is a block element.  To center those three images on the page, the thing must be wrapped in a container:

*

Those coders suffering from Divitis — that is, who are addicted to the usage of <div> structures even when they are unnecessary — will have no problem with that; but I don't much like it.  There aren't a dozen divs on my entire website.  Of course, those creating more complicated pages probably have no choice; but it's nice to avoid redundant constructs when possible.

In any case, our inline graphics displays can be implemented in an even more efficient manner yet.  Are you ready?


This is what I am convinced is the best solution of all.  Instead of manipulating <ul> and <li> to serve an unorthodox need, we'll do the same thing with an obscure and redundant tag: <ins>.  Although that function now is officially allocated to the underlining of text, we already have a tag for that: <u>.  This leaves <ins> free to be molded and contorted in a manner of our choosing.

The setup for displaying images with <ins> is even simpler than that for <ul>, because there is but one default property:

*

One great advantage of this method is that no <div> structure is required.  The tricky markup:

*

* * *

As with <ul>, individual captions are easily added:

*

*
Crimson Columbine
*
Blue-Eyed Grass
*
California Poppy

In this case, a single caption spanning the images requires an adjustment.  In order to keep the labels appropriately close to the graphics, it is necessary to strip both the bottom margin of the image block and the top margin of the caption line:

*

*

* * *

The rain in Spain flows through a lot of flower gardens

Sometimes, of course, the images to be displayed will not all be the same size or shape.  The <ins> function doesn't care.  Most of my own graphics are arranged in one of just two widths, depending upon whether the image is in portrait or landscape configuration.  Since most are landscape-oriented, that is the default.  For a vertical image, the width is reduced to ¾ of normal, because most images are in a 4×3 format.  That serves to keep them approximately the same overall size on the page.

My simplistic method for accomplishing this is to wrap vertical images in <em> tags:

*

*

Voila!

* * *

Finally, there is the matter of attaching links to the images:

*

* * *

(click on any image to enlarge it)

Occasionally, however, it is sufficient for a single link to reference all of the images.  Using <ul>, said reference would have to be redundantly attached to each image as above; otherwise, the code would be invalid.  With the <ins> method, however, because of its block-level structure, a single common link can accommodate any number of displayed images:

*

* * *

(clicking on any of these images references the same file)

After all of that, if you would rather move up to Grids, then more power to you; meanwhile; that's how easy it is to work with <ins>.  Note that no extra container was required at any time and, for the record, no inline styles are to be found anywhere on this page.  The occasional top-bottom margin adjustments for a global caption are unnecessary using <ul> and <li>; but I feel that this is a small price to pay for the increase in overall functionality.


For the most efficient usage of this method (or any other, for that matter), place any invariable code in ALL.CSS, and put page-specific stuff in local references, as in this example:

*

Of course, such a setup presumes that the <ins> tag would not be used for any other purpose, which is a good plan.

---

AFTERTHOUGHT

I actually could replace all my hundreds of page-top tables with somewhat shorter code; but I believe that I will leave them as is — just to be arbitrary.

Go Back