I'm trying to put my adsense block in the header of my template. It is suppose to be on the right, but for some reason, it is "underneath" my site's tagline.

I've tried editing it, moving the code around, but to no avail.

How do I get it so it is in the right corner at the top? (aligned opposite of my logo, but right above my sidebar) My code is in the header.php file.

The link is for my lightning shock site in my sig

Use a CSS div, with an absolute position.

I tried that, but I'm not even sure if I did that right, here is some of my header.php code:

<div id="header">
    <h1><a href="<?php echo get_option('home'); ?>/"><img src="http://www.lightningshock.com/wp-content/themes/royale-10/images/widelogo.png"></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>

<div align="right">
<script type="text/javascript"><!--
google_ad_client = "pub-1372766692340749";
//200x200, created 12/20/07
google_ad_slot = "0862471633";
google_ad_width = 200;
google_ad_height = 200;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


    <ul class="pages">
        <li class="page_item"><a href="<?php echo get_option('home'); ?>/"><?php _e('Home','royale'); ?></a></li>
        <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&exclude='.get_option('royale_exclude_pages')); ?>
    </ul>
</div>

Maybe I should have posted this in the CSS forum......... I'll request a move.

Hi -
A link to your actual site would be helpful for diagnosis, since there may be parent or adjacent elements that are influencing the design.

- Scott

Originally Posted by OSWebMaster

Hi -
A link to your actual site would be helpful for diagnosis, since there may be parent or adjacent elements that are influencing the design.

Read this line

Originally Posted by jamestl2

The link is for my lightning shock site in my sig

PS = I removed the adsense code for now, but that's where it was posted before, it was basically covering up my archives widget. If you have the proper code for it, or wanted to see it visually, let me know and I'll reinser it to where it was .

If anyone has any ideas, I'll still be open to any suggestions.

James the code you have is actually fine, but you have to make one minor change. Float the div with the AdSense block like you have, but move that div above the code for your logo and tag line.

When you float something to the right it's top will align with the bottom of whatever came before it. With how you have it set it should display all the way to the right, but below the tag line.

If you move the html above the logo it will be aligned with the top of the header and be pulled out of the document flow so your logo and tag line should still have room to sit where they are.

If you find the ad block a little too high after moving the html you probably just need to add a little margin to the top.

I believe I already tried that:

<div align="right">
<script type="text/javascript"><!--
google_ad_client = "pub-1372766692340749";
//200x200, created 12/20/07
google_ad_slot = "0862471633";
google_ad_width = 200;
google_ad_height = 200;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div id="header">
    <h1><a href="<?php echo get_option('home'); ?>/"><img src="http://www.lightningshock.com/wp-content/themes/royale-10/images/widelogo.png"></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>


    <ul class="pages">
        <li class="page_item"><a href="<?php echo get_option('home'); ?>/"><?php _e('Home','royale'); ?></a></li>

And I also tried putting it right after the <div id="header"> tag, but that produced weird results too.

The way my site was with that code is how it looks in this image:
http://www.jameslewitzke.com/images/csshead.bmp

Keep the AdSense code inside the header div, but before the h1 tag

<div id="header">
 <div align="right">
 <script type="text/javascript"><!--
  google_ad_client = "pub-1372766692340749";
  //200x200, created 12/20/07
  google_ad_slot = "0862471633";
  google_ad_width = 200;
  google_ad_height = 200;
  //--></script>
  <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
 </div>

 <h1><a href="<?php echo get_option('home'); ?>/"><img src="http://www.lightningshock.com/wp-content/themes/royale-10/images/widelogo.png"></a></h1>
 <div class="description"><?php bloginfo('description'); ?></div>

I did that too, but now the logo is "pushed down". Here's what it looks like:
http://www.jameslewitzke.com/images/csshead2.bmp

And the adsense is all the way to the right, I wanted it aligned with the sidebar, to give it the illusion that it continued above the right sidebar, in the header

Take align="right" out of the div for the adsense code, and either give it a class or style it inline, see what that does.

It looks like the h1 is stretching 100% across the header. You'll need to give it a width to match the image, though in all honestly you shouldn't use an h1 there in the first place. I think that's a WP default thing, but it's not a good thing.

Just remove the h1 from around the image. You may end up needing to add a little margin around the image to give it back what it's losing from the h1. I think the h1 gets 20px top and bottom by default so that's probably what you need to give to the image.

You can actually put the adsense div inside the h1 and it will probably work that way too, but again that h1 shouldn't really be there.

@Tim, it might work if I try that, but I'd have no idea what tags to use, I'm no coding expert.

@Steven, I tried putting it inside the h1 tag, and removing the h1 tag, but both produce the same result as the second image. So, what % should I shrink the h1 down to?

Are you sure you took out the h1 at the same time the AdSense code was before the image? I really think the h1 shouldn't be there.

But if you want to keep it try setting the width to whatever width the image is or maybe a couple of px wider. You might want to give that h1 an id or class and set the width only on the h1 with that id or class. Otherwise any other h1 you use is going to be that same width.

Here is the code I tried that produced the same result:

<div id="header">

<div align="right">
<script type="text/javascript"><!--
google_ad_client = "pub-1372766692340749";
//200x200, created 12/20/07
google_ad_slot = "0862471633";
google_ad_width = 200;
google_ad_height = 200;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

    <a href="<?php echo get_option('home'); ?>/"><img src="http://www.lightningshock.com/wp-content/themes/royale-10/images/widelogo.png"></a>
<div class="description"><?php bloginfo('description'); ?></div>

And here is the h1 code in my style.css.php page (I think this is where I make the change, but I'm unsure):

/* End Structure */


/* Begin Headers */
h1 { padding-top: 15px; }

h2.pagetitle {
  margin-top: 30px;
  text-align: center;

If you just take the align="right" out of the adsense div (which I think is deprecated anyway) you may not have to do anything. I'm sure one of us can tell you what to do to position it, but I think it'll just fall into place with the document flow without any.

Taking align="right" out of the div gives me this result:
http://www.jameslewitzke.com/images/csshead3.bmp

Yeah, I see that. I'm looking at the CSS now. Part of it has to do with one of your other divs being vertically aligned to top. I'm tinkering with it now and will post back shortly.

Tim nice catch. I had it that the div was being floated, which I guess is why what I was saying wasn't working. Sorry James. My bad. Try this. It's similar to what I have above but removing h1 and then replacing align="right" with id="adsense"

<div id="header">
 <div id="adsense">
 <script type="text/javascript"><!--
  google_ad_client = "pub-1372766692340749";
  //200x200, created 12/20/07
  google_ad_slot = "0862471633";
  google_ad_width = 200;
  google_ad_height = 200;
  //--></script>
  <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
 </div>

 <a href="<?php echo get_option('home'); ?>/"><img src="http://www.lightningshock.com/wp-content/themes/royale-10/images/widelogo.png"></a>
 <div class="description"><?php bloginfo('description'); ?></div>

and then add this line to your css

div#adsense {float: right}

That's what I was thinking I was having you do before. I think it will work, but I'll keep checking in till we get it working.