Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with basic Google Add overlay

    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:
    Code:
    <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/7...001copyvl4.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

  • #2
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone help?

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For such a minor problem, you think there would be a quick reply.

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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
    Code:
    #gads {
    background:url(http://img404.imageshack.us/img404/7841/header001copyvl4.jpg);
    width:878px;
    height:90px;
    }
    Like I said...it worked for me.

    Mike

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,459
    Thanks
    0
    Thanked 632 Times in 622 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, how can I set the background to a plain color?

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    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)

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Kikko View Post
    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 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:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">

  • #10
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    Your page is rendered in quirks mode 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:
    Code:
    <!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?

  • #11
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Kikko View Post
    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.

  • #12
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..?)
    Last edited by Kikko; 07-04-2007 at 03:09 AM.

  • #13
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Yeah, why don't you try that, and see what happens...

    Code:
    <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.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #14
    New Coder
    Join Date
    Jul 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BWiz View Post
    Yeah, why don't you try that, and see what happens...

    Code:
    <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?

  • #15
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Can you show your code?
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •