• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How can a DIV be "enclosed" in an independent box?

#1
Dear all

I'm trying to make the 125x125 BuySellAds div work properly in this page:
http://timelapseitalia.com/forum/threads/tltools-alternativa-a-lrtimelapse.793/page-31#post-14598

but I simply can't!

I'm editing the message_body template, and this is the code I'm using:

Code:
<!-- MF ad_message_body -->

<!-- MF Se è il secondo post, visualizzo BSA 125x125 -->
<xen:if is="!{$message.conversation_id} AND !{$ajaxInsert}">
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 1 AND !{$message.conversation_id}">
<div style="display: block !important; float: right !important;">
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<!-- End BuySellAds Zone Code -->
</div>
</xen:if>
</xen:if>
The problem is that the two tiny 125x125 squares are overlapping :( and there is no way to make them look properly - which is, the way they appear here:
http://timelapseitalia.com/

Can you please tell me if there is a way to make that look like the 300x250 square which, instead, appears properly boxed and does not interfere with the rest - like here?

Thanks for your time guys
Marco
 

Matthew Hawley

Well-known member
#2
Dear all

I'm trying to make the 125x125 BuySellAds div work properly in this page:
http://timelapseitalia.com/forum/threads/tltools-alternativa-a-lrtimelapse.793/page-31#post-14598

but I simply can't!

I'm editing the message_body template, and this is the code I'm using:

Code:
<!-- MF ad_message_body -->

<!-- MF Se è il secondo post, visualizzo BSA 125x125 -->
<xen:if is="!{$message.conversation_id} AND !{$ajaxInsert}">
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 1 AND !{$message.conversation_id}">
<div style="display: block !important; float: right !important;">
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<!-- End BuySellAds Zone Code -->
</div>
</xen:if>
</xen:if>
The problem is that the two tiny 125x125 squares are overlapping :( and there is no way to make them look properly - which is, the way they appear here:
http://timelapseitalia.com/

Can you please tell me if there is a way to make that look like the 300x250 square which, instead, appears properly boxed and does not interfere with the rest - like here?

Thanks for your time guys
Marco
I don't quite understand your question...Not 100% sure if this will work, but you could try puttng a <br /> or more of them between the two squares.
 
#3
I don't quite understand your question...Not 100% sure if this will work, but you could try puttng a <br /> or more of them between the two squares.
unfortunately, I cannot interfere on the output code injected by BuySellAds so I need to CSS the div id="bsap_1284248" somehow :-/

Code:
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<!-- End BuySellAds Zone Code -->
thanks for the help!!
 

Matthew Hawley

Well-known member
#4
Code:
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<br />
<!-- End BuySellAds Zone Code -->
 
#5
Code:
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<br />
<!-- End BuySellAds Zone Code -->
unfortunately, this trick does not work.
:(
 

Matthew Hawley

Well-known member
#6
You may have to add more <br />. For example...

Code:
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<br />
<br />
<br />
<!-- End BuySellAds Zone Code -->
If that doesn't work try adding a few more. Then if that doesn't work, you could try <br></br>
 
#7
You may have to add more <br />. For example...

Code:
<!-- BuySellAds Zone Code -->
<div id="bsap_1284248" class="bsarocks bsap_1ec5154dd23da4651be26af32721548b" style="display: block !important; float: right !important; vertical-align: middle; width: 270px; padding-left:10px;"></div>
<br />
<br />
<br />
<!-- End BuySellAds Zone Code -->
If that doesn't work try adding a few more. Then if that doesn't work, you could try <br></br>

unfortunately, it brings all a bit more down but does not help achieving my result: see the big white space underneath?

Screen Shot 2013-06-26 at 2.48.41 PM.png

thanks mate
 

SneakyDave

Well-known member
#10
I tried it for a bit, it's tricky (for me anyway), as I think you would have to add a div to your message text to float your message contents left while your buysellads text is floated right. But it appears you only want to do that for the first 2 posts of a thread? Or perhaps the first 2 posts of a page?
 
#11
I tried it for a bit, it's tricky (for me anyway), as I think you would have to add a div to your message text to float your message contents left while your buysellads text is floated right. But it appears you only want to do that for the first 2 posts of a thread? Or perhaps the first 2 posts of a page?
thanks for the message
yes, I'm just doing it for the 1st two messages in a thread. From the 3rd, a tiny div includes the PayPal donate and Amazon buttons as well.

I thought about that, but I'm not sure I can apply such edit to the template itself.

My question is very simple: why does it work nice on the 1st message (300x250px square ad), but not on the 2nd one? :( Can I apply some kind of extra CSS rule to the "ad1 odd" class? Any ideas?

Thanks!
 
#15
The quote within the message text.

Does this page appear the way you'd like it to?

Unfortunately, it does not
As you can see, the 1st small square on the left gets under the 2nd on the right:

Screen Shot 2013-06-26 at 4.53.27 PM.png

a good way to be output is the following:

Screen Shot 2013-06-26 at 5.28.14 PM.png

so you can see there's a real difference!

Thanks
 
#17
That particular problem appears to be with the buysellads widget code. I assume it is intentional?
I'm sure it is not intentional, cause "universally" (I mean, everywhere else) it appears as the 2nd picture I've uploaded.

If used into the xenForo instance, the problem occurs and I don't know why...
 

SneakyDave

Well-known member
#18
Your home page div has a width of 300px, your xenforo message div has a width of 280px, the home page div has a margin of 5px, the second one has a padding-left of 10px. They don't look the same because they aren't the same CSS code.

Other than that, it's probably beyond my meager CSS help, sorry.

If you can give "div.bsap_1284248 a.adhere" a margin-left of 5px and a margin-top of 3px, that seems to fix the problem for me, but I'm not sure if you can add that.

Code:
div.bsap_1284248 a.adhere {
  color: #666;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid #ccc;
  background: #e7e7e7;
  text-align: center;
  margin-left: 5px; (add this)
  margin-top: 3px; (add this)
}
 
Last edited:
#19
Although I added the above CSS code to my XF template instance, and removed the 280px (now it is 300px), still the issue occur.
It really looks like it's beyond that, don't you think? :confused: