5ThirtyOne

Anyone who inserts contextual advertisements into their pages - like Google Adsense - are aware of the fact that some readers block advertisements. Oftentimes, methods for removing advertisements from view alter the structure of a page, in turn, changing the layout. For some websites or blogs, this does not pose a problem. For websites created to present both content and advertisements in harmony, removing ad elements may have a negative impact on a pages layout.

Ultimately, the author controls layout

Contrary to what some readers [would like to] believe, the author ultimately controls how content is displayed on a site. The author also reserves the right to present advertisements [hopefully, in a tasteful manner]. The argument for both sides of the fence is lengthy and one which this post does not address. What we will address is the use of simple HTML/CSS to designate advertisement elements. Areas of a page which do not collapse are disappear from view using rudimentary adblocking tools like Firefox’s Adblock extension.

Prevent the adblock "shift"

When users remove standard advertisement scripts from view, the ad element collapses moving surrounding elements. In order to control the layout of a page from shifting, I wrap the ad script with a div which I then apply a fixed width & height to using CSS. I also add a "title" to the div to let readers with adblocking enabled know what is missing.

The corresponding HTML for a 468×60 text link Google Banner might look like:

<div id="adsense_468">
<p id="adtitle">Advertisement</p>
<center>...INSERT ADSENSE CODE...</center>
</div>

With a few lines of CSS, add a fixed width & height to the #adsense_468. Similar to the advertisement presentation for the Grid Focus, we’ll also add a 1px border and use position: absolute; to move the title to the top right corner.

#adsense_468 { width: 495px; height: 70px; border: 1px solid #BBB; padding-top: 5px; position: relative; }
#adsense_468 #adtitle { font-size: 11px; position: absolute; display: block; background: #FFF; padding:0 3px; top: -8px; right: 12px; }

The question now is, who out there is adblocking? Come clean!

Take Care of your Hosting Issues

Worried that you are paying to much for your hosting? Get the best website hosting available. They can also take care of your domain registration needs, making it easier than ever to host a site without breaking the bank.