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

Marco Famà

Marco Famà

Active member
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
 
Sort by date Sort by votes
Marco Famà said:
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
Click to expand...

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.
 
Upvote 0 Downvote
Matthew Hawley said:
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.
Click to expand...

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!!
 
Upvote 0 Downvote
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 -->
 
Upvote 0 Downvote
Matthew Hawley said:
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 -->
Click to expand...

unfortunately, this trick does not work.
:(
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Matthew Hawley said:
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>
Click to expand...


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.webp

thanks mate
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
SneakyDave said:
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?
Click to expand...

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!
 
Upvote 0 Downvote
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:
Upvote 0 Downvote
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:
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom