Picnic Website Code Tutorials

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

View Demo

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

View Demo

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

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine