For some very good tips, visit Joe Burns. This page gives you an example of why you might want to visit (and links to his pages.
| I've added a section on using Tables to
get images and text centered on the stripe. (6/97) |
So You Want A
|
| I get an email
about this at least once every day, so I though I'd put up a quick tutorial
about it. See that green stripe down the left hand side of the screen? I'm
sure there's a specific name for it, but I call it a side-line stripe--and
they're very easy to make. Please note this tutorial only deals with how
to make the background. For instructions on how to place it on your page,
see So You Want A Background,
Huh?
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 Paint Shop 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 "Paint Shop Pro" when you get there. Or just use the program that's available to you. 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 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. The image I'm using on this page is 5X1200 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 strip image as a background, the color lines up and you have a stripe.
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 appears 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. OK...there are a couple of ways of dealing with this. The easiest is if you own and use the 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 it just right to indent to not 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 have 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 OL's 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 StripeThis 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 insuring the other text remains off the stripe. The Java Goodies Home Page is done in this fashion. You will need to know how to construct tables in order to do this. 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:
<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="5">
<TD ALIGN="----" WIDTH="###"> </TABLE>
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 TrickYou will need to play with this a bit. Notice above that the TD commands have a WIDTH="###" sub-command. 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 command will leave the gutter between the two - make it a 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. It has never yet worked for me. I always have to "jimmie" the numbers to get it straight. I have also found that setting the BORDER to one 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.
[Mail Me Here] |