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

Home / Forums Index / Google / Google AdSense
Forum Library, Charter, Moderators: incrediBILL & jatar k & martinibuster

Google AdSense Forum

    
AdSense First Ad Unit
adsense, ad, html, div
webstuck

5+ Year Member



 
Msg#: 4578599 posted 1:49 pm on May 28, 2013 (gmt 0)

I am trying to follow the advice at https://support.google.com/adsense/answer/187769.

My best CTR ad is my final AdSense ad. The ad is below each page's content so I can't use absolute positioning because some pages have longer content than others. How can I tell this ad to be treated as my first AdSense ad and to appear at a certain place on each of my web pages like in a <div> or something?

Thanks!

 

swa66

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



 
Msg#: 4578599 posted 2:04 pm on May 28, 2013 (gmt 0)

...is below each page's content so I can't use absolute positioning.


Sure you can use absolute positioning to position something near the bottom of a parent. Piece of cake actually:
- get the parent to stretch with the content (use clearfix if you have only content that's not in the flow (like .e.g floats); make sure there's padding near the bottom large enough for the ad, and give the parent position (can be done with e.g. position:relative on the parent).
- give the child position:absolute and set bottom:0 : it'll align its bottom to the bottom of the nearest parent that has position.

That's it.

Nodeju



 
Msg#: 4578599 posted 6:06 pm on May 28, 2013 (gmt 0)

here's what you need to do:

First, you will need to place a DIV tag right below the BODY tag in order to let the browsers know which ad unit goes first in the source code HTML. Note that it doesn't mean that this ad unit will show up first on the page. Here is the code:

<div id=”ad1">
Insert your ad code here
</div>

Next, insert the CSS code below into the style sheet of your website. Since all sites are different, we recommend that you test attributes (left, right, top, bottom) in order to place your ad unit correctly. Make sure to adjust height/width depending on the ad format.

#ad1 {
width: 468px;
height: 60px;
position: absolute;
left: 140px;
right: 0px;
bottom: 0px;
top: 350px;
}

(adjust this style sheet code to match your ad size)

If you don't use style sheets, you will need to insert the above code into DIV tags between the HEAD tags in the HTML source code.

<style type=”text/css”>
Insert above css code here
</style>

webstuck

5+ Year Member



 
Msg#: 4578599 posted 7:16 am on Jun 5, 2013 (gmt 0)

swa66,

I think I have a basic understanding of what you are saying but could you give me some example HTML and CSS code for me to study? Thank you so much!

swa66

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



 
Msg#: 4578599 posted 11:18 am on Jun 5, 2013 (gmt 0)

Guess this belong in the CSS forum, but here it goes:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
// just a reset not critical for the example
* {
border:0;
margin:0;
padding:0;
}
//just to make sure we see the difference between them all
html {
background-color: red;
}
// this is the parent
body {
// just to make sure we see that it's stretched for its content
background-color: orange;
// critical for the example: it must have position
position: relative;
// critical for the example: make room for the ad
padding-bottom: 92px;
}
#ad {
// just so we can see it
background-color: yellow;
//critical for the example
position: absolute;
// just some size
width:728px;
height:92px;
// critical for the example: align the bottom of this with its parent
bottom:0;
}
</style>
</head>
<body>
<div id="ad">
<p>ad goes here</p>
</div>
<p>change me with some long text or other content that stays in the flow</p>
</body>
</html>


Note: if you use content that does not stay in the flow, you need to use another way to stretch the parent (<body> in this example) so that it does stretch to encompass it's children. (search for clearfix to get ideas)

I didn't test it in IE - old versions of IE suck.

webstuck

5+ Year Member



 
Msg#: 4578599 posted 5:24 pm on Jun 5, 2013 (gmt 0)

I tried your code in Firefox but it still displayed the ad at the top of the page. Not sure what I am doing wrong.

swa66

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



 
Msg#: 4578599 posted 7:00 pm on Jun 5, 2013 (gmt 0)

Well as such (unmodified) it works in FF, so see what you changed: that's what made it stop working :)

swa66

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



 
Msg#: 4578599 posted 7:21 pm on Jun 5, 2013 (gmt 0)

Maybe I just misunderstood what you wanted.
maybe this is more what you seek:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}
html {
background-color: red;
// target for the min-height of body: this makes it as high as the viewport (needs to be explicit)
height: 100%;
}
body {
background-color: orange;
position: relative;
min-height: 100%;
// center it on the page
margin: 0 auto;
width: 1024px;
}
#wrapper {
//critical to the example, reserved space for the space moved to the wrapper instead of the body
padding-bottom: 92px;
background-color: green;
}
#ad {
background-color: yellow;
position: absolute;
width:728px;
height:92px;
bottom:0;
// center trick for absolute positioned elements: move edge to middle and then back for half of the width
margin-left: -364px;
left: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="ad">
<p>ad goes here</p>
</div>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
<p>change me with some long text or other content that stays in the flow</p>
</div>
</body>
</html>


To put the ad (regardless of code order) near the bottom of the viewport even if the content isn;t enough to fill the screen, we add a wrapper: the wrapper holds the content and the reserved space for the ad, but it does not have position (this is critical for it to work). The wrapper (green) must enclose all content in it's flow (so use a clearfix if you need to)

We give the body a minimum of 100% hight.
Adn the ad continues to position itself on the body which now has 2 options for it's height: 100% minimum derived from it's parent (html), wich is set to the same height as the viewport, or stretched by the wrapper if there's a lot of content.

If it's still not what you seek, you'll have to be more specific ...

webstuck

5+ Year Member



 
Msg#: 4578599 posted 7:44 pm on Jun 5, 2013 (gmt 0)

I have tried the code with just your ad text and with my ad code and both display at the top of the page. Here is what I am using:

<!DOCTYPE html>
<html>
<head>
<title>Google AdSense First Ad Test</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
// just a reset not critical for the example
* {
border:0;
margin:0;
padding:0;
}
//just to make sure we see the difference between them all
html {
background-color: red;
}
// this is the parent
body {
// just to make sure we see that it's stretched for its content
background-color: orange;
// critical for the example: it must have position
position: relative;
// critical for the example: make room for the ad
padding-bottom: 92px;
}
#ad {
// just so we can see it
background-color: yellow;
//critical for the example
position: absolute;
// just some size
width:728px;
height:92px;
// critical for the example: align the bottom of this with its parent
bottom:0;
}
</style>
</head>

<body>
<div id="ad">
<p>ad goes here</p>
</div>
<p>change me with some long text or other content that stays in the flow</p>
</body>
</html>

webstuck

5+ Year Member



 
Msg#: 4578599 posted 7:51 pm on Jun 5, 2013 (gmt 0)

Sorry I posted my message before seeing your newest message. Let me look at that and get back to you. Thank you very much!

webstuck

5+ Year Member



 
Msg#: 4578599 posted 8:01 pm on Jun 5, 2013 (gmt 0)

Yeah, I think we are having a slight misunderstanding. Let me try again. Here is how I want the page to look:

(load ad here at top of page right after <body>)

content content content content content content
content content content content content content
content content content content content content
content content content content content content
content content content content content content

(Display ad here: centered under the content)

swa66

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



 
Msg#: 4578599 posted 10:31 pm on Jun 5, 2013 (gmt 0)

Oh, I'm rusty...

I added the comments in the code I posted after I tested it.
And obviously that's the wrong way to code comments for CSS.

Delete the lines that start with //
Or change the comments to /* .... */

Sorry!

webstuck

5+ Year Member



 
Msg#: 4578599 posted 2:49 pm on Jun 9, 2013 (gmt 0)

It took a bit but I got it working! Thank you so much for all your help. One other question though, is there a way to load the ad off-screen and then position it?

webstuck

5+ Year Member



 
Msg#: 4578599 posted 5:10 pm on Jun 11, 2013 (gmt 0)

Any ideas?

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