Wrapping text around an overlapped div

making text wrap around an overlapping layer in dreamweaver

[fi5hbone]

I posted this under another header and I reckon maybe the description was not good enough. Here goes:

TEXT TEXT TEXT TEXT ¦ AD AD ¦
TEXT TEXT TEXT TEXT ¦ AD AD ¦
TEXT TEXT TEXT TEXT ¦ AD AD ¦
TEXT TEXT TEXT TEXT TEXT TXT¦
TEXT TEXT TEXT TEXT TEXT TXT¦
AD AD ¦TT TEXT TEXT TEXT TXT¦
AD AD ¦TT TEXT TEXT TEXT TXT¦
AD AD ¦TT TEXT TEXT TEXT TXT¦

Okay, the above is a template which i want to create in dreamweaver. The "ad" blocks are the uneditable regions while the "text" blocks are the editable regions. What I'm thinking is that the blocks have to be divs and thus, this involves the "ad" divs overlapping the "text" divs in order to create the word wrap effect. This is entirely possible if I want to do it page by page but I was thinking of doing it in a template. This means that I can only edit the "text" area and not the rest.

So far, I have problems making it happen because dreamweaver does not allow me to wrap text around overlapped layers such as the "ad" blocks. If I were to put divs or tables within the "text" divs, it will disappear as soon as I make it into an editable region won't it? I wonder if anyone can provide an insight as to how to do it?

[miedmark]

Try and make a blank page, your content section will be editable section and it should like like this:
-begin editable section:
---------------------------
*-
---------------------------
-end editable section:

Insert this where the * is:

<div style=”display:block;float:right;margin: 5px 5px 5px 5px;”>
your adsense code here
</div>

Your output will look just like you described above:
TEXT TEXT TEXT TEXT ¦ AD AD ¦
TEXT TEXT TEXT TEXT ¦ AD AD ¦
TEXT TEXT TEXT TEXT ¦ AD AD ¦
TEXT TEXT TEXT TEXT TEXT TXT¦
TEXT TEXT TEXT TEXT TEXT TXT¦

To add your ad at the bottom (left justified) insert same code just play around with the float part. Good luck.

[fi5hbone]

Hey thanks!

That's what I just did, what a coincidence! Now the problem is actually getting the bottom div to be fixed at that vertical position and float to the left at the same time. It is easier for the one at the top but not for the bottom I think. You reckon you know how to do the bottom div?

[miedmark]

Have you tried:

<div style=”display:block;float:left;margin: 5px 5px 5px 5px;”>
your adsense code here
</div>

Have fun.

[fi5hbone]

Hmm can I make it into an non-editable region?

[kidd]

Hi, I think you must define a width and a height to make the float work.

I often use that technique for my AdSense layout, so what I do is, if for example Im using a 300x250 rectangle I use the following code:

<div style="width:310px;height:260px;float:left;">
ADSENSE CODE
</div>

This way my article text wraps around my ads nicely.

Cheers!

[jomaxx]

From what I understand you want these blocks to be fixed, so that they don't move as you scroll through the text.

You should run this by Google before putting it online, because there was a time when they did not allow this. I'm not sure if they would say it's OK now or not.

You should also check the code in pretty much every browser you can think of. Explorer, Firefox, Opera, Netscape, Safari, etc. Current releases and also version 4 browsers. Widescreen down to 800x600 windows or smaller. The reason is that if the code screws up for some users and the AdSense code ends up overlapping with the content of the page, that's a violation of the TOS.

[fi5hbone]

Hi,

That is not what I meant though. I meant fixed in a position meaning that it's part of a template so it forever remains at a particular place and not dependent on the paragraphing on the words.

WHen the user scrolls down, it does not follow the viewport but instead remains there.

In my example, the ad block right at the top does not follow the user as he scrolls but remains at left:500px;top:0px. and the other ad block remains at left:0px;top:800px. when the user scrolls past the 800px, he is unable to see both ads anymore.

[jomaxx]

That's exactly what I thought you meant and why I recommended you ask Google.

[fi5hbone]

I don't get it. What is wrong with placing ads like this? I thought most websites are already doing it?

[jomaxx]

Drawing undue attention to the ads. No good cross-browser implementation. Many of the solutions appear jittery/jumpy when scrolling. Risk of having site content being superimposed over AdSense or vice versa. Take your pick.

I've tested a bunch of approaches to implementing nonscrolling content (not related to AdSense), and they all seem to have drawbacks. But if you can find a solid solution that works for everyone, or at least degrades gracefully, then ask Google before putting it online. Maybe they'll say yes.

I'll just reiterate that you want to make sure the solution works for pretty much everyone, not just on your own computer for your own personal combination of browser/OS/version/screensize/preferences.

[Rodney]

How would that draw undue attention to the ads?

Seems like a standard implementation of the adsense ads. This question should just be in the HTML/CSS forum instead of the adsense forum so he can get more technical help.

[jomaxx]

Standard implementation? I've never seen any website use the described effect in any way. I have doubts it can be achieved at all. I certainly don't see how it can be considered "standard".

Anyway, as I have already said, Google have said no to this same kind of gimmickry in the past, and theirs is the only opinion that matters.

[Rodney]

I think one of us isn't understanding what the original poster is asking about. Not sure which one of us that is.

But by standard, I mean an article where the adsense is on the left or right, embedded in the article. Just like Adsense shows on its example page:
[google.com...]

I might be misunderstanding what the original poster is trying to do though. But if it's the above, then it's just a matter of css formatting or table placement.

[jomaxx]

The OP started 3 threads asking what I think is the same question. I'm basing part of my understanding of what he wants on those other threads and part on this sentence above: "When the user scrolls down, it does not follow the viewport but instead remains there."

I'm interpreting this to mean that he doesn't simply want the text to flow around the AdSense blocks (which I agree is common and trivial), but wants the AdSense blocks to remain in a fixed position on the screen, so that as the user scrolls down, the text would flow around the ad blocks dynamically. THAT is neither common nor trivial.

I could be wrong, though, especially because I have no knowledge of DreamWeaver and how its templates work.

[malachite]

Don't know if jomaxx or Rodney is right, I'll leave them to fight it out ;)

jomaxx did raise a good point though, re aspects of the site text overlapping the adsense ads.

If the site the OP is implementing adsense on is the one referred to in his profile, he should do as jomaxx suggests and check the site appearance in all browsers, as in mine, part of the adsense block is obscured by the sign-up box. I'm using Firefox 1.5 on a Mac.

[fi5hbone]

Basically I'm wanting to do what Rodney suggests. And as stated in the Google website he pointed out.

Thank jomaxx though for your input! I still have no idea what you are talking about but my comprehension of English is not very good anyway.

But I want to say a big thank you to all you guys. From where I come from, the people aren't so friendly! Thank you guys once again!