homepage Welcome to WebmasterWorld Guest from 54.166.148.189
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Using CSS to place graphic OVER Google Ads (iframe)
Wondering How To Accomplish Graphics on Google Ads
teamcoltra




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

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%">
<tbody><tr>
<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>
<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-
123456789&amp;dt=123456789&amp;lmt=123456789amp;format=468x60_as&amp;output=html&amp;correlator=123456789&amp;channel=123456789&amp;url=http%3A%2F%2Fwww.example.com

2Fnation_drill_display.asp%3FNation_ID%3D104199&amp;color_bg=FFFFFF&amp;color_text=000000&amp;color
_link=0000FF&amp;color_url=008000&amp;color_border=FFFFFF&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fwww.example.com
%2FallNations_display_alliances.asp%3FAlliance%3DNorth%2520Atlantic%2520Defense%2520Coalition&amp;frm=0&amp;cc=58&amp;ga_vid=1068576172.121
3852545&amp;ga_sid=1214607557&amp;ga_hid=1683515743&amp;ga_fc=true&amp;flash=9.0.124&amp;u_h=768&amp;u_w=1024&amp;u_ah=704&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=-
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>
</td>

</tr>
<tr>
</tr>
</tbody></table>

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]

 

physics




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

Why not just download the adblock plus firefox extension?

teamcoltra




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

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

D_Blackwell




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

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.

jeeploop




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

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?

<snip>

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

appi2




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

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">
<html>
<head>
<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;}*/
</style>
</head>

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

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



swa66




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved