Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

A More Elite Image Rendering

A man of many companions may come to ruin, but there is a friend who sticks closer than a brother.” I think the above passage from Proverbs 18:24 sums up my relationship with Chuck Holton, known to some of you as an author of various  articles on Christian leadership through strong male role models.

Chuck is one of those “go to” friends — one of those two or three people you would want around if and when life throughs you one of It’s nasty curveballs. Of course it doesn’t hurt that Chuck is also knows how to fly U.S. Army helicopters as well as having earned “Combat Jump Wings.”

A More Elite Soldier by Chuck HoltonWhich is why I tread lightly when I use an image of his upcoming book from his web site as an example of an image that could be tweaked in such a way as to give the text surrounding it some breathing room, and offer those without images — or those who mouseover the image — a clue as to what the image represents. Not that he would drop down into my living room by means of a “Fast Rope Infiltration Exfiltration System” … though he does have the means by which he could show up in my driveway in his Chevy Suburban unannounced, throw open the back doors and unload his five (young) kids, two (gregarious) dogs, etc… but I digress.

The point is, the image of Chuck’s book is crowded on the left side by the text. A problem I see with images rendered on many church web sites that can simply be healed by adding the vspace and hspace arguments to his image tag. As you might guess from their names, vspace increases the vertical space, and hspace increases the horizontal space between the image and the surrounding text. For example, here is how I might heal Chuck’s image tag:

<img src=”/m4me/images/articles/amescover.gif” align=”left” vspace=”10″ hspace=”10″ alt=”A More Elite Solder by Chuck Holton”>

Another way to skin this cat is to define the “padding” around an image via a Cascading Style Sheet (CSS). This has the benefit of adding space around ALL of your images automatically, which is useful for those of us who either forget or do not want to use the vspace and hspace arguments. An entry in your CSS file might look like this:

img {
padding: 10px 10px 10px 10px;
}

You’ll may have also notice in my first example that I added an alt argument, which stand for ‘alternative text.’ This provides useful text those using imageless browsers such as Lynx, have turned-off their images or have then turned-off for them by the firewall at place of employment. This also has the added benefit of adding a text tip to those with image enabled browsers. This text shows up when you move your mouse over the image. It is a good rule of thumb to always employ the alt argument with the <img> tag regardless of which approach you take to rendering images

BTW, if you visit Mission4Me.com and are unable to see images crowded up against the text, it is only because Chuck is a smart guy with a teachable spirit — which is what makes him such an effective witness of the Gospel — and such a valuable friend.

4 Comments

  1. It might be painful adding vspace/hspace to all images. If you have graphic navigation buttons, for example.

  2. Margins might be the preferable css propery to specify space around an image, as the padding css property specifies the amount of space between the image and the border and is better suited for container tags. If borders are turned on for an image using padding, it will push the borders out and make it touch the text.

    It might also be good to create specific CSS IMG class that defines both alignment (through the CSS float property) and margins. That way, it’s easy to give an image a single class attribute and not worry about the other attributes in HTML.

  3. Or…

    You could use a contextual selector, ie:
    p img {
    margin: 10px;
    }

    would apply a 10px margin to all images that were contained in (ie descendants of) a <p> tag.

  4. One thing to keep in mind is that the <img> tag is an inline element not a block element (eg. <em> is inline, <p> is block). I did a quick test and discovered that CSS paddings or margins are applied to the sides of the element, but not the top or bottom.

    So, this would add space to the sides of the image, but not the top or bottom.