an image border [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : an image border

Hellusius

08-08-2007, 05:20 PM

Is it possible to make a border out of an image? the image I was going to try and use is the attachement, the middle is transparent, is it possible if not what would be the best way to achieve something liek this.

Greets

tracknut

08-08-2007, 06:08 PM

Actually, the middle is not transparent, it's white. If you made this a .png file with a transparent center, then you could place it on top of another image, and the other image would show through. I presume that's what you're looking for.

Where did you get this frame? It's very nice.

Dave

WebJoel

08-08-2007, 07:11 PM

Using an image for a border is a proposal for CSS3, -which is maybe another 10-years away. IE barely supports CSS2.

There are methods for 'faking it' though...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
p {font-size: 100.1%; line-height:1.0em; margin:16px 0 12px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

</head>
<body>

<div style="width:400px; height:20px; margin:25px auto 0 auto; background:url(bg.gif) repeat-x;"></div>

<div style="position:relative; width:400px; height:auto; margin:0 auto;">

<div style="height:400px; float:left; width:20px; background:url(bg.gif) repeat-y;"></div>
<div style="height:400px; float:right; width:20px; background:url(bg.gif) repeat-y;"></div>
<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
</div>

<div style="clear:both; width:400px; height:20px; margin:0 auto; background:url(bg.gif) repeat-x;"></div>
</body>
</html> and the attached image... crude & ugly. C'mon CSS3!

Hellusius

08-10-2007, 03:54 PM

Not sure I understand, cause allot of websites have it, or atleast thats what I am trying to create, here is an example of a border that looks like a graphical image Click here (http://hiveworkshop.com/resources_new/)

You see those leaves around that informtion/table, thats what I want to make, or atleast something like it.

WebJoel

08-10-2007, 04:52 PM

....here is an example of a border that looks like a graphical image Click here (http://hiveworkshop.com/resources_new/).... Those are not "borders". They are <TD>s, with corner images and repeated horizontal and vertical accompaniments. -We're comparing apples to oranges.

That works, -but it is a cruft of code to acheive it. The CSS example I gave is a bit better, but the CSS3 style rule will be like one line of code, something (and I am guessing at the syntax proposed) like border-image: 20px url() repeat; applied to a container with some element of determining the width of the border, and that one line will replace 90% of what I wrote.

Hellusius

08-10-2007, 04:58 PM

So how Could I possibly do that easy with my border, should I cut it in chunks and have it repeat itself? cause your code looks incredibly long, and I don't think I would understand (just picking up on my CSS again)

WebJoel

08-10-2007, 05:11 PM

Maybe I can do this an easier way for you... a container DIV that is fluid in vertical height and the container DIV ("content") as it expands, also expands the container... (got what I mean?? :confused: )... brb

WebJoel

08-10-2007, 05:27 PM

Here is a more elegant, shorter version. Works IE & Fx still. Being 'bidirectional' image tiling, there is a 'squareness' to the result else there would be a 'chopped' effect at the four corners (unless you place four "position:absolute;" images over them).
Required image attached.

Note the 'inner DIV has a 10px solid white border, -same color as the BACKGROUND color of the inner DIV. The 'inner border' provides the 'pad' between the background DIV tiling background-image, which covers the entire DIV.
Change the inner-DIV border color to see what I mean... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
p {font-size: 100.1%; line-height:1.0em; margin:16px 0 12px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

</head>
<body>

<div style="width:500px; height:auto; padding:30px; margin:25px auto; border:3px double gray; background-image:url(leafy.jpg)">

<div style="width:468px; height:auto; border:10px solid white; padding:25px 5px; background-color:#fff;">
<h1>First-level Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

</div>
</div>

</body>
</html> Generally, anything that can be done, can be done in any one of a number of ways... :D