CODEWITHSUNDEEP
htmlcss
user5563999
user5563999

Reputation:

Showing "Disable Adblock" image under ad

I am trying to make it so that if you have adblock enabled an image will show behind the ad banner on my website which says "Please consider disabling adblock".

How ever it just shows up as a box with border.

This is the box.

Here is my code.

.banner {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding: 5px 0px;
width: 750px;
max-width: 100%;
padding: 10px;
height: 90x;
min-height: 90px;
/* Disable Adblock Banner. */
background-image: url("http://i.imgur.com/dUEUcJY.png");
border: 1px solid #191919;

}

And here is my HTML.

<div class="banner">
  <center>

    <!-- Some Ad Content Here -->

  </center>
</div>

Upvotes: 3

Views: 186

Answers (2)

Slacks.
Slacks.

Reputation: 199

You can also use JavaScript to achieve this.

<script>



$(document).ready(function(){

    setTimeout("checkAds();", 1000);

});



function checkAds() {

    if ($(".adsense").height() == "0") {

            $(".adsense").after("<div style='text-align: center; padding:     10px;'>Looks like you've enabled <strong>AdBlock</strong>. It's cool, we get it. Ads can be annoying for sure, but they help keep the free music flowing.</div>");

    }

}

</script>

Then wrap your ads with <div class="adsense"></div> change this to what ever you want

Upvotes: 0

Rapha&#235;l Vig&#233;e
Rapha&#235;l Vig&#233;e

Reputation: 2045

Try using this CSS instead :

.banner {
  margin-right: auto;
  margin-left: auto;
  padding: 5px 0px;
  width: 750px;
  max-width: 100%;
  padding: 0;
  height: 90x;
  min-height: 90px;
  background-image: url("http://i.imgur.com/dUEUcJY.png");
}
<div class="banner"></div>

Upvotes: 3

Related Questions