CMS

Content

HTML

Images

Monetizing

Home » Images

Using Spacer Images

Monday, 22 March 2010 · Print This Post Print This Post 198 Comments

Related Reading

This entry is part 7 of 7 in the series Images

This section of your free online web design course covers “spacer” images, which are basically 1×1 dimension, transparent GIF images used to create useful blank spaces in a web page.

For example if you want two objects to be a certain amount apart from each other, you can part them by placing a spacer image with a width of the desired distance inbetween these two objects.

Below is an enlarged 1×1 transparent GIF image. I’ve set the “width” and “height” attributes of this image as 50 pixels for you to be able to see it and save it, but it is still originally a 1×1 dimension image. Save it to your hard drive by right clicking and selecting “Save Picture As…” from the menu:

Enlarged Spacer Image

Sidenote: Make sure you save it to the same folder as you keep your HTML files, or change the filepath accordingly in the below examples.

Let’s say we want to separate two pieces of text horizontally or vertically. In order to do that, we can use either tables or spacer images. Have a look at the below HTML code:

<html>
<head>

</head>
<body>

Online Web Design Course
<img src=”spacer.gif” width=”100″ height=”1″>
is your totally free HTML tutorial!

</body>
</html>

In the above HTML code, “Online Web Design Course” is separated from “is your totally free HTML help!” by 100 pixels horizontally, as we have set the width of our spacer image as “100″. Below is the output of the above HTML code:

Online Web Design Course is your totally free HTML tutorial!

Sidenote: Remember to set the height of your spacer image as well as the width when setting it up. When separating items horizontally, the height of your spacer image should be “1″. Similarly, if you are using the image to separate items vertically, set the width of the image to “1″.

Let’s do the same thing, but this time vertically:

<html>
<head>

</head>
<body>

Online Web Design Course
<br>
<img src=”spacer.gif” width=”1″ height=”100″>
<br>
is your totally free HTML tutorial!

</body>
</html>

Notice that this time we have set the width of our spacer image to “1″ and the height to “100″ so that our texts will be 100 pixels apart *vertically*. We have also put two <br> tags to separate our items with a line break. If we did not put the <br> tags, our texts and image would appear in a horizontal row instead of a vertical row, so we need those <br> tags. Below is our output:

Online Web Design Course

is your totally free HTML tutorial!

Note that you can position many types of items (i.e. images, flash animations, form elements, etc.) by using spacer images.

If you enjoyed this lesson, please link to it :)

This was the last section of Lesson 1-07. Next lesson is about putting links in your HTML documents. Let’s head on to Lesson 1-08!

Series Navigation«The PNG Format

Bookmark this Post Subscribe to Blog

Popular Tags

Adsense Background Cascading Style Sheets colors Content font Forms GIF Hex Codes HTML Hyperlinking Images IMeye JavaScript JPEG Keyword Research layout Merging meta PNG SEO Sizing spacer Tables text W3C
Comments
1 2 3 4
Leave a Comment

Threaded commenting powered by Spectacu.la code.