Изображение «Отключить рекламный блок» под объявлением

Question

Я пытаюсь сделать так, чтобы, если у вас есть рекламный блок, изображение будет отображаться за рекламным баннером на моем веб-сайте, в котором говорится: «Пожалуйста, подумайте об отключении adblock».

Как бы это ни отображалось, как коробка с рамкой.

This is the box.

Вот мой код.

.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; 

}

А вот мой HTML.

<div class="banner"> 
    <center> 

    <!-- Some Ad Content Here --> 

    </center> 
</div> 

Answer 1

Вы также можете достичь этого с помощью JavaScript.

<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> 

Затем оберните свои объявления с <div class="adsense"></div> изменить это на то, что вы хотите

Answer 2

Попробуйте использовать этот CSS вместо:

.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>