Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Using CSS to place graphic OVER Google Ads (iframe)

Wondering How To Accomplish Graphics on Google Ads



12:26 am on Jun 28, 2008 (gmt 0)

5+ Year Member

I am using stylish to create a userstyle for a site I use... and on top of the page they have a google ad, and I want to use this table and/or iframe to create a graphic that sets over top of it.
(Yes, I understand about the ethics of covering up ads that websites use to make money... however, I am a regular donor to this website and never click google ads anyway)
Here is how the google ads look in html.

<table id="table54" border="0" cellpadding="3" cellspacing="0" height="23" width="100%">
<td align="center" bgcolor="#ffffff">
<script type="text/javascript"><!--
google_ad_client = "xx";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
//2006-11-11: Cyber Nations
google_ad_channel = "6616297596";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script><iframe name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-

420&amp;u_his=5&amp;u_java=true&amp;u_nplug=20&amp;u_nmime=97" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="60" scrolling="no" width="468"></iframe>


I have tried display: none; on the iframe and then giving the table a background image... i tried giving the iframe a .001 opacity and a background image...

It just doesn't seem possible to make a graphic go ontop of an iframe

[edited by: engine at 8:13 am (utc) on June 28, 2008]
[edit reason] scrolling and pub id removed [/edit]


1:12 am on Jun 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Why not just download the adblock plus firefox extension?


1:25 am on Jun 28, 2008 (gmt 0)

5+ Year Member

Because this is going to be a stylish addon for people in my alliance... and blocking it would be fine... but i was also looking for a place to put a graphic... and just so happens that, that is the only spot for one using only CSS


1:43 am on Jun 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I wonder if it might be easier to do with a Greasemonkey script. Replace the Google ad block with your image block. If your group is into content replacement for kicks, then probably a lot of them have Greasemonkey too, so that might be an option. Just a thought. It's a pretty potent app, and there are probably already scripts out there where you would just have to add in the replacement content.


8:21 am on Jun 28, 2008 (gmt 0)

5+ Year Member

Why not put the table in a div, put your image in a second div, then float the image div on top of the table div?


[edited by: engine at 8:32 am (utc) on June 28, 2008]
[edit reason] No urls, thanks, see WebmasterWorld TOS agreement [/edit]


9:24 am on Jun 28, 2008 (gmt 0)

10+ Year Member

I've no idea what stylish is, presume like a user style sheet.
Couple of ways to think about
NOt sure if this works with Gads but with the test iframe it did.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/*This would do what you want in all modern non IE browsers*/
#table54 tr {display:none;}
#table54 tr + tr {display:table-row;}
#table54 tr+tr td {padding-top:180px; background:url(banner.jpg) no-repeat;}
#table54 tr+tr+tr td {background:transparent; padding-top:0;}

/* should work in any browser. Find another tag on page that has an id and can be used
#footer {position:absolute; top:0; left:0; width:100%; height:280px; z-index:5000;
background:url(banner.jpg) no-repeat;}
#footer p {display:none;}*/

<table id="table54" border="0" cellpadding="3" cellspacing="0" height="23" width="100%">
<td><iframe height="180px;" src="test.html"></iframe></td>
<td>content 2</td>
<td>content 3</td>
<td>Content 4</td>

<div id="footer"><p>foo blobby booo bar some other tag</p></div>


4:29 am on Jun 30, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Before some webmaster thinks it's cool to lay things over adsense ads: it's against the Google Adsense ToS for the web site to do so (this was about user styles, something a webmaster has no control over).

Featured Threads

Hot Threads This Week

Hot Threads This Month