Sideline Background

     I get an question about this at least once a week, so I thought I'd put up a quick lesson about it. See that stripe of bisons down the left-hand side of the screen? I'm sure there's a specific name for it, but I call it a sideline stripe -- and it's very easy to make. Please note this lesson only deals with how to make the background. For instructions on how to place it on your page, see Do You Want A Background?

How You Do It

First off, you'll need a program that will create graphics for you. If you use an IBM-type computer, my suggestion is to grab something called PaintShop Pro. You get a 30-day trial and then are asked to send in a few bucks. You can grab it at http://www.shareware.com. (I don't know an equal for the MAC. Help if you can!) Just enter "PaintShop Pro" when you get there. Or just use the program that's available to you on your computer.

You'll need to create an image that is long and thin. The thickness, or how tall the image is, is up to you. I keep it fairly small to cut down on bytes and load time. The width, though, is pretty much set. It has to be long enough to span the entire screen. Go with something at least 1200 pixels wide. You see, when an image is defined as 650 x 10 or whatever, it fails to address 800 x 600 and 1024 x 768 monitor resolutions. A width of 1200 covers all. A image I can use on a page is 5 x 1200 pixels. That's pretty long and thin.

Using the graphics program again, make the left side a different color. I made mine lime green. It's an eye-catcher, don't you think? How much of the left side of the image you color will determine how thick your side-line stripe will be. When you use the thin stripe image as a background, the color lines up and you have a stripe.

Click Here to see
this page's background .gif.

Do I Have To Use Just Color?

No. If you'd like to place an image on the side rather than a color... do it. Just remember it's going to occur again and again. Some football sites use what appear to be yard markers, some sites make the side of the page look like a loose leaf notebook, and so on.

What About Text?

Yeah! What about text?! Oh, you're asking me. Okay, there are a couple of ways of dealing with this. The easiest is if you own and use Microsoft Internet Explorer. Just add this command in your BODY command at the top of your page:


The numbers are relative. One is bigger than two, two is bigger than three, etc. You'll have to play with the numbers to get the indent just right, so it doesn't cover your stripe.

But I Don't Have Explorer -- I Use Netscape!

So does almost everyone else on the Net, but Explorer is making a strong move! Here's how I indent. This is only to get text off of the stripe. Stay tuned for how to place items on the stripe. Now, someone is going to go bonkers on me saying this isn't right and that there's a better way of doing it. All that aside, if all you want is the text off the stripe, this is how I do it, and it works. I add <OL> commands at the top. I don't add any <LI> commands, list items, or </OL>. You'll find that every <OL> pushes all the text in just a little bit. Just keep adding OLs until the text bumps over far enough for you. Let's remember, I taught myself HTML. Basically, I'm a hack. I use what works no matter how strange it seems. I think that's a good way of learning.

Placing Items On The Stripe

This isn't too hard either, but it is just a bit involved. Look at the image to the left. Imagine that image is this page. Now imagine that the blue lines imposed on the page are the borders of a really big table. That's the easiest way to center images right on the stripe while ensuring the other text remains off the stripe. You will need to know how to construct tables in order to do this. If you need information, see my table lesson.

Now, constructing the table is not the hard part. As you can see, the table to the left is just two cells. Here's the code that made it:


<TD ALIGN="----" WIDTH="###">
<TD ALIGN="----" WIDTH="###">


You place everything that will go in the left column (on the stripe) after the first TD and everything that will go on the other side under the second TD. The BORDER="0" command makes the table walls invisible.

Now the Trick

You will need to play with this a bit. Notice above that the TD commands have a WIDTH="###" subcommand. That's the key here. You need to make the width of the left cell a little bit smaller than the width of the stripe and you need to make the width of the right cell just a little bit bigger than the open space. (The CELLSPACING and CELLPADDING commands will leave the gutter between the two -- make it large, five or better.)

I always use pixels to do this. Percentages aren't as exact. It seems like you should be able to find out the pixel width of the stripe, knock off a few, and it should work, but it has never worked for me. I always have to "jimmie" the numbers to get it straight.

I have also found that setting the BORDER to 1 helps with finding the pixel numbers. You can always go back in and set it to zero after you're done.

Play with it -- you'll get the look you want.


[Back to the HTML Home Page]