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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Border-Image Help

    I don't quite understand how to work this. I've looked at http://www.w3.org/TR/2002/WD-css3-bo...e-border-image but I don't really understand that.

    This is my attempt on it but it still doesn't seem to work =/

    Code:
    .asdf{
    border-top-left-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/top_left.jpg);
    border-top-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/top_mid.jpg);
    border-top-right-image:url(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/top_right.jpg);
    border-left-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/mid_left.jpg);
    border-right-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/mid_right.jpg);
    border-bottom-left-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/bottom_left.jpg);
    border-bottom-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/bottom_mid.jpg);
    border-bottom-right-image:uri(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/bottom_right.jpg);
    }
    Can anyone tell me what I'm doing wrong?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    This is a CSS 3 working draft. It's not implemented yet, and even if it was, chances are Internet Explorer wouldn't support it.

    W3C working drafts are essentially ideas that the community is mulling over. After it gets approved it becomes a recommendation, and it's then up to the browsers to support it.

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, thanks for the quick response =D

    Is there any alternative for this? I know I can add the borders with extra tables for each box..but can you make it do it all in one tag?

  • #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
    This is probably your best alternative
    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:#000;
    color:#FFF;
    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:326px; /*you don't need to set a width, it will expand if you needed it to*/
    background:url(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/mid_left.jpg) repeat-y;
    margin:5px auto;
    text-align:justify;
    }
    .box ul {
    margin:0;
    padding:0;
    line-height:0px;
    font-size:0;
    list-style:none;
    }
    .topbar {
    background:url(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/top_mid.jpg) repeat-x;
    height:18px;
    }
    .botbar {
    background:url(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/bottom_mid.jpg) repeat-x;
    height:14px;
    }
    .box ul li {
    float:left;
    }
    .box ul li.fright {
    float:right;
    }
    .content {
    background:url(http://i25.photobucket.com/albums/c61/jofilipinoi/v2/mid_right.jpg) right repeat-y;
    margin-left:18px;
    padding:5px 21px 5px 5px;
    }
    .content p {
    margin:0;
    padding:5px 0;
    }
    /*//]]>*/
    </style>
    </head>
    
    <body>
    <h2>Bordered Box</h2>
    <div class="box">
    	<ul class="topbar">
    		<li><img src="http://i25.photobucket.com/albums/c61/jofilipinoi/v2/top_left.jpg" alt="" /></li>
    		<li class="fright"><img src="http://i25.photobucket.com/albums/c61/jofilipinoi/v2/top_right.jpg" alt="" /></li>
    	</ul>
    	<div class="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>
    	</div>
    	<ul class="botbar">
    		<li><img src="http://i25.photobucket.com/albums/c61/jofilipinoi/v2/bottom_left.jpg" alt="" /></li>
    		<li class="fright"><img src="http://i25.photobucket.com/albums/c61/jofilipinoi/v2/bottom_right.jpg" alt="" /></li>
    	</ul>
    </div>
    </body>
    </html>
    The above works on IE5.5+, FF1.0+, Opera 7.54+, NS7.2+ for PC. It may work on other browsers as well but I don't have a Mac.

    I have set a width to it but you can take out the width and it will expand nicely to fit its containing element. If you need to set widths, then take out the width in the .box CSS and just make another class that has the width you need. You can define multiple classes by using a space in between them like so
    Code:
    <div class="box otherclass">
    Last edited by _Aerospace_Eng_; 12-30-2005 at 08:59 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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