Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post

    Fixing corner in sliding doors text box?

    Hi!

    Well, I recently stumbled upon a sliding doors text box script, it's great and works, but, the top left corner is passing the right and making a small ugly area

    Here's what the corer looks like
    You see that little gray line? There is also a non transparent are with it, which means that it must be from the left.

    Here's my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <!--** Time-stamp: <[box.html] modified by Mike on Saturday, 2007.04.07 at 12 : 41 : 08 on GRIMOIRE> **-->
    <title>Reusable Box (sliding doors)</title>
    <style type="text/css">
    /****************************************************************
    ** Reusable Box
    ** This is an image-based box design, which allows arbitrary 
    ** expansion up to the width and height of its component images.
    ** See the "Sliding Doors of CSS" series of articles at A List Apart
    ** for in-depth explanation.
    ** Note that I have not actually implemented "Slding Doors," as the 
    ** markup here is anything but semantic.
    ****************************************************************/
    }
    .reusableBox { 
        background: url(/users/1712/49/18/66/album/topl10.png) no-repeat top left;
        margin-left: -10px;
        position: absolute;
        padding-top: 0px;
     }
    .reusableBox .presentationTop { 
        background: url(/users/1712/49/18/66/album/topr10.png) no-repeat top right;
        margin-left: 10px;
        padding-top: 0px;
     }
    .reusableBox .rbContent { 
        padding-top: 10px;
        padding-left: 10px;  /* another 10px is added by the margin of presentationTop */
        padding-right: 20px;
        position: relative;
     }
    .reusableBox .presentationBottom { 
        height: 15px;
        background: url(/users/1712/49/18/66/album/bottom13.png) no-repeat bottom right;
        position: relative;
        top: 10px;
    }
    .reusableBox .presentationLeftBottom { 
        height: 15px;
        width: 10px;
        margin-left: -10px;
        margin-bottom: -10px;
        background: url(/users/1712/49/18/66/album/bottom14.png) no-repeat bottom left;
        position: relative;
     }
    .reusableBox .rbNipple { 
        background: url(images/nipple.png) no-repeat;
        width: 15px;
        height: 11px;
        position: absolute;
        top: 4px;
        left: 22px;
     }
    .rbSource {  display: none; } /* this line is optional */
    /* styles below here apply to the example implementations */
    div#foo { 
        width: 200px; /* set the width of each box by its id */
        top: 40px;
        left: 300px;
        position: absolute;
     } 
    div#downBalloon { 
        width: 200px;
        top: 110px;
        left: 740px;
        position: relative;
     }
    div#downBalloon .rbNipple { 
        left: 137px;
     }
    p { display: inline; } /* optional */
    code { display: block; padding: .3em; } /* optional */
    </style>
    <script type="text/javascript">
    function makeWeb2Box(elId, width, top, left, hasNipple, nippleOffset) {
      var el = document.getElementById(elId);
      var elContainer = document.createElement('div');
      elContainer.className="reusableBox";
      elContainer.style.width = width;
      elContainer.style.top = top;
      elContainer.style.left = left;
      
      var offset = (nippleOffset ? 'style="left: '+ nippleOffset +'px"' : '');
      var nipple = (hasNipple ? '<div class="rbNipple"' + offset + '></div>' : '');
    
      elContainer.innerHTML = '<div class="presentationTop"><div class="rbContent">' +
      el.innerHTML + 
      '</div><div class="presentationBottom"><div class="presentationLeftBottom">' +
    nipple +
    '</div></div></div>';
      el.parentNode.insertBefore(elContainer, el);
      el.parentNode.removeChild(el);
    }
    
    window.onload = function() {
      makeWeb2Box('bar', 400, 10, 40, true, 102);
      makeWeb2Box('jsBox', 200, 300, 400);
    }
    </script>
    </head>
    <body>
    
    
    <div id="bar" class="rbSource">
    <p><center><font color="white"><b>Box Header</b></font></center>
    <BR>
    Turns the hidden div named 'someId'
    </p>
    </div>
    
    </body> 
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think you need to set the background colour of the top right segment so it's not transparent - which it is by default at the moment.

    Something like:

    Code:
    .reusableBox .presentationTop { 
        background: #FFFFFF url(/users/1712/49/18/66/album/topr10.png) no-repeat top right;
        margin-left: 10px;
        padding-top: 0px;

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    I think you need to set the background colour of the top right segment so it's not transparent - which it is by default at the moment.

    Something like:

    Code:
    .reusableBox .presentationTop { 
        background: #FFFFFF url(/users/1712/49/18/66/album/topr10.png) no-repeat top right;
        margin-left: 10px;
        padding-top: 0px;
    The problem with that is that the entire code is going to be over a page, and all the images have transparency built in

    But that did get rid of the line


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •