|
|
||
|
|
||
|
|
||||||||||
|
This Week’s: Features 5 Quick Improvements to Any Web Site 10 Quick Upgrades That Say “Professional” Reviews Robin Williams Has a String of Hits! Homesite and BBEdit Are the HTML Editing Standards Techniques |
|
TechniqueI Need My SpaceSometimes you just need a little space. David Seigel popularized the spacer image in his book, "Creating Killer Web Sites" but it's flagrant abuse led to his apologizing later. The spacer image, used correctly, can be extremely useful. Much of the abusive use of the spacer image has died with the incorporation of style sheets which give designers more control over text spacing. The spacer image is a 1 pixel by 1 pixel transparent image that can be used to control spacing with a great deal of accuracy across browsers. By specify the hspace (horizontal space) and vspace (vertical space) attributes, you can:
The actual spacer image tag used used to create the purple column looks like this: By changing the "hspace" attribute I control how wide each table cell will be. The "hspace" value is applied equally to the right and left of the image, so the amount of total space is double the value (in this case the table cell is 21 pixels -- 10 hspace + 10 hspace + 1 pixel image width). The vspace attribute is this example is set to "10" to control the height of the table cell. And again that adds 10 pixels above and 10 pixels below for a total height of 21 pixels. You can create your own spacer image in any web graphics program. Simply create an image 1 pixel wide by 1 pixel tall, fill the inside with a solid color and then save it as a gif 89A image and make the fill color transparent. Or you can simply save the image inside the square border below to your computer by clicking on the image and choosing "Save Image as" or "Save this Image as".
You will have to fiddle with the "hspace" and "vspace" attributes to get the spacing effect you need. I find the spacer image particularly useful when I want to increase the space between page elements. The spacer image allows much greater control and accuracy than say adding break tags (<br>). You can also create some interesting vertical and horizontal bar effects by modifying the actual width and height, however, I recommend using horizontal rules or the vertical rules techniques found inside this issue. But the next time you need a little space, you'll have it at your command. Find out how to arrange an independent consultation or a workshop for your conference or organization on this or any other Internet-related topic. Copyright ©1995-2001 Carolyn E. Cooper. All rights reserved. |
|
|
||||||
