...

View Full Version : Fixing corner in sliding doors text box?



Sing
11-01-2009, 07:05 AM
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 http://i33.tinypic.com/2lmlai9.png
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:


<!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>

SB65
11-01-2009, 09:01 AM
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:


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

Sing
11-01-2009, 08:54 PM
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:


.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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum