homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Google / Google AdSense
Forum Library, Charter, Moderators: incrediBILL & jatar k & martinibuster

Google AdSense Forum

    
Display skyscraper without tables
Retro-fit skyscraper ads on table-free website design.
robho

10+ Year Member



 
Msg#: 282 posted 10:58 pm on Aug 2, 2003 (gmt 0)

I've recently added Adsense to a couple of my older sites.

Displaying the banner on top is fine, but I can't find a simple way to use the skyscraper ad instead (I don't want to use tables, existing pages are plain simple html).

One option is to wrap the google code in
<div style='float:right'>
- this works fine for a browser with CSS (if the ad appears before the main content in html) but on older browsers the skyscraper left aligns and pushes the content down.

I don't really understand enough about CSS to work out something better, does anybody have any suggestions, CSS or not?

Apologies if this is a FAQ, couldn't find anything in a search and I'm new here... Thanks BTW for the really useful and informative conversations, I've learnt a lot already.

Rob

 

vincevincevince

WebmasterWorld Senior Member vincevincevince us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 282 posted 11:11 pm on Aug 2, 2003 (gmt 0)

put that float div at the end of your content - then older browsers will display the skyscraper at the end of the page - not ideal, but at least they see the content

robho

10+ Year Member



 
Msg#: 282 posted 7:41 pm on Aug 3, 2003 (gmt 0)

put that float div at the end of your content

That unfortunately puts the skyscaper after the text (at least in IE 6 for me).

After a bit more research I think I've answered my own question, so I'll post my solution here in case it helps others - or in case anybody can spot anything wrong with it! I haven't been able to test it in all browers.

I'd have liked to have simply wrapped the Adsense adcode in something, but it looks like I have to wrap the main body of the page as well. Not a problem in my case as the 60,000+ pages affected are all generated from a template.

So, it's a two column css layout, like:


<html><head><title>Existing Page Title</title>

<style type="text/css">
/*<![CDATA[*/
<!--
#sky{
position: absolute;
top: 20px;
right: 20px;
width: 122px;
margin: 0px;
padding: 0px;
height: 600px;
}

#main{
position: relative;
margin: 0px 150px 0px 0px;
}
-->
/*]]>*/
</style>

</head><body>
<div id="main">

CONTENTS OF EXISTING PAGE GO HERE

</div>
<div id="sky">

INSERT ADSENSE SKYSCRAPER HERE

</div>
</body></html>

This is just a simple case, it could be made to look prettier but then I'd have to modify the other pages on the site to look similar... Note there are no tables, sidebars or anything on the existing pages, just headers and plain paragraphs.

So this solution adds a couple of style definitions (could be inline instead), wraps the existing page in the "main" class (left variable width) and puts the adsense skyscaper in the fixed-width right column "sky".

In the rare case that a browser has no stylesheets (or overrides them) and they can also do javascript and iframes, the ads appear after the page - not great but better than pushing the real page content down.

Seems to work for me, so far. Note that I prefer this to tables because the main page contents (which are very fast and light) display before the ads slowly load in their own column. Might reduce the clickthrough but makes the site more useable, which comes first.

Again I would appreciate it if anybody spots where this solution won't work!

Rob

aroach

10+ Year Member



 
Msg#: 282 posted 2:06 am on Aug 4, 2003 (gmt 0)

I have my Adsense skyscraper in a tableless layout.

<body>
<div id="middlecolumn">
<div id="content">
<snip>
</div>
</div>
<div id="rightcolumn">
<div>
<!--#include virtual="/includes/sitesearch.txt" -->
</div>
<div id="adsense"><!--#include virtual="/includes/adsense_vertical.txt" --></div>
</div>
<div id="leftcolumn">
<div id="menu"><!--#include virtual="/includes/navigation.txt" --></div>
</div>
</div>

All div's are positioned with CSS. I can post the CSS if anyone wants me to but I'll need a little time to clip out the irrelevant parts.

RobbieD

10+ Year Member



 
Msg#: 282 posted 3:37 am on Aug 4, 2003 (gmt 0)

Using this...

<body>
<div id="middlecolumn">
<div id="content">
<snip>
</div>
</div>
<div id="rightcolumn">
<div>
<!--#include virtual="/includes/sitesearch.txt" -->
</div>
<div id="adsense"><!--#include virtual="/includes/adsense_vertical.txt" --></div>
</div>
<div id="leftcolumn">
<div id="menu"><!--#include virtual="/includes/navigation.txt" --></div>
</div>
</div>

how do you do it with a dynamic page? The includes?

saoi_jp

10+ Year Member



 
Msg#: 282 posted 9:49 am on Aug 4, 2003 (gmt 0)

You're concerned about older browsers. In case you find that your solution doesn't work out, you may want to try this (a lot of older browsers would support this):

Just under the top line of the page in your code (where you want adsense to start), put the ad inside a tall table and align it to the left-hand side of the page.

In other words:

<table align="right" width="120" border="0"><tr><td>
<script language="JavaScript">
put your adsense here
</script>
</td></tr></table>

Edited to add:
This adds a table to your design, but your title says "table-free" -- if what you mean is just "a page that has no tables" than this works. If you mean that you're against tables, then of course this solution isn't right for you.

robho

10+ Year Member



 
Msg#: 282 posted 7:44 pm on Aug 4, 2003 (gmt 0)

put the ad inside a tall table and align it

Thanks Saoi for the excellent suggestion. I was having trouble with the css solution with varying length pages and a wide footer that was sometimes sliding under the ad tower.

Your solution works great without any css. For text and screenreader browsers the ad will still appear first, although I consider it unlikely they can't handle tables but still support javascript and iframe to show the ad, so that's OK. I've added a table summary to help screenreaders skip.

That use of tables is fine, since it the main page isn't inside the table, doesn't slow down the load of the main page text.

The <script language> tag isn't needed (already a <script type="text/javascript"> in the adcode) and causes javascript errors (in MSIE 6), so it's actually even simpler:

<table align="right" width="120" border="0" summary="advertising">
<tr><td>
put your adsense here
</td></tr></table>

So if a site currently displays a banner on the top of a non-table page, this could simply replace it, in the same place in the html, to show the skyscraper adsense ad, right aligned. Very nice. Thanks again.

Rob

saoi_jp

10+ Year Member



 
Msg#: 282 posted 3:20 am on Aug 5, 2003 (gmt 0)

Glad it works for you.
<edit to add>'course I should have written "align it to the right-hand side", but the code does that.</edit>

re: this quote:
The <script language> tag isn't needed (already a <script type="text/javascript"> in the adcode) and causes javascript errors (in MSIE 6),

I included that because that was part of my AdSense-generated code. I remember there was discussion about the code not meeting html standards, but TOS forbid changing it.

I revisited the code section of the AdSense site, and see the code has changed; now it's

<script type="text/javascript">

I'll update my pages. Thanks for pointing that out.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Google / Google AdSense
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