How to get rid of ad banners on free web hosting services, like Geocities

You might have noticed how much nicer this site looks than most other Fortunecity pages, and not because I have spent time or effort on this page. The reason is that I do not have all those pesky banners on all the pages.

This site was created for one thing, to show you all how to get around the mandatory advertising that sites, like Fortunecity, adds to your page.

To do this you will need to know about HTML Layers. Layers can be created several ways, I have found using <DIV> tags to be the most easy and widely supported, but I am jumping ahead of myself.

<DIV> tags are used for 2 reasons, we will be using them to group a section of HTML code and apply rules to that section (similar to <P> but much more functional). They can also be used in conjunction with style sheets, but we will not concern our selves with that. The other thing you should know about Layers is that they do not work on all browsers. When you use Layers you are restricting yourself to Internet Explorer 4.0 or higher, or Netscape Navigator 4.0 or higher. Some earlier browsers sill support layers, but not well, and chances are it won't work right. I will show you a trick later to customize your pages for both.

For now lets look at an example of Layers and see how it works. This is how the Layer on this page looks in HTML:

<BODY>

<P>This is where the page would go!</P>

</DIV>
</DIV>

</BODY>

It is that simple!

Now lets see what this does. As we discussed earlier the <DIV> tag tells the browser that we want to affect all of the HTML between the <DIV> and </DIV>. The other items tell what to do with the HTML in there. ID is the name of the layer. I like to put a # in there, but you could use any unique name you would like. The STYLE is what really matters to do what we want to do. When you create a layer you are creating a type of table. The Layer is not bound by the same properties that text and tables are. Instead it has its own properties, and is placed by the pixel. The first item in the STYLE section is "position:absolute". This tells the browser that we want to specify where the Layer is displayed. Notice the colon (:) between the position and absolute? This is similar to the = sign in HTML,the term following the colon (:) modifies the term proceeding it. Also notice the semi-colon after each attribute, this separates the different attributes and thier modifiers. The next item is "left:9px" and "top:11px", these tellt he browser where to lay out the top left corner of the Layer. Notice it is at 9 and 11 pixels. This is where most browsers start the display window, so the Layer should be flush with the top left corner of the display window. Next come the width and heignt. These tell the browser how large to make the box, this is why you do not have to specify the lower right corner for the Layer, the browser automaticaly calculates this, from the top left corner, using the final size of the Layer. The "Z-Index:1" is an important attribute, it tells the browser how to layout multiple Layers without getting them jumbled up. The higher the # the higher the Layer, so if a Layer with a Z-Index of 3 is overlapped over a Layer with a Z-Index of 6, the Layer with the 6 will be "on top" or overlaping the 3. The next 2 attributes are what make our Layer hide the banners. All you need to do is set the "background-color" and "Layer-background-color" to the same color as the background for the website. This is what hides the advertising, it is still there, but it is covered up by the layer, so it is not seen. I do not recommendchanging the "border" value because we are trying to hide the fact that there is a layer covering the background. If you wanted to change the border feel free, it follows most of the normal border rules.

You now know how to get rid of that awful advertising they try and push at you.

You can create as many layers inside each other as you possibly might want, and if you get good at them they can make grahical web page design a ton easier. The only reason I can think that this might not work for you (excluding you using the wrong browser) ist hat you did not make the layer large enough to cover the banners they have added to your page, try increasing the width attribute to 640 and the height attribute to 480, or higher.

So what if someone uses an older browser?

You can't expect all your visitors to use the latest browser version there is, therefor I have developed a way to either let them know to upgrade, of include pages for those that use Layers and pages for those that don't.

It is realy easy, all you need to keep in mind is that a Layer is a completely seperate window. Whatever is under it is still there, it is just hidden. When you do this the banners are still there, they are just covered with a Layer that looks like the main page. You can still leave your original content in the body, outside the layer and it will be covered up by the Layer.

If you would like to have the original page avaliable for those that can't use layers, just leave the original HTML, put in your layer, and make sure it is large enough to cover all the original content on the page.

That is it, You should now have enough info to master Layers, and more than enough to hide those ugly adds from the discerning eye.

If you have any more questions check out my site at www.xenex.org

If you would like to copy this and distribute this around the world, feel free, but please give credit where credit is due (meaning: Feel free to steal my work, but please put "Created by XeneX Lazzlo ([email protected])" somewhere in there =).

Created: 7/21/99

Lets look at the previous example, blue text signifies the changes I have made:

<BODY>

<P ALIGN="center">This site uses Layers, but your browser does not support layers. Click here to get a free upgrade to your browser so you can view this site</P>

<P>This is where the page would go!</P>

</DIV>
</DIV>

</BODY>

The best way to see this in action is to change the background color of the Layer to clear, here is the HTML:

<BODY>

<P ALIGN="center">This site uses Layers, but your browser does not support layers. Click here to get a free upgrade to your browser so you can view this site</P>

<DIV ID="Layer1" STYLE="position:absolute; left:9px; top:11px; width:974px; height:925px; z-index:1; border: 1px none #000000">

<P>This is where the page would go!</P>

</DIV>
</DIV>

</BODY>

You will notice you can now see the text we added, but it is underneath the text in the Layer, that is how the trick works!

*This site best viewed with Internet Explorer 4.0 or higher at 1024x768 screen resolution. Click here to get a free upgrade*

How to remove advertising from Fortunecity