1. 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?

Discussion in 'Styling and Customization Questions' started by Marco Famà, Jun 26, 2013.

  1. 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
     
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

    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. Marco Famà

    Marco Famà Active Member

    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!!
     
  4. Matthew Hawley

    Matthew Hawley Well-Known Member

    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. Marco Famà

    Marco Famà Active Member

    unfortunately, this trick does not work.
    :(
     
  6. Matthew Hawley

    Matthew Hawley Well-Known Member

    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. Marco Famà

    Marco Famà Active Member


    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
     
  8. Matthew Hawley

    Matthew Hawley Well-Known Member

    Yea I see it. Sorry I can't help you. :(
     
    Marco Famà likes this.
  9. Marco Famà

    Marco Famà Active Member

    No worries Matthew, I really appreciated your effort and kindness.
    I'll wait for xenForo's staff replies, hopefully arriving soon :)

    Thanks again
     
  10. SneakyDave

    SneakyDave Well-Known Member

    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?
     
    Marco Famà likes this.
  11. Marco Famà

    Marco Famà Active Member

    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!
     
  12. SneakyDave

    SneakyDave Well-Known Member

    It might have to do with the quote box div in it. Other pages appear to be ok
     
  13. Marco Famà

    Marco Famà Active Member

    what do you mean with quote box div?
     
  14. SneakyDave

    SneakyDave Well-Known Member

  15. Marco Famà

    Marco Famà Active Member


    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
     
  16. SneakyDave

    SneakyDave Well-Known Member

    That particular problem appears to be with the buysellads widget code. I assume it is intentional?
     
  17. Marco Famà

    Marco Famà Active Member

    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...
     
  18. SneakyDave

    SneakyDave Well-Known Member

    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: Jun 26, 2013
  19. Marco Famà

    Marco Famà Active Member

    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:
     
  20. SneakyDave

    SneakyDave Well-Known Member

    I don't see your changes you made to the div. This is what it looks like for me when I apply them in chrome.
    bsad_div.png
     

Share This Page