Forum Moderators: not2easy
What they do is splice the image (which is basically a rectangle with a hollow middle) up into 8 pieces. You have the four corners, and the top/left/right/bottom leg.
Then using some fancy table magic, they place all the images in such a way that the rectangle is formed, but also, depending on how much content is in the middle of the table (i.e., the middle of the rectangle), the borders stretch gracefully in the vertical direction. (never seen horizonatally stretching: I do believe the tables are always set in width)
So anyway, I felt that it was time to implement this with css, because I have never seen it done. I have a solution, but it does not work correctly in ie. (big suprise).
Anyway, after fiddling with it for a while, this code will gracefully allow the content to push the rectangle larger vertically, and still retain its integrity:
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The incredibe stretching rectangle</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/xml; charset=ISO-8859-1" />
</head>
<body><!-- overall wrapper div -->
<div id="containerDiv"><!-- the top-left corner image, the top image, and the top-right corner image -->
<img id="topLeft" src="topLeft.png" />
<img id="top" src="top.png" />
<img id="topRight" src="topRight.png" /><!--Just a necessary place holder div -->
<div id="horizontalStrechingDiv"><!--This is the left image bar... note that it isn't an img -->
<div id="left"></div><!-- Actual content goes in this div -->
<div id="content">Hello<br />Hello<br /></div><!-- This is the right image bar, again, no img tag -->
<div id="right"></div></div>
<!-- The botom three images -->
<img id="bottomLeft" src="bottomLeft.png" />
<img id="bottom" src="bottom.png" />
<img id="bottomRight" src="bottomRight.png" />
</div>
</body>
</html>
Now, the css:
body
{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color:white;
color:black;
font-family: verdana,arial,sans-serif;
font-size:1em;
width:100%;
}div
{
position:relative;
margin:0px;
padding:0px;}
img
{
position:relative;
margin:0px;
padding:0px;
}#containerDiv
{
position:absolute;
padding-left:5px;
border:1px solid black;
width:313px;
}#left
{
position:absolute;
height:100%;
width:20px;
top:0px;
left:0px;
background-image:url("left.png");
background-repeat:repeat-y;
}#right
{
position:absolute;
height:100%;
width:20px;
top:0px;
right:0px;
background-image:url("right.png");
background-repeat:repeat-y;
}#content
{
margin-left:20px;
margin-right:20px;
padding:3px
}
[edited by: SethCall at 9:18 am (utc) on July 19, 2003]
2. For me, my images have about 6 pixels in between them. Its as if the images have a margin of 3 around them. I can't figure it out, but this is really a minor problem. I'm forgetting something...
3. Doesn't stretch horizontally. This seems easily remedied; however, thats for tomorrow, as I am dead tired. Also, that wouldn't always be desired anyway, but its still an interesting challenge. Also, because it isn't supposed to strectch horizontally, you have to specify the width of the container div. That has been done here with the width:313px in the containterDiv div.
4. Limitation: the y axis (and if it can stretch horizontally eventually) has to be tileable and probably pretty simple. I dont know how one could ever solve this issue, though.
5. Other than that, its exactly what I set out to do!
If anyone wants to try this, but dont feel like making the images, send me a sticky, I will gladly zip you up what I am using. (dont make fun of my gimp skills :) )
Note to anyone who may replicate this with my images: the width of 313px on the container div is a little too big for the images... its compensating for those strange margins I noticed between images. If you solved that problem, then you should only need to have a widht of 300px, I believe.
[albin.net...]
if some browser gets my content unstyled there aren't random chopped up images all over the place
As long as the images are applied using CSS it shouldn't be a problem
thanks for the link though
