“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.”
Which 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:
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:
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.