Welcome to WebmasterWorld Guest from 54.162.239.134

Forum Moderators: open

Message Too Old, No Replies

Wrapping text around an overlapped div

making text wrap around an overlapping layer in dreamweaver

     
12:28 am on Apr 20, 2006 (gmt 0)

5+ Year Member



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?

12:45 am on Apr 20, 2006 (gmt 0)

10+ Year Member



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.

1:13 am on Apr 20, 2006 (gmt 0)

5+ Year Member



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?

1:29 am on Apr 20, 2006 (gmt 0)

10+ Year Member



Have you tried:

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

Have fun.

2:34 am on Apr 20, 2006 (gmt 0)

5+ Year Member



Hmm can I make it into an non-editable region?
3:15 am on Apr 20, 2006 (gmt 0)

10+ Year Member



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!

5:11 am on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member jomaxx is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

6:52 am on Apr 20, 2006 (gmt 0)

5+ Year Member



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.

8:40 am on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member jomaxx is a WebmasterWorld Top Contributor of All Time 10+ Year Member



That's exactly what I thought you meant and why I recommended you ask Google.
10:07 am on Apr 20, 2006 (gmt 0)

5+ Year Member



I don't get it. What is wrong with placing ads like this? I thought most websites are already doing it?
3:44 pm on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member jomaxx is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

4:57 pm on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

5:49 pm on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member jomaxx is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

6:30 pm on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

6:50 pm on Apr 20, 2006 (gmt 0)

WebmasterWorld Senior Member jomaxx is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

7:10 pm on Apr 20, 2006 (gmt 0)

5+ Year Member



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.

2:03 am on Apr 21, 2006 (gmt 0)

5+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month