|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
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
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
<table> — that's right, the
stable, tried-and-true, easily manageable structure that
yields perfect results every time, yet which now is denigrated by
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:
Very nice. As on the prior page, the
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:
(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
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
In your quest to come up with a useful solution to the seemingly
trivial task of placing a couple of images
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? —
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
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
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:
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
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
in <em> tags:
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
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.
I actually could replace all my hundreds of
with somewhat shorter code; but I believe that I will leave them as
is — just to be arbitrary.