Using a Spacer.gif file for Layouts
Sometimes you need to space thing on your site and don’t want to mess around with the CSS coding to accomplish the proper space requirement. In the past I have used line breaks to create vertical spacing. I have also used ascii spaces to create horizontal spacing.
No more, now I use a 1 pixel by 1 pixel transparent .gif file to do this work. Open your graphics editor and create a new image. Make the image a 1px x 1px file and leave it blank. When you start setting up a new file, be sure to have the background be transparent. Save the file as spacer.gif and upload it to your server.
When you need a vertical spacing then place the link to the file in your document and use the Height and width parameters to create the space. For example if you need vertical spacing it would look like this:
<img src="http://www.you.com/spacer.gif" alt="Spacer" height="400" width="5" /> Need a bit of horizontal spacing:<img src="http://www.you.com/spacer.gif" alt="Spacer" height="1" width="50" /> Try it out. Steve
You have to be kidding – CSS was invented to do away with this sort of terrible coding practices… next you’ll be telling people to use html tables to set their page design grids.
No more clearing pesky floats in CSS!!!!one!!
Thank you for commenting. The only reason I use a spacer .gif is because I can’t figure out how to do it easily in CSS. I would appreciate your help; if I’m having trouble with this, someone else is too.
For example, on my BBQ sauce page: BBQ Sauce Page
Visit that site and look at the source coding. Look just before the ‘Visit our Sponsors’ headline and tell me how would you fix this with CSS?
I would like you to be a Guest Poster, I will enter your response as a new post. Then we can get on to my table problem.
Steve
If you’re having these kinds of problems, you shouldn’t be calling yourself a “website technician”… it’s like catching the flu and declaring yourself to be a doctor. It makes no sense.
Can you shed some light on the solution in the form of some CSS coding that would solve the spacing issue?
It would be nice if you could. I would hate to think you are just a troll with no skills to back up your critiques.
Steve
just this once. Remove your:
<br />
<img alt=”spacer” src=”http://www.tumbleweedglass.com/images/spacer.gif” alt=”Spacer” height=”75″ width=”5″ /><br />
and put a padding-top of 75px on the h2. Do it in a CSS file rather than inline but here is the inline example anyway:
Visit our Sponsors
Voila, you have saved your visitors an HTTP request, reduced your markup and – if you used a CSS file – made your site much more maintainable.
sorry, got lost in the comment parser – that should be:
<h2 style=”padding-top:75px;”>Visit our Sponsors</h2>