eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Invisible Spacers  
  • Another useful tool in your layout toolbox is the invisible spacer .GIF.

  • An invisible spacer .GIF is a one pixel by one pixel square with a transparent background that can be used to space things according to exact pixel locations.

  • Because the spacer is invisible, it will look as if, you have a greater degree of control over the positioning of text.

  • For example, consider the following example:

    Here is some regular text
    Here is some text that has apparently been tabbed over. How could you do this with regular HTML? The answer is that you could not.

  • So how did we get that tab effect?

  • Well simply, we used our invisible spacer .GIF with the following code:
Here is some regular text
<BR><IMG SRC = "dot_clear.gif"
            BORDER = "0"
            WIDTH = "40" HEIGHT = "1">
Here is some text that has apparently been
tabbed over.  How could you do this with regular HTML?
The answer is that you could not.

  • In the next example, we will put a one pixel border around the spacer so you can see it in action:

    Here is some regular text
    Here is some text that has apparently been tabbed over. How could you do this with regular HTML? The answer is that you could not.

  • You can also use the spacer .GIF to create vertical space as well. Check out this usage (We will keep the border around the spacer so you can see what is happening:

    Here is some regular text
    Here is some text that has apparently been tabbed over. How could you do this with regular HTML? The answer is that you could not.

  • You will very often wish to have more control over the extra space between paragraphs than afforded by the <P> tag.

  • Note that you can grab the invisible spacer .GIF used on this page and download it to your local Images directory for your own use. It is on the house.

Previous Page | Next Page