I client has asked me to make a site from a psd and I have been able to do everything he says so far but I am not sure how to do the borders. You can see them here:
He has asked for the site to be fluid. With that I am unsure how I should continue converting the site to css. Should I just cut out those as images and than use border img? on left and right. Can I even do that? Any help would be greatly appreciated.
Thanks
You could have 2 nested divs, placing one on each side, or you could make use of two empty elements (<div> or whatever) and absolutely place them inside the wrapper, height:100% and repeat the image down the y axis, use top:0;left:0;(or right:0) etc to place on each side (position:relative will be needed on the wrapper)
What about how it fades at the top and bottoms?
Your welcome for the help thus far, but to answer your second question; same as above, but, then you have the fading graphic (of a fixed height probably) placed on the outer edges of the header and footer. You’d have to tool with it to get pixel perfection. That’s how I’d first attempt it anyhow…
@eric wouldnt that leave me with a fixed height like you said? I would like fluid.
On a side note what do you mean by “You’d have to tool with it to get pixel perfection.”
Thanks again for all the help everyone
Jeese… 
Never done that, but if I were to try, I would first attempt it like (I would actually probably just ask like you lol)…
Make the left/right wrapper shadows, make the header and footer fluid, then make the top/bottom left/right fading shadows taller than you would ever need, and then give overflow hidden on the header/footer (that will probably hide the overflow?). Or, maybe I’m totally wrong, that’s my first thought on how though.
Your talking about fluid height on the footer/header right? Here is my example of a fluid width layout with the shadows (without the fading top/bottom).
And what do I mean by… “You’d have to tool with it to get pixel perfection.”? Which word don’t you understand?
lol yeah it’s a doozy its way beyond my know how.
Do you mind showing me an example of that…pretty please 
I want it to be completely fluid from its width to its height. So like your example except with the fading top and bottom like you said
The Pixel Perfection part…explain to me like I am a retarded kid
If you use this for the design process you won’t run into these problems 
I’m working on a solution at the moment - Because it’s at least 4 images you’ll need you’ll need at least for html elements to hang them off. If multiple background images were supported you could do it all with one div - or indeed the body.
This seems to work:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* { margin: 0; padding: 0 }
html, body { height: 100% }
.outer { background: #fff url(left-border.png) repeat-y top left; height: 100% }
.inner1 { background: transparent url(right-border.png) repeat-y top right; height: 100% }
.inner2 { background: transparent url(top-left-image-and-top-gradient.png) no-repeat top left; height: 100% }
.inner3 { background: transparent url(bottom-right-image-and-bottom-gradient.png) no-repeat bottom right; height: 100% }
</style>
</head>
<body>
<div class="outer">
<div class="inner1">
<div class="inner2">
<div class="inner3">
...
</div>
</div>
</div>
</div>
</body>
</html>
Not 100% sure if IE will play along with the above… I’ll see if my battery holds out for long enough to check.
Great article…Very intresting. I did not design the site though
Thanks for the help I have a mac can anyone confirm it working in ie?
You’ll need to get yourself a copy of Windows on there in a VM or native with BootCamp.
Yeah I know I have been meaning to for sometime now guess now its a good time to start
Thanks Again
No problemo.
I tested in IE and it works as expected.