...

View Full Version : Help with basic Google Add overlay



Kikko
07-03-2007, 02:51 AM
Hey guys, I am looking to have a basic add overlay and I am running into a bit of trouble. My website, http://www.austinlittle.net, is required to have ads at the top by the man who offered the website to me. I made a simple gradient filler to use as a background image for the header so it wouldn't break up the page so much, but I can't get the darn thing behind the adds or in the center.

The code for the google ad is:

<script type="text/javascript"><!--
google_ad_client = "pub-9935040553652035";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The image is located at:
http://img404.imageshack.us/img404/7841/header001copyvl4.jpg

All I want to do is have the image at the top center of the page with the google ad placed right on top of it. I am sure this is quite simple but I am just missing something. Thanks so much if you can help :)

Kikko
07-03-2007, 03:46 AM
Can anyone help?

Kikko
07-03-2007, 05:54 AM
For such a minor problem, you think there would be a quick reply.

Muckiem14
07-03-2007, 06:42 AM
Hey. Cool page. Im no expert but I tried this code and it worked. Except, the backgound doesnt line up on the left side properly. It lines up on the right side just fine. I dont know what the problem is there. But check out this code. It centers your gradient and lays the google ads on top. Basically, I made a new div inside the wrapper called gads. Then I added div align center. Then put the google script inside and closed it. Then with css I added the gradient as a background image also giving it a width and height. I hope this helps you a little. I hope im not telling you something wrong here.
html

<div id="gads"><div align="center"><script type="text/javascript"><!--
google_ad_client = "pub-9935040553652035";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>

css

#gads {
background:url(http://img404.imageshack.us/img404/7841/header001copyvl4.jpg);
width:878px;
height:90px;
}

Like I said...it worked for me.

Mike

Kikko
07-03-2007, 07:31 AM
Hey, thanks for the help!

This thing goes completely berserk in Internet Explorer... In Firefox, using your code, its aligned to the left (but the ad is on top!). For some reason, in IE, the page is aligned to the left. UGH!

EDIT: It's something to do with your code. The page is supposed to aligned to the center. I am looking into it.

felgall
07-03-2007, 08:30 AM
The ad displays in its own iframe so the background it gets will be that assigned by the ad code. You can't set it to anything other than a plain colour.

Kikko
07-04-2007, 01:31 AM
Alright, how can I set the background to a plain color?

Kikko
07-04-2007, 02:30 AM
Alright, so here is the current problem. In Firefox, the ad is centered along with the page (as it should be).

In Internet Explorer, the page is aligned to the left while the add is centered.
What's up?

Here is the code:


<html>
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-9935040553652035";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php

bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave

this for stats please -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"

media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php

bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url');

?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php

bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory');

?>/script/column.js"></script>
<script type="text/javascript">
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight("container");
var lHeight = xHeight("sidebar");
var rHeight = xHeight("inside_container2");

// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));

// Assign maximum height to all columns
xHeight("container", maxHeight);
xHeight("sidebar", maxHeight);
xHeight("inside_container2", maxHeight);

// Show the footer
xShow("footer");
}

window.onload = function()
{
xAddEventListener(window, "resize",
adjustLayout, false);
adjustLayout();
}
</script>

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header1"><h1 class="header_link"><a href="<?php bloginfo('url'); ?>"

class="header_link">
<?php bloginfo('name'); ?>
</a></h1>
<span class="descript">
<?php bloginfo('description');?>
</span></div>
<div id="header_nav">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div
></div>


(With the add being at the top)

koyama
07-04-2007, 03:45 AM
Alright, so here is the current problem. In Firefox, the ad is centered along with the page (as it should be).

In Internet Explorer, the page is aligned to the left while the add is centered.
What's up?
Your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html) because it is lacking a document type.

And in IE quirks mode auto margins are not working. This document type may be the right one for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

Kikko
07-04-2007, 03:53 AM
Your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html) because it is lacking a document type.

And in IE quirks mode auto margins are not working. This document type may be the right one for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

Thank you, this fixed the main image issue... oddly enough.

But the IE problem still remains! I really appreciate your help, by the way.

Any thoughts on getting a background color for the google ad?

koyama
07-04-2007, 04:02 AM
But the IE problem still remains!
Ugh! Nothing must come before the doctype. You currently have two opening <html> tags in your document which makes your document totally invalid. I suggest you fix the errors. Use the validator (http://validator.w3.org/).

Kikko
07-04-2007, 04:06 AM
Heh. Well, I am quite new at this. Will putting the ads after the doctype alleviate the issue? I will try...

EDIT: Yup.

Wow, you guys are amazing :)

My only problem is making a gradient filler (hell, a solid color would be fine at this point).

Why cant I just just create a background image, set tile off, position top center and be happy? (How do I do that..?)

BWiz
07-04-2007, 04:15 AM
Yeah, why don't you try that, and see what happens...



<style type="text/css">
<!--
#addHider
{
background-image: url(...);
background-repeat: no-repeat;
background-position: top center;
}
-->
</style>


not tested ;)

EDIT: did you listen to koyama at all? You're website still has two <html> tags, please validate as sometimes this can solve your woes.

Kikko
07-04-2007, 04:24 AM
Yeah, why don't you try that, and see what happens...



<style type="text/css">
<!--
#addHider
{
background-image: url(...);
background-repeat: no-repeat;
background-position: top center;
}
-->
</style>


not tested ;)

EDIT: did you listen to koyama at all? You're website still has two <html> tags, please validate as sometimes this can solve your woes.

Thank you so much for the response. Helpful members everywhere :) As for the code, no luck. I think I have two backgrounds... Is there a way to overlay it with a z index?

BWiz
07-04-2007, 04:26 AM
Can you show your code?

Kikko
07-04-2007, 04:37 AM
Sure, no problem.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<center>
<script type="text/javascript"><!--
google_ad_client = "pub-9935040553652035";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>





<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php

bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave

this for stats please -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"

media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php

bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url');

?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php

bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory');

?>/script/column.js"></script>
<script type="text/javascript">
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight("container");
var lHeight = xHeight("sidebar");
var rHeight = xHeight("inside_container2");

// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));

// Assign maximum height to all columns
xHeight("container", maxHeight);
xHeight("sidebar", maxHeight);
xHeight("inside_container2", maxHeight);

// Show the footer
xShow("footer");
}

window.onload = function()
{
xAddEventListener(window, "resize",
adjustLayout, false);
adjustLayout();
}
</script>

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header1"><h1 class="header_link"><a href="<?php bloginfo('url'); ?>"

class="header_link">
<?php bloginfo('name'); ?>
</a></h1>
<span class="descript">
<?php bloginfo('description');?>
</span></div>
<div id="header_nav">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div
></div>

BWiz
07-04-2007, 04:39 AM
Sorry, I was unclear, I also meant your CSS


Also, this, I am guessing is the advert, can you explain WHY you must have the advert, only if you're trying to cover it up...




<center>
<script type="text/javascript"><!--
google_ad_client = "pub-9935040553652035";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>

Kikko
07-04-2007, 04:57 AM
I am not trying to hide the advert. I just want to have the ad fit in more with the page design by placing an image underneath it.



body, h1, h2, h3, h4, h5 , h6, blockqoute, p, dd, dl, hr, form{
margin:0;
padding:0;
}

body {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: url(images/webBG.png);
font-size: 12px;
color: #CCCCCC;

vertical-align: top;
}

#wrapper {
padding: 0px;
clear: both;
width: 870px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background: #000000;
overflow: hidden;
border-left: 4px solid #000000;
border-right: 4px solid #000000;
}

#header {
margin: 0px;
padding: 0px;
float: left;
height: 195px;
width: 870px;
background: url(images/main_image.jpg);
background-repeat: no-repeat;
}

#header1{
width: 390px;
height: 165px;
float: left;
padding: 45px 0 0 30px;
}

#header_nav{
width: 450px;
height: 115px;
float: right;
padding: 60px 0 0 0;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
}

#header_nav ul {
text-align: right;
margin: 0 2px 0 0;
padding: 0px;
float: right;
list-style-type: none;
}

#header_nav li {
margin: 0px;
padding: 0px;
float: left;
text-align: right;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-size: 14px;
margin: 0 8px 0 15px;
}

#header_nav li a:link, #header_nav li a:visited {
color: #FFFFFF;
vertical-align:top;
text-align: center;
text-decoration: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#header_nav li a:hover, #header_nav li a:active {

color: #666666;
text-decoration: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom: 2px solid #FF0000;
}

.header_link a:link{
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 38px;
color:#FFFFFF;
text-decoration:none;
}

.header_link a:visited{
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 38px;
color:#FFFFFF;
text-decoration:none;
}

.descript{
color: #B8D297;
}

#container{
width: 610px;
padding: 0px 30px 10px 30px;
margin: 0;
float: left;
overflow: hidden;
}

#sidebar{
width: 200px;
padding: 20px 0 0 0;
margin: 0;
float: right;
}

#footer{
width: 870px;
height: 70px;
float: left;
clear: both;
}

#footer1{
width: 550px;
float: left;
padding: 20px 20px 0 30px;
height: 50px;
background: #000000;
font-size: 11px;
}

#footer2{
width: 230px;
float: right;
padding: 30px 20px 0 20px;
height: 40px;
text-align: center;
background: #000000;
}

#footer a:link{
color: #666666;
font-size: 11px;
text-decoration: none;
}

#footer a:visited{
color: #666666;
font-size: 11px;
text-decoration: none;
}

#footer a:hover{
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
}

.search_box{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px solid #4B4B4B;
color: #FFFFFF;
margin: 0 1px 0 0;
background: #000000;
padding: 3px;
}

.search_button{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border: 1px solid #4B4B4B;
color: #FFFFFF;
margin:0;
background:#000000;
padding: 2px;
}

/* ################################################## */

.post{
padding: 10px 0 10px 0;
}

.post h2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}

.entry{
line-height: 18px;
}

.entry a:link{
text-decoration: underline;
color: #FF0000;
}

.entry a:visited{
text-decoration: underline;
color: #FFFFFF;
}

.entry a:hover{
text-decoration: underline;
color: #FFFFFF;
}


p{
padding:10px 0 0 0;
}

.postmetadata{
width: 610px;
border-bottom:1px solid #333333;
padding: 30px 0 30px 0;
}

.postmetadata a:link{
text-decoration: none;
color: #FF0000;
}

.postmetadata a:visited{
text-decoration: none;
color: #FF0000;
}

.postmetadata a:hover{
text-decoration: none;
color: #FFFFFF;
}

.dateauthor{
font-size: 10px;
color: #999999;
}

.ipost_tag{
width: 450px;
float: left;
}

.ipost_comment{
width: 150px;
text-align: right;
float: right;
}

.navigation{
padding:5px 0 5px 0;
font-size:12px;
font-weight:bold;
line-height:18px;
}

.navigation a:link, .navigation a:visited{
color: #FF0000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-decoration: none;
font-weight: normal;
}

.navigation a:hover{
color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-decoration: none;
font-weight: normal;
}

#nav_left {
width: 300px;
float: left;
}

#nav_right {
width: 269px;
text-align: right;
float: right;
}

ul{
margin: 10px 10px 10px 20px;
padding:0;
}

li{
padding: 0;
margin:0;
}


#sidebar a:link, a:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#666666;
text-decoration: none;
}

#sidebar a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
text-decoration: none;
}

#sidebar ul {
list-style-type: none;
padding: 0;
margin: 0 0 15px 0;
}

#sidebar h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding: 7px 0 7px 15px;
border-left: 0;
border-right: 0;

margin: 0 0 7px 0;

list-style-type: none;
}

#sidebar ul ul li{
list-style-type: square;
color: #666666;
line-height: 24px;
list-style-position:inside;
padding: 0 3px 0 15px;
}


.title_link a:link {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 22px;
color: #FF0000;
text-decoration: none;
margin: 0px;
padding: 0px;
font-weight: normal;
}

.title_link a:visited {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 22px;
color: #FF0000;
text-decoration: none;
margin: 0px;
padding: 0px;
font-weight: normal;
}

.title_link a:hover {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FF0000;
text-decoration: none;
font-size: 22px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

.smallfont{
font-size: 10px;
color: #CCCCCC;
padding: 0;
margin: 0;
}

/* Blockqoute and Image */

blockquote {
margin : 15px 0 0 10px;
padding-left : 20px;
padding-bottom:10px;
padding-right: 5px;
border-left : 5px solid #666666;
background: #000000;

}

blockquote cite {
margin : 3px 0 0 0;
display : block;
}

img {
border : 0;
}

a img {
border : 0;
}

p img {
padding : 0;
max-width : 100%;
}

img.right {
padding : 4px;
margin : 0 0 2px 7px;
display : inline;
}

img.left {
padding : 4px;
margin : 0 7px 2px 0;
display : inline;
}

.right {
float : right;
}

.left {
float : left;
}

img.centered {
display : block;
margin-left : auto;
margin-right : auto;
}

.caption {
margin : 5px;
padding : 5px;
border : 1px solid #e5e5ff;
background : #e5f2ff;
font-size : 90%;
color : black;
}

/* ###### calendar ###### */
table#wp-calendar{
width: 100%;
}

table#wp-calendar a:link{
text-decoration:underline;
}
/* ###### End calendar ###### */


/* ##### Pagination ##### */

.pagination{
padding: 12px 2px 2px 2px;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.pagination a:link, .pagination a:visited{
padding: 0 5px;
border: 1px solid #FF0000;
text-decoration: none;
color: #FFFFFF;
font-weight: normal;
}

.pagination a:hover, .pagination a:active{
border: 1px solid #FF0000;
color: #000;
background-color: #FF0000;
font-weight: normal;
text-decoration: none;
}

* html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
margin-right: 5px;
padding-right: 0;
}

/* ##### End Pagination ##### */

/* Comment Template*/

.comments-template{
margin: 25px 0 0 0;
padding: 0 0 0 0;
}

.comments-template a:link{
color: #FF0000;
text-decoration: none;
}

.comments-template a:visited{
color:#FF0000;
text-decoration: none;
}

.comments-template a:hover{
color:#FFFFFF;
text-decoration: none;
}

.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}

.comments-template ol li{
margin: 10px 0 10px 0;
line-height: 18px;
padding: 0 0 15px 0;
border-bottom: 1px solid #333;
}

.comments-template h2, .comments-template h3{
font-family: Georgia, Sans-serif;
font-size: 16px;
}

.commentmetadata{
font-size: 12px;
color: #FF0000;
}

.comments-template p.nocomments{
padding: 0;
}

.comments-template textarea{
font-family: Arial, Hevletica, Georgia, Sans-seriff;
font-size: 12px;
}

BWiz
07-04-2007, 05:04 AM
I don't think that's possible. I was under the immpression that you were just trying to hide it.

You see, the entire thing is (http://pagead2.googlesyndication.com/pagead/show_ads.js) it's own script, and if you look its code (mind you which is very difficult), I'm guessing this is what sets the ad's background color:


m("bg",b.google_color_bg,g)

Like felgall said, the entire thing is in its own iFrame, and you edit it.

I don't think you may actually change this without changing the script itself, and you can't do that because it isn't yours. Again, this is all hypothetical, I'm welcome to suggestions.

Kikko
07-04-2007, 05:36 AM
Oh no, I am sorry. God-I hate being so unclear. I don't want to change the background image of the ad itself, rather, just have it sit on top of another image the length of my template so it doesnt look so out of place.

BWiz
07-04-2007, 06:34 PM
Again, not possible, the iframe itself has it's own background color, so it isn't transparent. Whatever is behind will be hidden from view.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum