...

View Full Version : Border-Image Help



Radeax
12-30-2005, 06:53 AM
I don't quite understand how to work this. I've looked at http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image but I don't really understand that.

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


.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?

rmedek
12-30-2005, 07:18 AM
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.

Radeax
12-30-2005, 07:35 AM
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?

_Aerospace_Eng_
12-30-2005, 07:52 AM
This is probably your best alternative

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

<div class="box otherclass">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum