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 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Border image problems

    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
    Last edited by tripwater; 10-30-2006 at 05:56 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    freakin' sweet! THank you. I will get to work on adding this into my code.


  •  

    Posting Permissions

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