Centering the ads with ? Not easy to center them!

1 post / 0 new
Centering the ads with ? Not easy to center them! is a service which takes 25% of whatever price you set for your ads, in exchange they handle everyhting, all the boring parts and you get to be displayed in their marketplace, so that's better to find advertisers than relying on your visitors only to find your ad spot and then pay you..

For Publishers:
We help publishers make more money, sell more ads, and save precious time.
We give you access to thousands of advertisers through our ad marketplace, and make selling and serving ads more profitable. If you don't want to deal with anything, you can relax and let us take control with managed services.

Last month, we helped our publishers sell ads to over 6,500 advertisers and serve ads to over 750 Million Visitors.

For Advertisers:
We help advertisers buy quality, guaranteed inventory directly from publishers. No middle man. Fully Transparent. Self-serve.

So anyway, I'm not going to present you that's not the point of this page.

In fact I have struggled (well being lazy, I never really put myself into solving it for years) to find a way to display the ads aligned horizontally and CENTERED.. It's not a big deal, is it? Well on BuySellAds it is a big deal!

Try it yourself and you'll see, well I guess if you're on this page it means Google sent you while you were looking for how to center the ads from BuySellAds, am I wrong?

Finally I've have found the most simple way I think.. Maybe there is a simpler one, but in this case you should have talked about it and written a post somewhere, because I was unable to find anything to do what I wanted. So in case I forget one day and I look again on Google I hope to find my own post at least to help me!

OK, so in BuySellAds you go to your inventory with the list of all your ad zones, then you click on AD CODE & DISPLAY STYLES..

Then at the bottom you have 4 fields about CSS. In the first one replace the ligne:
and at the end of the line, add:

Don't try to remove the float:left; because it will come back to haunt you, or maybe by the time you read this BuySellAds will have fixed this bug, but it has been there for a long time and even one time I asked their support and they told me to add float:right; instead of modifying the existing one.. when I wanted to do something else..

About the display:inline-table; I came up with this one after trying display:inline; which makes the "Advertise Here" text become just a small box at the bottom right of the ads. While display:inline-block; makes the "Advertise Here" look good, but then it is also centered in height at the bottom right of the ads. While display:inline-table; does the job perfectly, so I didn't try no more, perfect is good enough in my book!

So anyway, after in the code they give you to put on your site for this zone it looks like this:
<!-- Zone Code -->
<div id="bsap_1257621" class="bsarocks bsap_d93c6e43eeed5f0a1ad46b3a28a67c45"></div>
<!-- End Zone Code -->

To center the thing, I do it the simple way, very crude and always have worked to center DIVs, simply adding align="center", so now it looks like this..
<!-- Zone Code -->
<div id="bsap_1257621" class="bsarocks bsap_d93c6e43eeed5f0a1ad46b3a28a67c45" align="center"></div>
<!-- End Zone Code -->

And that's it! It works perfectly.. Easy once you know it!

Personally since I've put the zone at the top of my site, there was a small problem it is that before the javascript loads and execute, the space is small in height, but when it finally loads, the ads push the rest of the webpage down about 125pixels..
So I wanted to set the minimum height of the div to 125 so it looks empty at first and then the ads appear, if it pushes a the page below because the size is a little more than 125 at least it is not as noticeable as a 125 pixels jump!

So finally the code looks like this:
<!-- Zone Code -->
<div id="bsap_1257621" class="bsarocks bsap_d93c6e43eeed5f0a1ad46b3a28a67c45" align="center" style="min-height: 125px; height:auto !important; height: 125px;"></div>
<!-- End Zone Code -->

Why it is style="min-height: 125px; height:auto !important; height: 125px;" and not simply style="min-height: 125px;" ? Well because while looking for the min-height css style before writing it I've read that there was some issues with some browsers, nothing new here.. So I've put the hacks some people were offering, I didn't even tried without the hack, because I am not passionate about testing browsers differences and see if currently they behave properly or not.. The hack was talked about a few years ago, but I guess it doesn't hurt in modern browsers either..

So here you have it, how to center ads in BuySellAds while keeping them looking good and in control!

Your feedback is important to us! We invite all our readers to share with us their views and comments about this page.

The content of this field is kept private and will not be shown publicly.
Please answer the question, even if it looks like a very stupid question, it filters out most of the spam.