The Magic Border or Left Hand Margin with Table Tips
The Secret
While I was in recovery from my bout with status bar scrollerosis I decided IWB needed
a face lift. At the end of the last tutorial I showed you some of the changes I started to
make. I will now tell you about the rest of the improvements I made. After I became a
little more proficient at HTML I decided to try something that I had seen over and over on
the net. The MAGIC BORDER is the topic of this tutorial.
When I decide to try something I always go and look at the source of a page that is
similar to what I want to do. The first time I looked at a page with the Magic border I
thought it was just a good use of tables to design a page. I had been working with a
simple table on IWBs' first site and figured no problem I'll just pop in a few images to
stabilize the table and we're all done. I go like crazy and she's all done!! I set it up
on my ISPs' server and load the site in my browser of choice. "What the #$$%%%^ is
this white border!!!" So, I go back and look at the source of the other site again to
see if I made an error. Aghhhh I see two backgrounds, that must be the trick! Close, but
no cigar as they say! I screwed around with it for a week until I got the idea to take the
site apart piece by piece. I didn't have to go far, once I opened the background image it
was all crystal clear!!!!
Aaah, yes my friends it is indeed mystical when you lack the knowledge to know, why,
when you do every thing by the book it still doesn't work. Quite simply browser offset was
the problem!! You can get a detailed explanation of browser offset from this
article. If you decide to browse there a word of caution the author uses some rather
unstable means of designing pages. Put simply the guy does not care what the page looks
like if you're not using Netscape!!! More about "hacking" and browser specific
tags and why they should be avoided at a later date. For now my friends I am about to
de-mystify the MAGIC BORDER. It's no big secret, it's all in the background image!!
The Image
The image didn't look anything like what I thought it would! There was a wide white
strip attached to it!! It finally all made sense!!!!!! IT"S ALL IN THE IMAGE!! I had
de-mystified another one of my Internet mystery's. I made the image by attaching a white
strip to the image. I look at it, seems fine!! I call up a friend all excited and feeling
quite full of myself for what I had just accomplished. I gave him the url and he looks at
it and asks me "why is the border going down the page in another place as well?"
After discussing this with him a while I found the reason, his monitor was larger and so
the image starts tiling at the end of the image to make up for the extra width!!
Now that I have told you how I found the secret I'll describe how to put the rest of
the puzzle together. I refer to it as a puzzle because building a puzzle is similar to how
you build these pages. Each image and table has to interlock and stabilize the elements of
the document for it to look the same in every browser. To start, the page has a minimum of
two table cells. One for the border and one for the body or meat of the page.
First you make the image for the background. Something to note first. When you do the
code for the body there are two backgrounds used so that when the netizen asks for the
page they are not looking at the ugly grey background while the page loads. You can also
use it for the background color of your body table. I mentioned earlier that when I
discovered how this is done that the image had a white strip attached. This strip can be
any color, so if you want the rest of the page to be a certain color you just change the
color of the strip. The main thing to remember is that the image has to be at least 1280
pixels wide. I have seen them as wide as 1600 pixels however this is overkill, as near as
I can figure. I have seen them at 640 pixels to make a second border down the right side
as well.
The last piece of the puzzle, so to speak, is a transparent image in the
border to stabilize or set the width. I used a % in the table element why not use one in
the table data element as well? This is a favorite of the gentleman I mentioned earlier.
It is a total hack and browser specific. Hacks such as these have no place in a well
designed page!!! Not all browsers support this method! Unless you are designing for an
intranet, where you know the browser being used you have to presume that you never know
what browser will show up to browse your page. Well there you go, that's all I know about
this. I used 1280 pixels because that was the widest image I could make in
Paintshop. I
also have not found a site that simulates different widths or monitor sizes. So, if you
know of a page that does this simulation I would appreciate hearing from you!!
To Tutorial Index
|
