Forum Moderators: not2easy

Message Too Old, No Replies

Absolute positioned div for ads

... can content flow around it?

         

the_nerd

3:36 pm on Sep 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi,

I'm looking for a way to place two contextual ads in their own div at a specific position, e.g. half way down the pages. Can I use absolute positioning to make the real content flow around the ads in this div?

tttttttttttttttttttttt
ttttttttttttttttttttttt
tttttttttttttttttttttt
tttttttttttttttttttttt
ttttttttttt ad ad ad
ttttttttttt ad ad ad
tttttttttttttttttttttttt
ttttttttttttttttttttttt
ttttttttttttttttttttttt

I'd like to keep the text content untouched, i.e. add the ads on a site-wide basis.

Thanks, the_nerd

supermanjnk

3:53 pm on Sep 27, 2006 (gmt 0)

10+ Year Member



Most pages that use adds with text either have it at the very top, or if they have them in the middle the text does not wrap around them. The best way to do what you want would be to use a serverside language to randomly append the add somewhere in the middle of the text floated right, This should give the desired affect.
CSS -
#outerdiv{
width:500px;

}

#addiv{
width:200px;
height:200px;
border:1px solid black;
float:right;
top:300px;
}
HTML-
<div id="outerdiv">
<!-- AD GOES HERE -->
<div id="addiv">Here is the ad</div>
text goes here.
</div>

The above will give you a right aligned ad at the top of the content with the text wrapping around it after it reaches the bottom of the box.

You could use a serverside language to insert
<div id="addiv">Here is the ad</div>
in a random spot inside of your text which would make it so text wraps around the top and bottom.

penders

4:10 pm on Sep 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Can I use absolute positioning to make the real content flow around the ads in this div?

You can't use 'absolute' positioning because the element (advert) will be taken out of the flow of the page and your text will simply flow behind it. You will need to 'float' it (as supermanjnk describes above).

supermanjnk

5:22 pm on Sep 27, 2006 (gmt 0)

10+ Year Member




This is a php function that will insert a div about halfway through the text.
<?php
function insertad($str) {
$len = strlen($str);
$arr = str_split($str, $len/2);
$text = $arr[0];
$text .= "<div class=\"addiv\">AD GOES HERE</div>";
$text .= $arr[1];
return $text;
}
?>

Usage:
<?php
$text = "my text";
$text = insertad($text);
echo $text;
?>

the_nerd

6:13 pm on Sep 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



$arr = str_split($str, $len/2);
$text = $arr[0];
$text .= "<div class=\"addiv\">AD GOES HERE</div>";
$text .= $arr[1];

thanks for your help, but ....

this way I could easily cut html tags apart and spoil the whole thing. Pictures might not show, links wouldn't work, ....

Looks like I'd have to split the content into 2 or 3 parts by hand

Is there anything else in the card, using a floated div, that (wild guess) has an upper margin pushing it down - or something like that?

supermanjnk

6:48 pm on Sep 27, 2006 (gmt 0)

10+ Year Member



You could modify the function to only insert them at a newline

function insertad($str) {
$len = strlen($str);
$arr = explode("\n", $str);
$num = count($arr);
$text="";
for ($i=0; $i<$num; $i++){
$text .=$arr[$i];
if ($i == 2 ¦¦ $i == 4) //currenty shows an ad at the 2nd and 4th paragraph (assuming you only have new lines on new paragraphs)
$text .= "<div class=\"addiv\">AD GOES HERE</div>";
}
return $text;
}

the_nerd

7:08 pm on Sep 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



wayyyy better! I'll check for closing /p and br s though.

Thanks for your help!

penders

9:04 pm on Sep 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Just a thought... if you are wanting to insert your advert DIV at a certain position in your HTML markup (if it is already marked up as HTML?) then it may be easier (and more accurate) to use JavaScript to traverse the DOM and perhaps insert it after the 1st or 2nd paragraph. Would avoid any danger of splitting tags etc. Although, admittedly, the major drawback of this approach is the advert won't be seen by SEs.

Can you parse the document (XHTML?) using PHP? HHHmmmm, just think aloud.