Positioning a Google Ad with HTML

Topic

New Reply

Edited by WyllyWylly to clarify subject line (previously “HTML”) so people would know what the thread was about

Hi,

I want to put a Google ad in the top right corner of my home page.

I’m attaching the HTML in a .TXT file, because the Lounge won’t allow me to post it here.

The problem is, I can’t figure out how to position the ad, using simple HTML, on the same line as the Jonathan Rick pic.

Any ideas? Thanks a lot!

Reply | Quote

Replies

I’m not sure what you mean by “on the same line.” If you want to preserve the centering of the title graphic, one technique is to position the script output on a higher “layer.” Layers can be created by positioning a

. In this example it is positioned in the upper right corner and appears in front of the

---

element because it’s taller than your graphic:

Do you like the effect? (Note: the comment tags were broken for Lounge posting.)

Reply | Quote

You could put the header into a single row table with three cells: left, center and right justified. It’s more fashionable these days to use CSS floating.

Put .floatright { float: right; } into your style section. Then enclose your attached html with a

as in:

I added two line breaks to put the horizontal row below the image.

Reply | Quote

Jscher2000 and Mark,

Thank you both for your prompt replies. I went with Mark’s, simply because the ad didn’t display using jscher2000’s HTML. (Thanks also for making the subject line more descriptive.)

In any event, I have another request, as usual.

As you can see from some browsing, I’ve embedded the Jonathan Rick pic in each Web page. I am now ready to move on from this cumbersome process and use instead what I assume would be frames.

Going from memory, I should do the following, right?
1. Create a new Web page, say index2.htm, with the pic, the Google ad and the

---

.

2. Remove the pic and

---

from each page and in its place create a link to index2.htm.

I greatly appreciate your help!

Reply | Quote

Jon

Personal opinion here. Keep away from frames as much as possible if you can. From my experience they are a pain to control. As you have quite rightly noted different browsers view styles in different ways. What you have done is not wrong. I have have a habit of creating an index page to how I want the look and feel of my site to look and then save that as my template for subsequesnt lower level pages. This would include my body, my banner section (here your Jon Rick pic and link), my primary nav bar, my secondary nav bar and my footer. After I am happy with that I know I can rename my template to subsequent pages and then all my set is identical.

To frame or not to frame

Anyway my worth

Reply | Quote

I agree with Jezza – avoid frames unless you have a burning need for them. Visitors hate them and they are a pain to work with providing little benefit.

What you can do to get around this is to use Server Side Includes (SSI’s) – for example, my personal site uses them extensively. All HTML at http://www.broge.com[/url%5D after the body tag is included in three SSI’s: the header section, the actual page content, and then the footer. In this way I can make a few small edits and they nicely cascade out to all the pages that use that particular code snippet.

I’ve attached a sample page from my site so that you can see how it’s integrated. If you were to view source on the live page, it would look vastly different because the code is rendered in real-time by the includes. Take a look and see what you think.

Reply | Quote

Okay, I’m convinced: I won’t use frames. (The only reason I thought they’d be appropriate was because they were the only thing I knew of to do what I wanted.)

But the way I’m using SSI

1. I copied from index.htm to header.htm everything from “<!DOCTYPE" to "

---

, and added at the bottom closing body and html tags.

2. I removed the div stuff from index and in its place inserted a single line beginning with <!–#include virtual

chops off the header from index.

I can't figure out what I'm doing wrong, so I'm attaching my modified index and header HTM files. (I'll attach index to this post, and header to my next one.)

Thanks so much!

Reply | Quote

That’s so easy! , Mark.

You don’t want to know what I’ve been doing instead!

Reply | Quote

Yer welcome…and yeah, in fact, I do want to know what you were doing instead now that you’ve brought it up…

Reply | Quote

Look at the underlying code of Wagger’s pages aaannndd it it may give you a clue

Trying to be tactful to save a fellow countryman’s blushes

Anyway, it is still an interesting read to find out the antics of Ringo, Paul and the gang

Reply | Quote

I’ve seen a lot worse…! If you were to view the source on most of my static pages it would likely be appalling, but SSI’s make it very componetized and easy to update. They also present some unique challenges, such as context-sensitive navigation.

To boot I also found ‘Suzie’s javascript album’ on WagWeb and decided it would make a nice, lightweight addition to some areas of my personal site where Coppermine would be overkill or hard to customize. I can even use the same images!

Reply | Quote

A word of warning about “Suzie’s javascript album” – it doesn’t work too well in Firefox. The pictures change, but the captions remain the same. It’s already been the cause of some hilarity – see post 532,490.

Reply | Quote

I noticed that, but I was thinking of hacking the code to just display images and navigation. I don’t particularly like the layout because I’m a control freak. Of course, I make all these grand plans and then never do anything about them…!

Reply | Quote

Glad I’m not the only one!

Reply | Quote

Well, ok then … I have my “included” bits as javascript (.js) files with lots of document.write instructions, and call them using tags. It does the job well enough, but SSI will obviously be much easier to use (and presumably faster to load). I do have a few additional SSI questions though – fairly basic stuff:

1. Can SSI cascade?
2. Are there any special rules about including javascript in SSI webpages?
3. Do search engine bots (esp. Google) recognise SSI and scan the content of the “included” bits?
4. If I were to change one of my .js files to contain document.write(”), would that work?

Ok, I know I’m being lazy here as I could find the answers by trial and error, but thought it was worth asking!

Reply | Quote

Ok, I’ve managed to answer my own questions.

1. Yes, SSI can cascade
2. I haven’t found any scripting restrictions so far.
3. Yes, see Can Google See SSI?
4. No; fairly obvious really – server-side stuff needs to happen before client-side stuff, so a client-side outputting an SSI include tag won’t be successful.

Reply | Quote

> the ad didn’t display using jscher2000’s HTML

It worked for me, but note the Note at the end: you need to correct the comment tags by deleting the extra space.

As for framing, there are fewer objections to the use of an to “import” content to a page. But it is considered a nonstandard tag.

Reply | Quote

> It worked for me, but note the Note at the end: you need to correct the comment tags by deleting the extra space.

My oversight.

As per my previous post, responding to Mark, I’m attaching to this post my header file.

Thanks!

Reply | Quote

I spoke too soon.

The horizontal line looks fine in Firefox, extending all the way under the Google ad.

But in Internet Explorer:

1. The line stops at the ad;
2. The bottom of the ad, where it says “Advertise on this site,” is slightly cut off; and
3. The Jonathan Rick pic is shifted to the left.

Reply | Quote

Jon

How does look to you?

Just the addition of a tag seem to do the job, but I want to check if this OK to you.

Reply | Quote

Hi Jerry,

It looks better — check it out at http://www.jonathanrick.com[/url%5D — but “Advertise on this site” is still getting lopped off, albeit slightly.

Thanks, again.

Reply | Quote

Hi Jon

I am at a loss, I have fiddled about with

and tried height attributes and am at a loss, it’s infuriating. I shall have a go at it on and off this afternoon in between chores

Reply | Quote

Hi Jon

Right I have had a fiddle with the code for your header. I decided to make an external cascading style sheet so that I could concentrate more on the code. Having researched Google ads, it appears you have chosen the 125×125 px option, no problems there.

Looking at the js code for the ad it seems it is hard coded as a 125×125 box and cannot be changed. To test this I created a 125x 125 box class in the css file to test that it was showing correctly. It does.

Now I am confused that when I view your live site, I see another advert and in a different format to what I see on my local machine, this may be because of the way js files are viewed via a server ( and outside my knowledge)

I have attached a zip file of what I did, set as a local root folder. Sorry I can’t help any further.

Reply | Quote

Hi Jerry,

Piggybacking on your post, I isolated the ad’s HTML into a separate HTM file and determined that the problem lies with Google.

If the advertiser’s URL runs to two lines, then the “Advertise” line gets cut off. If the URL fits on one line, then everything’s fine.

Such shoddiness from Google is hard to believe.

Thanks so much for your patience and help.

Best.
Jon

Reply | Quote

Does this mean that it’s working the way you want it to now? I admit to getting kind of lost with the layout questions mixed in…

Reply | Quote

Thanks for asking.

Actually, I’m still waiting for a reply to post 545,770.

Reply | Quote

And the question is… using SSI?

One gotcha that you may be encountering is the file extension. On Apache based webservers, you typically need to rename the file extension to include an “S” a in:

• .shtm
• .shtml[/list]By doing this, the server knows to look for the INCLUDE directive and parse out any pages that include them.

  Any further questions along the line of using SSI should be in a new thread to keep things coherent.

Reply | Quote