Shadowed Border on a Fixed and Fluid Wrapper Tutorial
Inspired by Paul OB's tutorial titled Bordering on The Ridiculous... First go make your shadow in Photoshop! Then pick your layout - fixed wrapper or a fluid wrapper?
Fixed Wrapper...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed Wrapper With Shadoweded Border</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#ccc;
}
#wrapper {
min-height:100%;
width:780px;
margin:0 auto;
background:url(fixed.png) 0 0 repeat-y;
}
* html #wrapper {
height:100%;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fixed.png',sizingMethod='scale');
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
Fluid Wrapper...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fluid Wrapper With Shadoweded Border</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#ccc;
}
#wrapper {
min-height:100%;
width:73%;
margin:0 auto;
position:relative;
background:#eee;
}
#left {
position:absolute;
bottom:0;
left:-14px;
width:14px;
height:100%;
background:url(fluid-left.png) 0 0 repeat-y;
}
#right {
position:absolute;
bottom:0;
right:-14px;
width:14px;
height:100%;
background:url(fluid-right.png) 0 0 repeat-y;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper{height:100%;}
#left, #right{background:none;height:999em;}
#left{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fluid-left.png',sizingMethod='scale');}
#right{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fluid-right.png',sizingMethod='scale');}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
