...

View Full Version : Border image problems



tripwater
10-30-2006, 06:54 PM
Hello, I have a test page up I would like you to look at. I am trying to set up a page with transparent gifs for borders that can expand. Right now, I have a seemless border working but I have a top div for the top border, a bottom div for the bottom border and a center div for the vertical borders on either side that expand vertically if content is added.

But as I add content, I am noticing that there are times that the vertical lights are going under the bottom border div, cutting off the image. You will see in the example. What can I do to set this page up so if more content is added or less content taken away, it still works? The end result I want is a page that I can just substitute different borders and the divs place them where they should be. It would be nice if the images overlapped, they just lay over one another and the transparent gifs make it look like the lights are on top of each other instead of cutting off the image

THank you for any advice or help with this.

Example (http://www.photogap.net/tripwater/temp_images/testCSS.html)

mark87
10-30-2006, 07:12 PM
There isn't a way, at least not with CSS.

I have seen a method with Javascript before where the height of the div is set to a multiple of the image height; therefore the image is always repeated fully. If you search on here you might be able to find it.

In my opinion, the problem doesn't stand out too much to me though.

tripwater
10-30-2006, 07:18 PM
Thank you. Well in my example it may not seem that noticeable but if I add say one or two more lines of text, it then cuts off a light bulb in half and is really noticeable.

And not to mention that I want to use this for many other shapes or border images which could potentially look worse.

I willt ry to look up your post for that JS code. If you have a second, please respond with the subject line of the post or if you can remember the function name so it will narrow my search a bit.

Again thank you for your time.

_Aerospace_Eng_
10-30-2006, 07:26 PM
Read this thread. I coded something similar for another user. Unfortunately they never returned. Too bad for them. Hopefully someone will get help from it.

http://www.codingforums.com/showthread.php?t=75868

mark87
10-30-2006, 07:28 PM
I've tried alot of searching on here and on Google and can't find it now!

I guess you just need to (with JS) find the height of the div, and then set the height of it to the nearest multiple of the image size.

Someone else might be able to find/remember the other post on this (it wasn't too long ago), but if you like I can try and come up with something...

Edit: Ah _Aerospace_Eng_ jumped in there; that wasn't the thread I was thinking of (if I recall correctly someone had linked to an example), but hopefully you should be on your way to getting a result!

tripwater
10-30-2006, 07:31 PM
thanks. I am going to try to apply the above to what I am doing. May be back if I paint myself into a corner. Thank you again.

_Aerospace_Eng_
10-30-2006, 07:45 PM
Here I just wrote this for you. It uses your bulb images. If the user has JS enabled then the images will look fine. If its not enabled then they will appear like they are overlapping but it won't be that noticeable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bordered Box</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin:0;
padding:0;
background:#FFF;
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.85em;
text-align:center;
}
body {
padding:0 5px;
}
h2 {
text-align:center;
margin:0;
padding:10px;
}
.box {
width:820px; /*you don't need to set a width, it will expand if you needed it to*/
margin:5px auto;
text-align:justify;
}
.box ul {
margin:0;
padding:0;
line-height:0px;
font-size:0;
list-style:none;
}
.bartop {
background:#FFF url(temp_images/bulbs-top.gif) no-repeat;
height:32px;
line-height:0px;
font-size:0;
}
.barbot {
background:#FFF url(temp_images/bulbs-bottom.gif) no-repeat;
height:32px;
line-height:0px;
font-size:0;
}
.box ul li {
float:left;
}
.box ul li.fright {
float:right;
}
.content {
padding:5px 30px;
background:url(temp_images/bulbs-vertical.gif) repeat-y;
}
.content p {
margin:0;
padding:5px 0;
}
/*//]]>*/
</style>
<script type="text/javascript">
window.onload = function()
{
var num = Math.round(document.getElementById('content').offsetHeight / 108);
var howmany = 108 * num;
document.getElementById('content').style.height = howmany + 'px';
}
</script>
</head>

<body>
<h2>Bordered Box</h2>
<div class="box">
<div class="bartop">&nbsp;</div>
<div class="content" id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="barbot">&nbsp;</div>
</div>
</body>
</html>

tripwater
10-30-2006, 07:51 PM
freakin' sweet! THank you. I will get to work on adding this into my code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum